Почетна Преглед Помоћ
Пријавите се
kangyu
/
vent_deep_agent
1
0
Креирај огранак 0
Датотеке Дискусије 0 Захтеви за спајање 0 Вики
Дрво: c8794b88e5
Гране Ознаке
vent_deep_agent
/
static
/
index.html

index.html 44 KB
Историја Датотека

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    3. 

  3. <head>
    4. 

  4. <meta charset="UTF-8">
    5. 

  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6. 

  6. <title>煤矿通风智能解读系统</title>
    7. 

  7. <style>
    8. 

  8. /* ============================================================
    9. 

  9.    CSS Variables & Reset — Zcode/Codex Dark Theme
    10. 

  10.    ============================================================ */
    11. 

  11. :root {
    12. 

  12.   --bg-primary: #1e1e2e;
    13. 

  13.   --bg-secondary: #181825;
    14. 

  14.   --bg-tertiary: #11111b;
    15. 

  15.   --bg-surface: #242438;
    16. 

  16.   --bg-hover: #2a2a40;
    17. 

  17.   --border: #313244;
    18. 

  18.   --text-primary: #cdd6f4;
    19. 

  19.   --text-secondary: #a6adc8;
    20. 

  20.   --text-muted: #6c7086;
    21. 

  21.   --accent: #89b4fa;
    22. 

  22.   --accent-dim: #74a0e0;
    23. 

  23.   --green: #a6e3a1;
    24. 

  24.   --yellow: #f9e2af;
    25. 

  25.   --red: #f38ba8;
    26. 

  26.   --orange: #fab387;
    27. 

  27.   --purple: #cba6f7;
    28. 

  28.   --font-mono: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', Consolas, monospace;
    29. 

  29.   --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    30. 

  30.   --radius: 8px;
    31. 

  31.   --radius-sm: 4px;
    32. 

  32. }
    33. 

  33. 

  34. *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    35. 

  35. 

  36. html, body { height: 100%; overflow: hidden; }
    37. 

  37. 

  38. body {
    39. 

  39.   font-family: var(--font-sans);
    40. 

  40.   font-size: 14px;
    41. 

  41.   background: var(--bg-primary);
    42. 

  42.   color: var(--text-primary);
    43. 

  43.   display: flex; flex-direction: column;
    44. 

  44. }
    45. 

  45. 

  46. /* ============================================================
    47. 

  47.    Layout
    48. 

  48.    ============================================================ */
    49. 

  49. .app { display: flex; height: 100vh; overflow: hidden; }
    50. 

  50. 

  51. /* Sidebar — Session List */
    52. 

  52. .sidebar {
    53. 

  53.   width: 260px; min-width: 260px;
    54. 

  54.   background: var(--bg-secondary);
    55. 

  55.   border-right: 1px solid var(--border);
    56. 

  56.   display: flex; flex-direction: column;
    57. 

  57.   overflow: hidden;
    58. 

  58. }
    59. 

  59. .sidebar-header {
    60. 

  60.   padding: 16px; border-bottom: 1px solid var(--border);
    61. 

  61.   display: flex; align-items: center; justify-content: space-between;
    62. 

  62. }
    63. 

  63. .sidebar-header h2 { font-size: 15px; font-weight: 600; color: var(--accent); }
    64. 

  64. .btn-new {
    65. 

  65.   width: 32px; height: 32px; border-radius: var(--radius-sm);
    66. 

  66.   background: var(--accent); color: var(--bg-tertiary); border: none;
    67. 

  67.   font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center;
    68. 

  68.   transition: background .15s;
    69. 

  69. }
    70. 

  70. .btn-new:hover { background: var(--accent-dim); }
    71. 

  71. .session-list {
    72. 

  72.   flex: 1; overflow-y: auto; padding: 8px;
    73. 

  73. }
    74. 

  74. .session-item {
    75. 

  75.   padding: 10px 12px; border-radius: var(--radius-sm);
    76. 

  76.   cursor: pointer; margin-bottom: 4px; font-size: 13px;
    77. 

  77.   display: flex; align-items: center; justify-content: space-between;
    78. 

  78.   color: var(--text-secondary); transition: background .1s;
    79. 

  79.   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    80. 

  80. }
    81. 

  81. .session-item:hover { background: var(--bg-hover); }
    82. 

  82. .session-item.active { background: var(--bg-surface); color: var(--text-primary); }
    83. 

  83. .session-item .title { flex: 1; overflow: hidden; text-overflow: ellipsis; }
    84. 

  84. .session-item .count { font-size: 11px; color: var(--text-muted); margin-left: 8px; }
    85. 

  85. .btn-delete {
    86. 

  86.   background: none; border: none; color: var(--text-muted); cursor: pointer;
    87. 

  87.   font-size: 16px; padding: 0 4px; opacity: 0; transition: opacity .1s;
    88. 

  88. }
    89. 

  89. .session-item:hover .btn-delete { opacity: 1; }
    90. 

  90. .btn-delete:hover { color: var(--red); }
    91. 

  91. 

  92. /* Main Chat Area */
    93. 

  93. .main {
    94. 

  94.   flex: 1; display: flex; flex-direction: column;
    95. 

  95.   min-width: 0; background: var(--bg-primary);
    96. 

  96. }
    97. 

  97. .chat-header {
    98. 

  98.   padding: 12px 20px; border-bottom: 1px solid var(--border);
    99. 

  99.   font-size: 14px; font-weight: 600; color: var(--text-secondary);
    100. 

  100.   display: flex; align-items: center; gap: 8px;
    101. 

  101. }
    102. 

  102. .chat-header .status-dot {
    103. 

  103.   width: 8px; height: 8px; border-radius: 50%; background: var(--green);
    104. 

  104. }
    105. 

  105. .chat-header .status-dot.streaming { background: var(--yellow); animation: pulse 1s infinite; }
    106. 

  106. @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
    107. 

  107. 

  108. .messages {
    109. 

  109.   flex: 1; overflow-y: auto; padding: 20px;
    110. 

  110.   display: flex; flex-direction: column; gap: 16px;
    111. 

  111. }
    112. 

  112. 

  113. /* Message bubbles */
    114. 

  114. .msg { max-width: 85%; animation: fadeIn .2s ease; }
    115. 

  115. @keyframes fadeIn { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }
    116. 

  116. .msg.user { align-self: flex-end; }
    117. 

  117. .msg.assistant { align-self: flex-start; }
    118. 

  118. .msg .role {
    119. 

  119.   font-size: 11px; font-weight: 600; text-transform: uppercase;
    120. 

  120.   margin-bottom: 4px; color: var(--text-muted);
    121. 

  121. }
    122. 

  122. .msg.user .role { text-align: right; }
    123. 

  123. .msg .bubble {
    124. 

  124.   padding: 12px 16px; border-radius: var(--radius); line-height: 1.6;
    125. 

  125.   word-break: break-word;
    126. 

  126. }
    127. 

  127. .msg.user .bubble { background: var(--bg-surface); border: 1px solid var(--border); }
    128. 

  128. .msg.assistant .bubble { background: transparent; padding: 0; }
    129. 

  129. 

  130. /* Markdown inside assistant bubble */
    131. 

  131. .msg.assistant .bubble h1,.msg.assistant .bubble h2,.msg.assistant .bubble h3 {
    132. 

  132.   margin: 16px 0 8px; font-weight: 600; color: var(--accent);
    133. 

  133. }
    134. 

  134. .msg.assistant .bubble h1 { font-size: 1.3em; }
    135. 

  135. .msg.assistant .bubble h2 { font-size: 1.15em; }
    136. 

  136. .msg.assistant .bubble h3 { font-size: 1em; }
    137. 

  137. .msg.assistant .bubble h4 { font-size: 0.95em; font-weight: 600; margin: 12px 0 6px; }
    138. 

  138. .msg.assistant .bubble h5 { font-size: 0.9em; font-weight: 600; margin: 10px 0 4px; color: var(--text-secondary); }
    139. 

  139. .msg.assistant .bubble h6 { font-size: 0.85em; font-weight: 600; margin: 8px 0 4px; color: var(--text-muted); }
    140. 

  140. .msg.assistant .bubble p { margin: 4px 0; }
    141. 

  141. .msg.assistant .bubble ul,.msg.assistant .bubble ol { padding-left: 20px; margin: 8px 0; }
    142. 

  142. .msg.assistant .bubble li { margin: 2px 0; }
    143. 

  143. .msg.assistant .bubble code {
    144. 

  144.   font-family: var(--font-mono); font-size: 0.9em;
    145. 

  145.   background: var(--bg-tertiary); padding: 2px 6px; border-radius: var(--radius-sm);
    146. 

  146. }
    147. 

  147. .msg.assistant .bubble pre {
    148. 

  148.   background: var(--bg-tertiary); border: 1px solid var(--border);
    149. 

  149.   border-radius: var(--radius); padding: 12px 16px; overflow-x: auto;
    150. 

  150.   margin: 8px 0; font-size: 13px; line-height: 1.5;
    151. 

  151. }
    152. 

  152. .msg.assistant .bubble pre code { background: none; padding: 0; }
    153. 

  153. .msg.assistant .bubble table {
    154. 

  154.   border-collapse: collapse; width: 100%; margin: 8px 0; font-size: 13px;
    155. 

  155. }
    156. 

  156. .msg.assistant .bubble th,.msg.assistant .bubble td {
    157. 

  157.   border: 1px solid var(--border); padding: 6px 10px; text-align: left;
    158. 

  158. }
    159. 

  159. .msg.assistant .bubble th { background: var(--bg-surface); font-weight: 600; }
    160. 

  160. .msg.assistant .bubble strong { color: var(--yellow); }
    161. 

  161. .msg.assistant .bubble blockquote {
    162. 

  162.   border-left: 3px solid var(--accent); padding-left: 12px;
    163. 

  163.   color: var(--text-secondary); margin: 8px 0;
    164. 

  164. }
    165. 

  165. 

  166. /* Thinking block */
    167. 

  167. .think-block {
    168. 

  168.   margin: 8px 0; border: 1px solid var(--border);
    169. 

  169.   border-radius: var(--radius); overflow: hidden;
    170. 

  170.   background: var(--bg-surface);
    171. 

  171. }
    172. 

  172. .think-block summary {
    173. 

  173.   padding: 8px 12px; cursor: pointer; font-size: 12px;
    174. 

  174.   color: var(--text-muted); background: var(--bg-tertiary);
    175. 

  175.   user-select: none; display: flex; align-items: center; gap: 6px;
    176. 

  176.   transition: color .15s;
    177. 

  177. }
    178. 

  178. .think-block summary:hover { color: var(--accent); }
    179. 

  179. .think-block summary::marker { font-size: 10px; }
    180. 

  180. .think-block .think-content {
    181. 

  181.   padding: 10px 14px; font-size: 12px; color: var(--text-muted);
    182. 

  182.   line-height: 1.6; max-height: 300px; overflow-y: auto;
    183. 

  183.   font-family: var(--font-sans); white-space: pre-wrap;
    184. 

  184.   border-top: 1px solid var(--border);
    185. 

  185.   background: var(--bg-surface);
    186. 

  186. }
    187. 

  187. .think-block summary .think-icon { animation: spin 2s linear infinite; display: inline-block; }
    188. 

  188. .think-block[open] summary .think-icon { animation: none; }
    189. 

  189. 

  190. /* Duration badge */
    191. 

  191. .msg-duration {
    192. 

  192.   font-size: 11px; color: var(--text-muted); margin-top: 4px;
    193. 

  193.   display: flex; align-items: center; gap: 4px;
    194. 

  194. }
    195. 

  195. 

  196. /* Agent card — container for sub-agent tools + progress */
    197. 

  197. .agent-card {
    198. 

  198.   margin: 6px 0; border: 1px solid var(--border);
    199. 

  199.   border-radius: var(--radius); overflow: hidden;
    200. 

  200.   background: var(--bg-surface); font-size: 12px;
    201. 

  201.   border-left: 3px solid var(--accent);
    202. 

  202.   transition: border-color .3s;
    203. 

  203. }
    204. 

  204. .agent-card.running { border-left-color: var(--yellow); }
    205. 

  205. .agent-card.done { border-left-color: var(--green); }
    206. 

  206. .agent-card.error { border-left-color: var(--red); }
    207. 

  207. .agent-card .agent-header {
    208. 

  208.   display: flex; align-items: center; gap: 8px;
    209. 

  209.   padding: 8px 12px; background: var(--bg-tertiary);
    210. 

  210. }
    211. 

  211. .agent-card .agent-icon {
    212. 

  212.   width: 16px; height: 16px; flex-shrink: 0;
    213. 

  213.   display: inline-flex; align-items: center; justify-content: center;
    214. 

  214.   font-size: 12px; line-height: 1;
    215. 

  215. }
    216. 

  216. /* 运行中：环形旋转 spinner */
    217. 

  217. .agent-card.running .agent-icon {
    218. 

  218.   width: 14px; height: 14px;
    219. 

  219.   border: 2px solid var(--border);
    220. 

  220.   border-top-color: var(--yellow);
    221. 

  221.   border-radius: 50%;
    222. 

  222.   animation: spin 0.8s linear infinite;
    223. 

  223.   font-size: 0;
    224. 

  224. }
    225. 

  225. /* 完成/错误：emoji 居中 */
    226. 

  226. .agent-card.done .agent-icon,
    227. 

  227. .agent-card.error .agent-icon {
    228. 

  228.   border: none; width: 16px; height: 16px;
    229. 

  229.   animation: none; font-size: 12px;
    230. 

  230. }
    231. 

  231. .agent-card .agent-name { color: var(--text-secondary); flex: 1; font-weight: 500; }
    232. 

  232. .agent-card .agent-status { font-size: 11px; color: var(--text-muted); }
    233. 

  233. .agent-card .agent-body {
    234. 

  234.   padding: 2px 0;
    235. 

  235.   max-height: 250px; overflow-y: auto;
    236. 

  236. }
    237. 

  237. 	/* ── 工具翻页动画（仅显示当前正在执行的一个工具）── */
    238. 

  238. 	.agent-body .tool-flipper {
    239. 

  239. 	  perspective: 600px;
    240. 

  240. 	  min-height: 30px;
    241. 

  241. 	  overflow: hidden;
    242. 

  242. 	}
    243. 

  243. 	.agent-body .current-tool {
    244. 

  244. 	  padding: 5px 12px; font-size: 11px;
    245. 

  245. 	  display: flex; align-items: center; gap: 6px;
    246. 

  246. 	  color: var(--text-muted);
    247. 

  247. 	  transform-origin: center center;
    248. 

  248. 	  backface-visibility: hidden;
    249. 

  249. 	}
    250. 

  250. 	.agent-body .current-tool.flip-out {
    251. 

  251. 	  animation: toolFlipOut 0.28s ease forwards;
    252. 

  252. 	  pointer-events: none;
    253. 

  253. 	}
    254. 

  254. 	.agent-body .current-tool.flip-in {
    255. 

  255. 	  animation: toolFlipIn 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    256. 

  256. 	}
    257. 

  257. 	@keyframes toolFlipIn {
    258. 

  258. 	  from { transform: rotateX(100deg); opacity: 0; }
    259. 

  259. 	  to   { transform: rotateX(0deg); opacity: 1; }
    260. 

  260. 	}
    261. 

  261. 	@keyframes toolFlipOut {
    262. 

  262. 	  from { transform: rotateX(0deg); opacity: 1; }
    263. 

  263. 	  to   { transform: rotateX(-100deg); opacity: 0; }
    264. 

  264. 	}
    265. 

  265. .agent-body .current-tool .mt-icon { font-size: 12px; flex-shrink: 0; width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; }
    266. 

  266. .agent-body .current-tool .mt-name { flex: 1; color: var(--yellow); }
    267. 

  267. .agent-body .current-tool.done .mt-name { color: var(--text-secondary); }
    268. 

  268. /* 工具执行中的环形旋转 spinner */
    269. 

  269. .spin-icon-sm {
    270. 

  270.   display: inline-block;
    271. 

  271.   width: 10px; height: 10px;
    272. 

  272.   border: 2px solid var(--border);
    273. 

  273.   border-top-color: var(--yellow);
    274. 

  274.   border-radius: 50%;
    275. 

  275.   animation: spin 0.7s linear infinite;
    276. 

  276.   flex-shrink: 0;
    277. 

  277.   vertical-align: middle;
    278. 

  278. }
    279. 

  279. /* Nested mini todo inside agent body */
    280. 

  280. .agent-body .mini-todo {
    281. 

  281.   display: flex; align-items: center; gap: 4px;
    282. 

  282.   padding: 3px 12px; font-size: 11px; color: var(--text-muted);
    283. 

  283.   border-bottom: 1px solid var(--border);
    284. 

  284. }
    285. 

  285. .agent-body .mini-todo .mt-check {
    286. 

  286.   width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
    287. 

  287.   border: 2px solid var(--border);
    288. 

  288. }
    289. 

  289. .agent-body .mini-todo.completed .mt-check { background: var(--green); border-color: var(--green); }
    290. 

  290. .agent-body .mini-todo.in_progress .mt-check { border-color: var(--yellow); background: var(--yellow); }
    291. 

  291. .agent-body .mini-todo .mt-label { flex: 1; font-size: 11px; }
    292. 

  292. .agent-body .mini-todo.completed .mt-label { text-decoration: line-through; }
    293. 

  293. 

  294. /* Tool call card (standalone, outside agent) */
    295. 

  295. .tool-card {
    296. 

  296.   margin: 6px 0; padding: 8px 12px; border-radius: var(--radius-sm);
    297. 

  297.   background: var(--bg-surface); border-left: 3px solid var(--accent);
    298. 

  298.   font-size: 12px; display: flex; align-items: center; gap: 8px;
    299. 

  299. }
    300. 

  300. .tool-card.pending { border-left-color: var(--yellow); }
    301. 

  301. .tool-card.done { border-left-color: var(--green); }
    302. 

  302. .tool-card .tool-icon { font-size: 14px; }
    303. 

  303. .tool-card .tool-name { color: var(--text-secondary); flex: 1; }
    304. 

  304. .tool-card .tool-status { font-size: 11px; color: var(--text-muted); }
    305. 

  305. 

  306. /* Status bar (agent thinking/executing) */
    307. 

  307. .status-bar {
    308. 

  308.   padding: 6px 16px; font-size: 12px; color: var(--text-muted);
    309. 

  309.   border-top: 1px solid var(--border); display: flex; align-items: center; gap: 8px;
    310. 

  310.   min-height: 32px;
    311. 

  311. }
    312. 

  312. .status-bar .spinner {
    313. 

  313.   width: 12px; height: 12px; border: 2px solid var(--border);
    314. 

  314.   border-top-color: var(--accent); border-radius: 50%; animation: spin .6s linear infinite;
    315. 

  315. }
    316. 

  316. @keyframes spin { to{transform:rotate(360deg)} }
    317. 

  317. 

  318. /* Input area */
    319. 

  319. .input-area {
    320. 

  320.   padding: 12px 20px; border-top: 1px solid var(--border);
    321. 

  321.   display: flex; gap: 10px; align-items: center;
    322. 

  322. }
    323. 

  323. .input-area textarea {
    324. 

  324.   flex: 1; background: var(--bg-surface); border: 1px solid var(--border);
    325. 

  325.   border-radius: var(--radius); color: var(--text-primary); padding: 10px 14px;
    326. 

  326.   font-family: var(--font-sans); font-size: 14px; resize: none; outline: none;
    327. 

  327.   min-height: 44px; max-height: 150px; line-height: 1.4;
    328. 

  328.   transition: border-color .15s;
    329. 

  329. }
    330. 

  330. .input-area textarea:focus { border-color: var(--accent); }
    331. 

  331. .btn-send {
    332. 

  332.   width: 44px; height: 44px; border-radius: var(--radius);
    333. 

  333.   background: var(--accent); color: var(--bg-tertiary); border: none;
    334. 

  334.   font-size: 18px; cursor: pointer; transition: background .15s;
    335. 

  335.   display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    336. 

  336. }
    337. 

  337. .btn-send:hover { background: var(--accent-dim); }
    338. 

  338. .btn-send:disabled { background: var(--border); cursor: not-allowed; }
    339. 

  339. .btn-attach {
    340. 

  340.   width: 44px; height: 44px; border-radius: var(--radius);
    341. 

  341.   background: var(--bg-surface); border: 1px solid var(--border);
    342. 

  342.   color: var(--text-secondary); font-size: 18px; cursor: pointer;
    343. 

  343.   display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    344. 

  344.   transition: background .1s, border-color .1s;
    345. 

  345. }
    346. 

  346. .btn-attach:hover { border-color: var(--accent); color: var(--accent); }
    347. 

  347. .btn-attach.has-file { border-color: var(--green); color: var(--green); }
    348. 

  348. #file-input { display: none; }
    349. 

  349. 

  350. /* Detail Panel (right) */
    351. 

  351. .detail-panel {
    352. 

  352.   width: 280px; min-width: 280px;
    353. 

  353.   background: var(--bg-secondary); border-left: 1px solid var(--border);
    354. 

  354.   display: flex; flex-direction: column; overflow: hidden;
    355. 

  355. }
    356. 

  356. .detail-panel h3 {
    357. 

  357.   padding: 16px; font-size: 13px; font-weight: 600;
    358. 

  358.   color: var(--text-muted); text-transform: uppercase;
    359. 

  359.   letter-spacing: 0.5px; border-bottom: 1px solid var(--border);
    360. 

  360. }
    361. 

  361. .detail-content { flex: 1; overflow-y: auto; padding: 12px; }
    362. 

  362. .detail-content .section { margin-bottom: 16px; }
    363. 

  363. .detail-content .section-title {
    364. 

  364.   font-size: 11px; font-weight: 600; color: var(--text-muted);
    365. 

  365.   text-transform: uppercase; margin-bottom: 8px;
    366. 

  366. }
    367. 

  367. .todo-item {
    368. 

  368.   display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 12px;
    369. 

  369. }
    370. 

  370. .todo-item .todo-check {
    371. 

  371.   width: 14px; height: 14px; border-radius: 50%;
    372. 

  372.   border: 2px solid var(--border); flex-shrink: 0;
    373. 

  373. }
    374. 

  374. .todo-item.completed .todo-check { background: var(--green); border-color: var(--green); }
    375. 

  375. .todo-item.in_progress .todo-check { border-color: var(--yellow); background: var(--yellow); }
    376. 

  376. .todo-item .todo-label { color: var(--text-secondary); }
    377. 

  377. .todo-item.completed .todo-label { text-decoration: line-through; color: var(--text-muted); }
    378. 

  378. 

  379. .tool-log-item {
    380. 

  380.   font-size: 11px; padding: 4px 0; color: var(--text-muted);
    381. 

  381.   border-bottom: 1px solid var(--border); display: flex; gap: 6px;
    382. 

  382. }
    383. 

  383. .tool-log-item .tl-icon { flex-shrink: 0; }
    384. 

  384. .tool-log-item .tl-name { color: var(--text-secondary); }
    385. 

  385. 

  386. /* Toast */
    387. 

  387. .toast {
    388. 

  388.   position: fixed; top: 16px; right: 16px; padding: 10px 16px;
    389. 

  389.   border-radius: var(--radius); font-size: 13px; z-index: 1000;
    390. 

  390.   animation: slideIn .2s ease; max-width: 400px;
    391. 

  391. }
    392. 

  392. .toast.error { background: var(--red); color: #fff; }
    393. 

  393. .toast.info { background: var(--accent); color: var(--bg-tertiary); }
    394. 

  394. @keyframes slideIn { from{transform:translateX(100%)} to{transform:translateX(0)} }
    395. 

  395. 

  396. /* Download Button */
    397. 

  397. .download-btn {
    398. 

  398.   display: inline-flex; align-items: center; gap: 8px;
    399. 

  399.   padding: 10px 20px; margin: 12px 0;
    400. 

  400.   background: var(--green); color: var(--bg-tertiary);
    401. 

  401.   border: none; border-radius: var(--radius);
    402. 

  402.   font-size: 14px; font-weight: 600; cursor: pointer;
    403. 

  403.   text-decoration: none; transition: background .15s, transform .1s;
    404. 

  404. }
    405. 

  405. .download-btn:hover { background: #8fd98f; transform: translateY(-1px); }
    406. 

  406. .download-btn:active { transform: translateY(0); }
    407. 

  407. .download-btn .dl-icon { font-size: 18px; }
    408. 

  408. 

  409. /* Empty state */
    410. 

  410. .empty-state {
    411. 

  411.   flex: 1; display: flex; flex-direction: column; align-items: center;
    412. 

  412.   justify-content: center; color: var(--text-muted); gap: 12px;
    413. 

  413. }
    414. 

  414. .empty-state .big-icon { font-size: 48px; opacity: .3; }
    415. 

  415. 

  416. /* Scrollbar */
    417. 

  417. ::-webkit-scrollbar { width: 6px; }
    418. 

  418. ::-webkit-scrollbar-track { background: transparent; }
    419. 

  419. ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
    420. 

  420. ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
    421. 

  421. 

  422. /* Responsive: hide detail panel on small screens */
    423. 

  423. @media (max-width: 1000px) { .detail-panel { display: none; } }
    424. 

  424. @media (max-width: 700px) { .sidebar { display: none; } }
    425. 

  425. </style>
    426. 

  426. </head>
    427. 

  427. <body>
    428. 

  428. 

  429. <div class="app">
    430. 

  430.   <!-- ============ Sidebar: Session List ============ -->
    431. 

  431.   <aside class="sidebar">
    432. 

  432.     <div class="sidebar-header">
    433. 

  433.       <h2>💨 通风智能助手</h2>
    434. 

  434.       <button class="btn-new" onclick="newSession()" title="新建会话">+</button>
    435. 

  435.     </div>
    436. 

  436.     <div class="session-list" id="session-list"></div>
    437. 

  437.   </aside>
    438. 

  438. 

  439.   <!-- ============ Main Chat Area ============ -->
    440. 

  440.   <main class="main">
    441. 

  441.     <div class="chat-header">
    442. 

  442.       <span class="status-dot" id="status-dot"></span>
    443. 

  443.       <span id="chat-title">新会话</span>
    444. 

  444.     </div>
    445. 

  445.     <div class="messages" id="messages">
    446. 

  446.       <div class="empty-state">
    447. 

  447.         <div class="big-icon">⛏️</div>
    448. 

  448.         <div>煤矿通风数据智能解读系统</div>
    449. 

  449.         <div style="font-size:12px">输入问题或上传配风计划 PDF 开始分析</div>
    450. 

  450.       </div>
    451. 

  451.     </div>
    452. 

  452.     <div class="status-bar" id="status-bar"></div>
    453. 

  453.     <div class="input-area">
    454. 

  454.       <button class="btn-attach" id="btn-attach" onclick="document.getElementById('file-input').click()" title="上传附件">📎</button>
    455. 

  455.       <input type="file" id="file-input" accept=".pdf,.doc,.docx,.txt" onchange="onFileSelected(this)">
    456. 

  456.       <textarea id="input" placeholder="输入您的问题..." rows="1" onkeydown="onInputKey(event)"></textarea>
    457. 

  457.       <button class="btn-send" id="btn-send" onclick="sendMessage()" title="发送">↑</button>
    458. 

  458.     </div>
    459. 

  459.   </main>
    460. 

  460. 

  461.   <!-- ============ Detail Panel ============ -->
    462. 

  462.   <aside class="detail-panel" id="detail-panel">
    463. 

  463.     <h3>📋 任务详情</h3>
    464. 

  464.     <div class="detail-content" id="detail-content">
    465. 

  465.       <div style="color:var(--text-muted);font-size:12px;text-align:center;margin-top:40px;">
    466. 

  466.         发送消息后<br>此处显示任务进度和工具调用
    467. 

  467.       </div>
    468. 

  468.     </div>
    469. 

  469.   </aside>
    470. 

  470. </div>
    471. 

  471. 

  472. <!-- Toast container -->
    473. 

  473. <div id="toast-container"></div>
    474. 

  474. 

  475. <script>
    476. 

  476. // ============================================================
    477. 

  477. // State
    478. 

  478. // ============================================================
    479. 

  479. const API = '/api';
    480. 

  480. let currentSessionId = localStorage.getItem('vent_session_id') || null;
    481. 

  481. let currentAbortController = null;
    482. 

  482. let todoItems = [];
    483. 

  483. let toolLogs = [];
    484. 

  484. let activeThinkBlock = null;
    485. 

  485. let pendingDownloadUrl = null;
    486. 

  486. 

  487. // ============================================================
    488. 

  488. // Init
    489. 

  489. // ============================================================
    490. 

  490. document.addEventListener('DOMContentLoaded', () => {
    491. 

  491.   loadSessions();
    492. 

  492.   if (currentSessionId) loadHistory(currentSessionId);
    493. 

  493. });
    494. 

  494. 

  495. // ============================================================
    496. 

  496. // Session Management
    497. 

  497. // ============================================================
    498. 

  498. async function loadSessions() {
    499. 

  499.   try {
    500. 

  500.     const res = await fetch(`${API}/sessions`);
    501. 

  501.     const data = await res.json();
    502. 

  502.     renderSessionList(data.sessions || []);
    503. 

  503.   } catch(e) { console.error('加载会话列表失败', e); }
    504. 

  504. }
    505. 

  505. 

  506. function renderSessionList(sessions) {
    507. 

  507.   const el = document.getElementById('session-list');
    508. 

  508.   if (!sessions.length) {
    509. 

  509.     el.innerHTML = '<div style="color:var(--text-muted);font-size:12px;padding:16px;text-align:center">暂无会话</div>';
    510. 

  510.     return;
    511. 

  511.   }
    512. 

  512.   el.innerHTML = sessions.map(s => `
    513. 

  513.     <div class="session-item ${s.session_id === currentSessionId ? 'active' : ''}"
    514. 

  514.          onclick="switchSession('${s.session_id}')">
    515. 

  515.       <span class="title">${escHtml(s.title || s.session_id?.slice(0,8) || '新会话')}</span>
    516. 

  516.       <span class="count">${s.message_count || 0}</span>
    517. 

  517.       <button class="btn-delete" onclick="event.stopPropagation();deleteSession('${s.session_id}')">×</button>
    518. 

  518.     </div>
    519. 

  519.   `).join('');
    520. 

  520. }
    521. 

  521. 

  522. function newSession() {
    523. 

  523.   abortStream();
    524. 

  524.   currentSessionId = null;
    525. 

  525.   localStorage.removeItem('vent_session_id');
    526. 

  526.   document.getElementById('messages').innerHTML = `
    527. 

  527.     <div class="empty-state">
    528. 

  528.       <div class="big-icon">⛏️</div>
    529. 

  529.       <div>煤矿通风数据智能解读系统</div>
    530. 

  530.       <div style="font-size:12px">输入问题或上传配风计划 PDF 开始分析</div>
    531. 

  531.     </div>`;
    532. 

  532.   document.getElementById('chat-title').textContent = '新会话';
    533. 

  533.   document.getElementById('status-bar').innerHTML = '';
    534. 

  534.   document.getElementById('detail-content').innerHTML = '<div style="color:var(--text-muted);font-size:12px;text-align:center;margin-top:40px;">发送消息后<br>此处显示任务进度和工具调用</div>';
    535. 

  535.   todoItems = [];
    536. 

  536.   toolLogs = [];
    537. 

  537.   pendingDownloadUrl = null;
    538. 

  538.   loadSessions();
    539. 

  539. }
    540. 

  540. 

  541. async function switchSession(sid) {
    542. 

  542.   if (sid === currentSessionId) return;
    543. 

  543.   abortStream();
    544. 

  544.   currentSessionId = sid;
    545. 

  545.   localStorage.setItem('vent_session_id', sid);
    546. 

  546.   document.getElementById('chat-title').textContent = sid.slice(0,8) + '...';
    547. 

  547.   loadSessions();
    548. 

  548.   await loadHistory(sid);
    549. 

  549. }
    550. 

  550. 

  551. async function deleteSession(sid) {
    552. 

  552.   abortStream();
    553. 

  553.   await fetch(`${API}/sessions/${sid}`, { method: 'DELETE' });
    554. 

  554.   if (currentSessionId === sid) newSession();
    555. 

  555.   else loadSessions();
    556. 

  556. }
    557. 

  557. 

  558. async function loadHistory(sid) {
    559. 

  559.   try {
    560. 

  560.     const res = await fetch(`${API}/chat/history/${sid}`);
    561. 

  561.     const data = await res.json();
    562. 

  562.     const msgsEl = document.getElementById('messages');
    563. 

  563.     msgsEl.innerHTML = '';
    564. 

  564.     if (!data.messages || !data.messages.length) {
    565. 

  565.       msgsEl.innerHTML = '<div class="empty-state"><div class="big-icon">💬</div><div>开始对话吧</div></div>';
    566. 

  566.       return;
    567. 

  567.     }
    568. 

  568.     let lastRole = null;
    569. 

  569.     data.messages.forEach(m => {
    570. 

  570.       if (m.role === 'user') {
    571. 

  571.         addMessage('user', m.content);
    572. 

  572.         lastRole = 'user';
    573. 

  573.       } else if (m.role === 'assistant' && m.content) {
    574. 

  574.         addMessage('assistant', m.content);
    575. 

  575.         lastRole = 'assistant';
    576. 

  576.       }
    577. 

  577.     });
    578. 

  578.     document.getElementById('chat-title').textContent = data.messages[0]?.content?.slice(0,30) || sid.slice(0,8);
    579. 

  579.     scrollToBottom();
    580. 

  580.   } catch(e) { console.error('加载历史失败', e); }
    581. 

  581. }
    582. 

  582. 

  583. // ============================================================
    584. 

  584. // Message Rendering
    585. 

  585. // ============================================================
    586. 

  586. function addMessage(role, content) {
    587. 

  587.   const msgs = document.getElementById('messages');
    588. 

  588.   // Remove empty state
    589. 

  589.   const empty = msgs.querySelector('.empty-state');
    590. 

  590.   if (empty) empty.remove();
    591. 

  591. 

  592.   const div = document.createElement('div');
    593. 

  593.   div.className = `msg ${role}`;
    594. 

  594.   div.innerHTML = `
    595. 

  595.     <div class="role">${role === 'user' ? 'YOU' : 'ASSISTANT'}</div>
    596. 

  596.     <div class="bubble">${role === 'assistant' ? renderMarkdown(content) : escHtml(content)}</div>`;
    597. 

  597.   msgs.appendChild(div);
    598. 

  598.   scrollToBottom();
    599. 

  599.   return div;
    600. 

  600. }
    601. 

  601. 

  602. function getOrCreateAssistantMsg() {
    603. 

  603.   const msgs = document.getElementById('messages');
    604. 

  604.   const empty = msgs.querySelector('.empty-state');
    605. 

  605.   if (empty) empty.remove();
    606. 

  606. 

  607.   // Find last assistant message
    608. 

  608.   let last = msgs.querySelector('.msg.assistant:last-child');
    609. 

  609.   if (!last) {
    610. 

  610.     last = document.createElement('div');
    611. 

  611.     last.className = 'msg assistant';
    612. 

  612.     last.innerHTML = '<div class="role">ASSISTANT</div><div class="bubble"></div>';
    613. 

  613.     msgs.appendChild(last);
    614. 

  614.     activeThinkBlock = null;
    615. 

  615.   }
    616. 

  616.   const bubble = last.querySelector('.bubble');
    617. 

  617.   // 确保 markdown 文本容器存在（与 Agent 卡片/工具卡片隔离）
    618. 

  618.   if (!bubble.querySelector('.msg-markdown')) {
    619. 

  619.     const md = document.createElement('div');
    620. 

  620.     md.className = 'msg-markdown';
    621. 

  621.     bubble.appendChild(md);
    622. 

  622.   }
    623. 

  623.   return bubble;
    624. 

  624. }
    625. 

  625. 

  626. function appendToken(text) {
    627. 

  627.   const bubble = getOrCreateAssistantMsg();
    628. 

  628.   const md = bubble.querySelector('.msg-markdown');
    629. 

  629. 

  630.   // 累积原始 markdown 文本
    631. 

  631.   const existing = md.getAttribute('data-raw') || '';
    632. 

  632.   md.setAttribute('data-raw', existing + text);
    633. 

  633. 

  634.   // 实时追加 token 文本
    635. 

  635.   const span = document.createElement('span');
    636. 

  636.   span.textContent = text;
    637. 

  637.   md.appendChild(span);
    638. 

  638. 

  639.   // 每积累约 128 字符时重新渲染（保持表格/标题等格式实时可见）
    640. 

  640.   const raw = md.getAttribute('data-raw');
    641. 

  641.   if (raw && raw.length % 128 < text.length) {
    642. 

  642.     md.innerHTML = renderMarkdown(raw);
    643. 

  643.     md.setAttribute('data-raw', raw);
    644. 

  644.   }
    645. 

  645. 

  646.   scrollToBottom();
    647. 

  647. }
    648. 

  648. 

  649. function appendThinking(text) {
    650. 

  650.   const bubble = getOrCreateAssistantMsg();
    651. 

  651.   if (!activeThinkBlock || !bubble.contains(activeThinkBlock)) {
    652. 

  652.     activeThinkBlock = document.createElement('details');
    653. 

  653.     activeThinkBlock.className = 'think-block';
    654. 

  654.     activeThinkBlock.open = true; // 默认展开
    655. 

  655.     activeThinkBlock.innerHTML = '<summary><span class="think-icon">💭</span> 思考过程</summary><div class="think-content"></div>';
    656. 

  656.     // Insert at beginning of bubble, before any existing content
    657. 

  657.     bubble.insertBefore(activeThinkBlock, bubble.firstChild);
    658. 

  658.   }
    659. 

  659.   const content = activeThinkBlock.querySelector('.think-content');
    660. 

  660.   content.textContent += text;
    661. 

  661.   // Auto-scroll the think content
    662. 

  662.   content.scrollTop = content.scrollHeight;
    663. 

  663.   scrollToBottom();
    664. 

  664. }
    665. 

  665. 

  666. function addToolCard(name, cnName, status, agentCn) {
    667. 

  667.   const displayName = cnName || name;
    668. 

  668. 

  669.   // ── Agent 内工具：翻页动画，仅显示当前正在执行的一个 ──
    670. 

  670.   if (agentCn && agentCards[agentCn]) {
    671. 

  671.     const body = agentCards[agentCn].querySelector('.agent-body');
    672. 

  672.     if (!body) return;
    673. 

  673. 

  674.     // 获取或创建翻页容器，始终保持在 body 的最底部
    675. 

  675.     let flipper = body.querySelector('.tool-flipper');
    676. 

  676.     if (!flipper) {
    677. 

  677.       flipper = document.createElement('div');
    678. 

  678.       flipper.className = 'tool-flipper';
    679. 

  679.     }
    680. 

  680.     body.appendChild(flipper);
    681. 

  681. 

  682.     // 当前显示的工具元素
    683. 

  683.     let current = flipper.querySelector('.current-tool');
    684. 

  684.     if (!current) {
    685. 

  685.       current = document.createElement('div');
    686. 

  686.       current.className = 'current-tool';
    687. 

  687.       current.innerHTML = `<span class="mt-icon spin-icon-sm"></span><span class="mt-name"></span>`;
    688. 

  688.       flipper.appendChild(current);
    689. 

  689.     }
    690. 

  690. 

  691.     // ── 取消所有进行中的动画，干净重置 ──
    692. 

  692.     current.getAnimations().forEach(a => a.cancel());
    693. 

  693.     if (current._fadeTimer) { clearTimeout(current._fadeTimer); current._fadeTimer = null; }
    694. 

  694.     // 清除动画残留的 inline style（animation fill 可能留下的 transform/opacity）
    695. 

  695.     current.style.transform = '';
    696. 

  696.     current.style.opacity = '';
    697. 

  697. 

  698.     if (status === 'done') {
    699. 

  699.       // 工具完成：显示 ✅，1.2s 后翻出消失
    700. 

  700.       current.className = 'current-tool done';
    701. 

  701.       const iconEl = current.querySelector('.mt-icon');
    702. 

  702.       iconEl.className = 'mt-icon';
    703. 

  703.       iconEl.textContent = '✅';
    704. 

  704.       current.querySelector('.mt-name').textContent = displayName;
    705. 

  705.       current._fadeTimer = setTimeout(() => {
    706. 

  706.         if (current.parentNode) {
    707. 

  707.           // 取消可能在进行中的动画，然后翻出
    708. 

  708.           current.getAnimations().forEach(a => a.cancel());
    709. 

  709.           current.style.transform = '';
    710. 

  710.           current.style.opacity = '';
    711. 

  711.           current.className = 'current-tool flip-out';
    712. 

  712.           current._fadeTimer = null;
    713. 

  713.         }
    714. 

  714.       }, 1200);
    715. 

  715.     } else {
    716. 

  716.       // 新工具开始：直接翻入替换
    717. 

  717.       current.className = 'current-tool';
    718. 

  718.       const iconEl = current.querySelector('.mt-icon');
    719. 

  719.       iconEl.className = 'mt-icon spin-icon-sm';
    720. 

  720.       iconEl.textContent = '';
    721. 

  721.       current.querySelector('.mt-name').textContent = displayName;
    722. 

  722.       // 强制回流后启动翻入动画
    723. 

  723.       void current.offsetWidth;
    724. 

  724.       current.classList.add('flip-in');
    725. 

  725.     }
    726. 

  726. 

  727.     body.scrollTop = body.scrollHeight;
    728. 

  728.     scrollToBottom();
    729. 

  729.     toolLogs.push({ name: displayName, status, time: new Date().toLocaleTimeString() });
    730. 

  730.     updateDetailPanel();
    731. 

  731.     return;
    732. 

  732.   }
    733. 

  733. 

  734.   // ── 独立工具卡片（无 Agent 上下文，保留列表模式）──
    735. 

  735.   const bubble = getOrCreateAssistantMsg();
    736. 

  736.   const card = document.createElement('div');
    737. 

  737.   card.className = `tool-card ${status}`;
    738. 

  738.   if (status === 'done') {
    739. 

  739.     card.innerHTML = `<span class="tool-icon">✅</span>
    740. 

  740.       <span class="tool-name">${escHtml(displayName)}</span>
    741. 

  741.       <span class="tool-status">完成</span>`;
    742. 

  742.   } else {
    743. 

  743.     card.innerHTML = `<span class="tool-icon spin-icon-sm"></span>
    744. 

  744.       <span class="tool-name">${escHtml(displayName)}</span>
    745. 

  745.       <span class="tool-status">执行中...</span>`;
    746. 

  746.   }
    747. 

  747.   // 插入到 markdown 之前
    748. 

  748.   const md = bubble.querySelector('.msg-markdown');
    749. 

  749.   if (md) { bubble.insertBefore(card, md); }
    750. 

  750.   else { bubble.appendChild(card); }
    751. 

  751.   scrollToBottom();
    752. 

  752.   toolLogs.push({ name: displayName, status, time: new Date().toLocaleTimeString() });
    753. 

  753.   updateDetailPanel();
    754. 

  754. }
    755. 

  755. 

  756. // ── Agent Card: container for sub-agent tools + progress ──
    757. 

  757. let agentCards = {};
    758. 

  758. function addAgentCard(cnName, status, durationMs, progress) {
    759. 

  759.   const bubble = getOrCreateAssistantMsg();
    760. 

  760.   const key = cnName;
    761. 

  761. 

  762.   if (agentCards[key]) {
    763. 

  763.     const card = agentCards[key];
    764. 

  764.     card.className = `agent-card ${status}`;
    765. 

  765.     const iconEl = card.querySelector('.agent-icon');
    766. 

  766.     if (status === 'done') {
    767. 

  767.       iconEl.textContent = '✅';
    768. 

  768.     } else if (status === 'error') {
    769. 

  769.       iconEl.textContent = '❌';
    770. 

  770.     } else {
    771. 

  771.       iconEl.textContent = '';  // CSS spinner handles the running icon
    772. 

  772.     }
    773. 

  773.     const durText = durationMs ? ` (${(durationMs/1000).toFixed(1)}s)` : '';
    774. 

  774.     const progText = progress ? ` [${progress}]` : '';
    775. 

  775.     card.querySelector('.agent-status').textContent = status === 'done' ? `完成${durText}${progText}` : '运行中...';
    776. 

  776.   } else {
    777. 

  777.     const card = document.createElement('div');
    778. 

  778.     card.className = `agent-card ${status}`;
    779. 

  779.     card.innerHTML = `<div class="agent-header">
    780. 

  780.         <span class="agent-icon"></span>
    781. 

  781.         <span class="agent-name">${escHtml(cnName)}</span>
    782. 

  782.         <span class="agent-status">启动...</span>
    783. 

  783.       </div>
    784. 

  784.       <div class="agent-body"></div>`;
    785. 

  785.     // 插入到 markdown 文本容器之前，确保 Agent 卡片在 token 输出上方
    786. 

  786.     const md = bubble.querySelector('.msg-markdown');
    787. 

  787.     if (md) {
    788. 

  788.       bubble.insertBefore(card, md);
    789. 

  789.     } else {
    790. 

  790.       bubble.appendChild(card);
    791. 

  791.     }
    792. 

  792.     agentCards[key] = card;
    793. 

  793.   }
    794. 

  794.   scrollToBottom();
    795. 

  795. }
    796. 

  796. 

  797. // ── Add mini todos inside an agent card ──
    798. 

  798. function addAgentTodos(agentCn, todos) {
    799. 

  799.   if (!agentCn || !agentCards[agentCn]) return;
    800. 

  800.   const body = agentCards[agentCn].querySelector('.agent-body');
    801. 

  801.   if (!body) return;
    802. 

  802. 

  803.   // Remove old mini-todos
    804. 

  804.   body.querySelectorAll('.mini-todo').forEach(el => el.remove());
    805. 

  805. 

  806.   todos.forEach(t => {
    807. 

  807.     const cls = t.status === 'completed' ? 'completed' : t.status === 'in_progress' ? 'in_progress' : '';
    808. 

  808.     const mt = document.createElement('div');
    809. 

  809.     mt.className = `mini-todo ${cls}`;
    810. 

  810.     mt.innerHTML = `<span class="mt-check"></span><span class="mt-label">${escHtml(t.content || '')}</span>`;
    811. 

  811.     body.appendChild(mt);
    812. 

  812.   });
    813. 

  813.   // 确保工具翻页始终在最底部可见
    814. 

  814.   const flipper = body.querySelector('.tool-flipper');
    815. 

  815.   if (flipper) body.appendChild(flipper);
    816. 

  816.   body.scrollTop = body.scrollHeight;
    817. 

  817.   scrollToBottom();
    818. 

  818. }
    819. 

  819. 

  820. function addDuration(durationMs, cnAgent) {
    821. 

  821.   const bubble = getOrCreateAssistantMsg();
    822. 

  822.   const dur = document.createElement('div');
    823. 

  823.   dur.className = 'msg-duration';
    824. 

  824.   const sec = (durationMs / 1000).toFixed(1);
    825. 

  825.   const agentLabel = cnAgent ? ` · ${cnAgent}` : '';
    826. 

  826.   dur.innerHTML = `⏱️ ${sec}s${agentLabel}`;
    827. 

  827.   bubble.appendChild(dur);
    828. 

  828. }
    829. 

  829. 

  830. function updateTodoList(todos) {
    831. 

  831.   todoItems = todos || [];
    832. 

  832.   updateDetailPanel();
    833. 

  833. }
    834. 

  834. 

  835. function updateDetailPanel() {
    836. 

  836.   const el = document.getElementById('detail-content');
    837. 

  837.   let html = '';
    838. 

  838. 

  839.   if (todoItems.length) {
    840. 

  840.     html += '<div class="section"><div class="section-title">📝 任务进度</div>';
    841. 

  841.     todoItems.forEach(t => {
    842. 

  842.       const cls = t.status === 'completed' ? 'completed' : t.status === 'in_progress' ? 'in_progress' : '';
    843. 

  843.       html += `<div class="todo-item ${cls}">
    844. 

  844.         <span class="todo-check"></span>
    845. 

  845.         <span class="todo-label">${escHtml(t.content || '')}</span>
    846. 

  846.       </div>`;
    847. 

  847.     });
    848. 

  848.     html += '</div>';
    849. 

  849.   }
    850. 

  850. 

  851.   if (toolLogs.length) {
    852. 

  852.     html += '<div class="section"><div class="section-title">🔧 工具调用</div>';
    853. 

  853.     toolLogs.slice(-20).reverse().forEach(t => {
    854. 

  854.       html += `<div class="tool-log-item">
    855. 

  855.         <span class="tl-icon">${t.status === 'done' ? '✅' : '⏳'}</span>
    856. 

  856.         <span class="tl-name">${escHtml(t.name)}</span>
    857. 

  857.       </div>`;
    858. 

  858.     });
    859. 

  859.     html += '</div>';
    860. 

  860.   }
    861. 

  861. 

  862.   if (!html) {
    863. 

  863.     html = '<div style="color:var(--text-muted);font-size:12px;text-align:center;margin-top:40px;">暂无任务数据</div>';
    864. 

  864.   }
    865. 

  865. 

  866.   el.innerHTML = html;
    867. 

  867. }
    868. 

  868. 

  869. function setStatus(text) {
    870. 

  870.   document.getElementById('status-bar').innerHTML = `
    871. 

  871.     <span class="spinner"></span><span>${escHtml(text)}</span>`;
    872. 

  872. }
    873. 

  873. 

  874. function clearStatus() {
    875. 

  875.   document.getElementById('status-bar').innerHTML = '';
    876. 

  876. }
    877. 

  877. 

  878. // ============================================================
    879. 

  879. // Markdown Rendering (simple built-in, no CDN dependency)
    880. 

  880. // ============================================================
    881. 

  881. function renderMarkdown(text) {
    882. 

  882.   if (!text) return '';
    883. 

  883.   let html = text;
    884. 

  884. 

  885.   // Escape HTML
    886. 

  886.   html = html.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
    887. 

  887. 

  888.   // Code blocks (```...```)
    889. 

  889.   html = html.replace(/```(\w*)\n([\s\S]*?)```/g, (_, lang, code) =>
    890. 

  890.     `<pre><code class="language-${lang}">${code.trim()}</code></pre>`);
    891. 

  891. 

  892.   // Inline code (`...`)
    893. 

  893.   html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
    894. 

  894. 

  895.   // Bold (**...**)
    896. 

  896.   html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
    897. 

  897. 

  898.   // Headers (longest first to avoid partial matches)
    899. 

  899.   html = html.replace(/^###### (.+)$/gm, '<h6>$1</h6>');
    900. 

  900.   html = html.replace(/^##### (.+)$/gm, '<h5>$1</h5>');
    901. 

  901.   html = html.replace(/^#### (.+)$/gm, '<h4>$1</h4>');
    902. 

  902.   html = html.replace(/^### (.+)$/gm, '<h3>$1</h3>');
    903. 

  903.   html = html.replace(/^## (.+)$/gm, '<h2>$1</h2>');
    904. 

  904.   html = html.replace(/^# (.+)$/gm, '<h1>$1</h1>');
    905. 

  905. 

  906.   // Blockquote
    907. 

  907.   html = html.replace(/^&gt; (.+)$/gm, '<blockquote>$1</blockquote>');
    908. 

  908. 

  909.   // Unordered lists
    910. 

  910.   html = html.replace(/^[\-\*] (.+)$/gm, '<li>$1</li>');
    911. 

  911.   html = html.replace(/(<li>.*<\/li>\n?)+/g, '<ul>$&</ul>');
    912. 

  912. 

  913.   // Ordered lists
    914. 

  914.   html = html.replace(/^\d+\. (.+)$/gm, '<li>$1</li>');
    915. 

  915. 

  916.   // Tables
    917. 

  917.   html = html.replace(/^\|(.+)\|$/gm, (line) => {
    918. 

  918.     const cells = line.split('|').filter(c => c.trim());
    919. 

  919.     const isHeader = /^[\-\s:]+$/.test(cells.join(''));
    920. 

  920.     if (isHeader) return '';
    921. 

  921.     const tag = line.match(/^\|[\s\-:]+\|$/) ? '' : (line.includes('---') ? '' : '');
    922. 

  922.     return '<tr>' + cells.map(c => {
    923. 

  923.       const t = isHeader ? 'th' : 'td';
    924. 

  924.       return `<${t}>${c.trim()}</${t}>`;
    925. 

  925.     }).join('') + '</tr>';
    926. 

  926.   });
    927. 

  927.   html = html.replace(/(<tr>.*<\/tr>\n?)+/g, '<table>$&</table>');
    928. 

  928. 

  929.   // Horizontal rules
    930. 

  930.   html = html.replace(/^---$/gm, '<hr>');
    931. 

  931. 

  932.   // Paragraphs (double newline)
    933. 

  933.   const parts = html.split(/\n\n+/);
    934. 

  934.   html = parts.map(p => {
    935. 

  935.     p = p.trim();
    936. 

  936.     if (!p) return '';
    937. 

  937.     if (p.startsWith('<h') || p.startsWith('<pre') || p.startsWith('<table')
    938. 

  938.         || p.startsWith('<ul') || p.startsWith('<blockquote') || p.startsWith('<hr')) return p;
    939. 

  939.     return `<p>${p.replace(/\n/g, '<br>')}</p>`;
    940. 

  940.   }).join('\n');
    941. 

  941. 

  942.   return html;
    943. 

  943. }
    944. 

  944. 

  945. // ============================================================
    946. 

  946. // SSE Streaming
    947. 

  947. // ============================================================
    948. 

  948. async function sendMessage() {
    949. 

  949.   const input = document.getElementById('input');
    950. 

  950.   const message = input.value.trim();
    951. 

  951.   const fileInput = document.getElementById('file-input');
    952. 

  952.   const file = fileInput.files[0];
    953. 

  953.   if (!message && !file) return;
    954. 

  954. 

  955.   // Abort previous stream
    956. 

  956.   abortStream();
    957. 

  957. 

  958.   // Reset state
    959. 

  959.   todoItems = [];
    960. 

  960.   toolLogs = [];
    961. 

  961.   activeThinkBlock = null;
    962. 

  962.   agentCards = {};
    963. 

  963.   pendingDownloadUrl = null;
    964. 

  964.   updateDetailPanel();
    965. 

  965. 

  966.   // Build FormData
    967. 

  967.   const fd = new FormData();
    968. 

  968.   fd.append('message', message || (file ? '请审查这份文件' : ''));
    969. 

  969.   if (currentSessionId) fd.append('session_id', currentSessionId);
    970. 

  970.   if (file) {
    971. 

  971.     fd.append('file', file);
    972. 

  972.     document.getElementById('btn-attach').classList.add('has-file');
    973. 

  973.   }
    974. 

  974. 

  975.   // Add user message to UI
    976. 

  976.   if (message) addMessage('user', message);
    977. 

  977.   if (file) {
    978. 

  978.     addMessage('user', `📎 上传文件: ${file.name}\n${message || '请审查这份文件'}`);
    979. 

  979.   }
    980. 

  980. 

  981.   // Clear input
    982. 

  982.   input.value = '';
    983. 

  983.   fileInput.value = '';
    984. 

  984.   document.getElementById('btn-attach').classList.remove('has-file');
    985. 

  985.   input.style.height = 'auto';
    986. 

  986. 

  987.   // UI state
    988. 

  988.   setStatus('正在分析...');
    989. 

  989.   document.getElementById('status-dot').classList.add('streaming');
    990. 

  990.   document.getElementById('btn-send').disabled = true;
    991. 

  991. 

  992.   currentAbortController = new AbortController();
    993. 

  993. 

  994.   try {
    995. 

  995.     const res = await fetch(`${API}/chat`, {
    996. 

  996.       method: 'POST',
    997. 

  997.       body: fd,
    998. 

  998.       signal: currentAbortController.signal,
    999. 

  999.     });
    1000. 

  1000. 

  1001.     if (!res.ok) {
    1002. 

  1002.       const errText = await res.text();
    1003. 

  1003.       throw new Error(`HTTP ${res.status}: ${errText}`);
    1004. 

  1004.     }
    1005. 

  1005. 

  1006.     // Get session_id from header
    1007. 

  1007.     const sid = res.headers.get('X-Session-Id');
    1008. 

  1008.     if (sid && sid !== currentSessionId) {
    1009. 

  1009.       currentSessionId = sid;
    1010. 

  1010.       localStorage.setItem('vent_session_id', sid);
    1011. 

  1011.       loadSessions();
    1012. 

  1012.     }
    1013. 

  1013. 

  1014.     // Stream reader
    1015. 

  1015.     const reader = res.body.getReader();
    1016. 

  1016.     const decoder = new TextDecoder();
    1017. 

  1017.     let buffer = '';
    1018. 

  1018.     let assistantContent = '';
    1019. 

  1019. 

  1020.     while (true) {
    1021. 

  1021.       const { done, value } = await reader.read();
    1022. 

  1022.       if (done) break;
    1023. 

  1023.       buffer += decoder.decode(value, { stream: true });
    1024. 

  1024. 

  1025.       // Process complete SSE events
    1026. 

  1026.       const lines = buffer.split('\n');
    1027. 

  1027.       buffer = lines.pop() || ''; // keep incomplete line in buffer
    1028. 

  1028. 

  1029.       for (const line of lines) {
    1030. 

  1030.         if (!line.startsWith('data: ')) continue;
    1031. 

  1031.         const json = line.slice(6);
    1032. 

  1032.         try {
    1033. 

  1033.           const event = JSON.parse(json);
    1034. 

  1034.           handleSSEEvent(event);
    1035. 

  1035.           if (event.type === 'token' && event.content) {
    1036. 

  1036.             assistantContent += event.content;
    1037. 

  1037.           }
    1038. 

  1038.         } catch(e) {
    1039. 

  1039.           // Skip malformed JSON
    1040. 

  1040.         }
    1041. 

  1041.       }
    1042. 

  1042.     }
    1043. 

  1043. 

  1044.     // Finalize
    1045. 

  1045.     if (assistantContent && !currentSessionId) {
    1046. 

  1046.       // Session was created server-side
    1047. 

  1047.       loadSessions();
    1048. 

  1048.     }
    1049. 

  1049. 

  1050.   } catch(e) {
    1051. 

  1051.     if (e.name !== 'AbortError') {
    1052. 

  1052.       showToast(`请求失败: ${e.message}`, 'error');
    1053. 

  1053.       console.error(e);
    1054. 

  1054.     }
    1055. 

  1055.   } finally {
    1056. 

  1056.     document.getElementById('status-dot').classList.remove('streaming');
    1057. 

  1057.     document.getElementById('btn-send').disabled = false;
    1058. 

  1058.     clearStatus();
    1059. 

  1059.     currentAbortController = null;
    1060. 

  1060.   }
    1061. 

  1061. }
    1062. 

  1062. 

  1063. function handleSSEEvent(event) {
    1064. 

  1064.   switch(event.type) {
    1065. 

  1065.     case 'thinking':
    1066. 

  1066.     case 'agent_thinking':
    1067. 

  1067.       setStatus(event.cn_agent ? `${event.cn_agent}：分析中...` : (event.message || '正在分析...'));
    1068. 

  1068.       break;
    1069. 

  1069. 

  1070.     case 'thinking_token':
    1071. 

  1071.     case 'agent_thinking_token':
    1072. 

  1072.       if (event.content) appendThinking(event.content);
    1073. 

  1073.       break;
    1074. 

  1074. 

  1075.     case 'executing':
    1076. 

  1076.     case 'agent_executing':
    1077. 

  1077.       {
    1078. 

  1078.         const label = event.cn_agent ? `${event.cn_agent}：${event.message}` : event.message;
    1079. 

  1079.         setStatus(label || '正在执行工具...');
    1080. 

  1080.         if (event.tools && event.tools.length > 0) {
    1081. 

  1081.           const cnTools = event.cn_tools || event.tools;
    1082. 

  1082.           // 翻页模式：仅展示最后一条（最新执行的工具）
    1083. 

  1083.           const lastIdx = event.tools.length - 1;
    1084. 

  1084.           addToolCard(event.tools[lastIdx], cnTools[lastIdx], 'pending', event.cn_agent);
    1085. 

  1085.         }
    1086. 

  1086.       }
    1087. 

  1087.       break;
    1088. 

  1088. 

  1089.     case 'tool_call':
    1090. 

  1090.       addToolCard(event.tool, event.cn_tool, 'pending', event.cn_agent);
    1091. 

  1091.       break;
    1092. 

  1092. 

  1093.     case 'tool_result':
    1094. 

  1094.     case 'agent_tool_result':
    1095. 

  1095.       addToolCard(event.tool || '工具', event.cn_tool, 'done', event.cn_agent);
    1096. 

  1096.       break;
    1097. 

  1097. 

  1098.     case 'token':
    1099. 

  1099.       if (event.content) appendToken(event.content);
    1100. 

  1100.       break;
    1101. 

  1101. 

  1102.     case 'updated_todo_list':
    1103. 

  1103.     case 'agent_todos':
    1104. 

  1104.       if (event.todos) {
    1105. 

  1105.         // If agent context, show mini todos inside agent card
    1106. 

  1106.         if (event.cn_agent) {
    1107. 

  1107.           addAgentTodos(event.cn_agent, event.todos);
    1108. 

  1108.         }
    1109. 

  1109.         updateTodoList(event.todos);
    1110. 

  1110.       }
    1111. 

  1111.       break;
    1112. 

  1112. 

  1113. 	    case 'progress':
    1114. 

  1114. 	      setStatus(event.message || '处理中...');
    1115. 

  1115. 	      if (event.download_url) {
    1116. 

  1116. 	        pendingDownloadUrl = event.download_url;
    1117. 

  1117. 	        // Immediately show the download button
    1118. 

  1118. 	        const bubble = getOrCreateAssistantMsg();
    1119. 

  1119. 	        // Remove any previous download button
    1120. 

  1120. 	        bubble.querySelectorAll('.download-btn').forEach(el => el.remove());
    1121. 

  1121. 	        bubble.appendChild(createDownloadBtn(event.download_url));
    1122. 

  1122. 	      }
    1123. 

  1123. 	      break;
    1124. 

  1124. 

  1125.     case 'agent_start':
    1126. 

  1126.       {
    1127. 

  1127.         // 在聊天区显示子智能体启动卡片（体现并行感）
    1128. 

  1128.         const cn = event.cn_agent || event.agent;
    1129. 

  1129.         addAgentCard(cn, 'running');
    1130. 

  1130.         setStatus(`${cn} 启动...`);
    1131. 

  1131.       }
    1132. 

  1132.       break;
    1133. 

  1133. 

  1134.     case 'agent_done':
    1135. 

  1135.       {
    1136. 

  1136.         const cn = event.cn_agent || event.agent;
    1137. 

  1137.         addAgentCard(cn, 'done', event.duration_ms, event.progress);
    1138. 

  1138.         setStatus(`✅ ${cn} 完成 (${event.progress || ''})`);
    1139. 

  1139.         // Agent 结束 → 无论工具处于什么状态，一律翻出清理
    1140. 

  1140.         if (agentCards[cn]) {
    1141. 

  1141.           const flipper = agentCards[cn].querySelector('.tool-flipper');
    1142. 

  1142.           if (flipper) {
    1143. 

  1143.             const ct = flipper.querySelector('.current-tool');
    1144. 

  1144.             if (ct) {
    1145. 

  1145.               if (ct._fadeTimer) { clearTimeout(ct._fadeTimer); ct._fadeTimer = null; }
    1146. 

  1146.               ct.getAnimations().forEach(a => a.cancel());
    1147. 

  1147.               ct.style.transform = '';
    1148. 

  1148.               ct.style.opacity = '';
    1149. 

  1149.               ct.className = 'current-tool flip-out';
    1150. 

  1150.             }
    1151. 

  1151.           }
    1152. 

  1152.         }
    1153. 

  1153.       }
    1154. 

  1154.       break;
    1155. 

  1155. 

  1156.     case 'agent_error':
    1157. 

  1157.       showToast(event.message || '子智能体出错', 'error');
    1158. 

  1158.       break;
    1159. 

  1159. 

  1160.     case 'done':
    1161. 

  1161.       clearStatus();
    1162. 

  1162.       if (event.duration_ms) {
    1163. 

  1163.         addDuration(event.duration_ms, '');
    1164. 

  1164.       }
    1165. 

  1165.       if (event.download_url) {
    1166. 

  1166.         pendingDownloadUrl = event.download_url;
    1167. 

  1167.       }
    1168. 

  1168.       // 最终渲染 markdown（仅更新 .msg-markdown，保留 Agent 卡片和工具卡片）
    1169. 

  1169.       {
    1170. 

  1170.         const bubble = getOrCreateAssistantMsg();
    1171. 

  1171.         if (bubble) {
    1172. 

  1172.           const md = bubble.querySelector('.msg-markdown');
    1173. 

  1173.           if (md) {
    1174. 

  1174.             const raw = md.getAttribute('data-raw');
    1175. 

  1175.             if (raw) {
    1176. 

  1176.               md.innerHTML = renderMarkdown(raw);
    1177. 

  1177.               md.removeAttribute('data-raw');
    1178. 

  1178.             }
    1179. 

  1179.           }
    1180. 

  1180.           // 兜底清理：所有 Agent 卡内残留的工具翻页
    1181. 

  1181.           bubble.querySelectorAll('.tool-flipper .current-tool').forEach(ct => {
    1182. 

  1182.             if (ct._fadeTimer) { clearTimeout(ct._fadeTimer); ct._fadeTimer = null; }
    1183. 

  1183.             ct.getAnimations().forEach(a => a.cancel());
    1184. 

  1184.             ct.style.transform = '';
    1185. 

  1185.             ct.style.opacity = '';
    1186. 

  1186.             ct.className = 'current-tool flip-out';
    1187. 

  1187.           });
    1188. 

  1188.           if (pendingDownloadUrl) {
    1189. 

  1189.             bubble.querySelectorAll('.download-btn').forEach(el => el.remove());
    1190. 

  1190.             bubble.appendChild(createDownloadBtn(pendingDownloadUrl));
    1191. 

  1191.           }
    1192. 

  1192.         }
    1193. 

  1193.       }
    1194. 

  1194.       activeThinkBlock = null;
    1195. 

  1195.       loadSessions();
    1196. 

  1196.       break;
    1197. 

  1197. 

  1198.     case 'error':
    1199. 

  1199.       showToast(event.message || '出错了', 'error');
    1200. 

  1200.       clearStatus();
    1201. 

  1201.       break;
    1202. 

  1202. 

  1203.     case 'generating':
    1204. 

  1204.       setStatus('正在生成报告...');
    1205. 

  1205.       break;
    1206. 

  1206.   }
    1207. 

  1207. }
    1208. 

  1208. 

  1209. function abortStream() {
    1210. 

  1210.   if (currentAbortController) {
    1211. 

  1211.     currentAbortController.abort();
    1212. 

  1212.     currentAbortController = null;
    1213. 

  1213.   }
    1214. 

  1214.   document.getElementById('status-dot').classList.remove('streaming');
    1215. 

  1215.   document.getElementById('btn-send').disabled = false;
    1216. 

  1216.   clearStatus();
    1217. 

  1217. }
    1218. 

  1218. 

  1219. // ============================================================
    1220. 

  1220. // Helpers
    1221. 

  1221. // ============================================================
    1222. 

  1222. function escHtml(s) {
    1223. 

  1223.   if (!s) return '';
    1224. 

  1224.   return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
    1225. 

  1225. }
    1226. 

  1226. 

  1227. function scrollToBottom() {
    1228. 

  1228.   requestAnimationFrame(() => {
    1229. 

  1229.     const msgs = document.getElementById('messages');
    1230. 

  1230.     msgs.scrollTop = msgs.scrollHeight;
    1231. 

  1231.   });
    1232. 

  1232. }
    1233. 

  1233. 

  1234. function onInputKey(e) {
    1235. 

  1235.   if (e.key === 'Enter' && !e.shiftKey) {
    1236. 

  1236.     e.preventDefault();
    1237. 

  1237.     sendMessage();
    1238. 

  1238.   }
    1239. 

  1239. }
    1240. 

  1240. 

  1241. function onFileSelected(input) {
    1242. 

  1242.   const btn = document.getElementById('btn-attach');
    1243. 

  1243.   if (input.files.length) {
    1244. 

  1244.     btn.classList.add('has-file');
    1245. 

  1245.     btn.title = input.files[0].name;
    1246. 

  1246.   } else {
    1247. 

  1247.     btn.classList.remove('has-file');
    1248. 

  1248.     btn.title = '上传附件';
    1249. 

  1249.   }
    1250. 

  1250. }
    1251. 

  1251. 

  1252. function showToast(msg, type) {
    1253. 

  1253.   const container = document.getElementById('toast-container');
    1254. 

  1254.   const el = document.createElement('div');
    1255. 

  1255.   el.className = `toast ${type}`;
    1256. 

  1256.   el.textContent = msg;
    1257. 

  1257.   container.appendChild(el);
    1258. 

  1258.   setTimeout(() => { el.remove(); }, 4000);
    1259. 

  1259. }
    1260. 

  1260. 

  1261. function createDownloadBtn(url) {
    1262. 

  1262.   const btn = document.createElement('a');
    1263. 

  1263.   btn.className = 'download-btn';
    1264. 

  1264.   btn.href = url;
    1265. 

  1265.   btn.target = '_blank';
    1266. 

  1266.   btn.rel = 'noopener';
    1267. 

  1267.   btn.innerHTML = '<span class="dl-icon">📥</span> 下载审查报告 (Word)';
    1268. 

  1268.   return btn;
    1269. 

  1269. }
    1270. 

  1270. 

  1271. // Auto-resize textarea
    1272. 

  1272. document.addEventListener('DOMContentLoaded', () => {
    1273. 

  1273.   const input = document.getElementById('input');
    1274. 

  1274.   input.addEventListener('input', () => {
    1275. 

  1275.     input.style.height = 'auto';
    1276. 

  1276.     input.style.height = Math.min(input.scrollHeight, 150) + 'px';
    1277. 

  1277.   });
    1278. 

  1278. });
    1279. 

  1279. </script>
    1280. 

  1280. </body>
    1281. 

  1281. </html>
    1282.