@mixd-id/web-scaffold 0.2.250801012 → 0.2.250801014

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.2.250801012",
+  "version": "0.2.250801014",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",
@@ -14,85 +14,61 @@
     "./components/*": "./src/components/*",
     "./widgets/*": "./src/widgets/*",
     "./mixin/component": "./src/mixin/component.js",
-    "./mixin/edit-mode": "./src/mixin/edit-mode.js",
-    "./middleware/http/trim-string": "./src/middleware/http/trim-string.js",
     "./helpers": {
       "require": "./src/utils/helpers.js",
       "import": "./src/utils/helpers.mjs"
     },
     "./helpers.js": "./src/utils/helpers.js",
     "./helpers.mjs": "./src/utils/helpers.mjs",
-    "./queue": "./src/utils/queue.js",
     "./wss": {
       "require": "./src/utils/wss.js",
       "import": "./src/utils/wss.mjs"
     },
     "./wss.js": "./src/utils/wss.js",
     "./wss.mjs": "./src/utils/wss.mjs",
-    "./importer": "./src/utils/importer.js",
-    "./listpage1": "./src/utils/listpage1.js",
     "./dashboard": "./src/utils/dashboard.js",
-    "./listview": "./src/utils/listview.js",
+    "./ai-dashboard": "./src/utils/ai-dashboard.js",
+    "./ai-dashboard-chat": "./src/utils/ai-dashboard-chat.mjs",
+    "./ai-chat": "./src/utils/ai-chat.js",
+    "./ai-chat-answer": "./src/utils/ai-chat-answer.mjs",
+    "./ai-list-chat": "./src/utils/ai-list-chat.mjs",
     "./preset-selector": {
-      "require": "./src/utils/preset-selector.cjs",
       "import": "./src/utils/preset-selector.mjs"
     },
     "./hooks/*": "./src/hooks/*",
-    "./preset-selector.cjs": "./src/utils/preset-selector.cjs",
-    "./preset-selector.js": "./src/utils/preset-selector.js",
     "./preset-selector.mjs": "./src/utils/preset-selector.mjs",
     "./list": {
       "import": "./src/utils/list.mjs"
     },
     "./list.mjs": "./src/utils/list.mjs",
-    "./web": {
-      "require": "./src/utils/web.js",
-      "import": "./src/utils/web.mjs"
-    },
-    "./docs/components/404": "./docs/components/404.md",
     "./docs/components/AccountIcon": "./docs/components/AccountIcon.md",
     "./docs/components/Ahref": "./docs/components/Ahref.md",
     "./docs/components/Alert": "./docs/components/Alert.md",
-    "./docs/components/ArrayList": "./docs/components/ArrayList.md",
     "./docs/components/Article": "./docs/components/Article.md",
     "./docs/components/Block": "./docs/components/Block.md",
-    "./docs/components/Box": "./docs/components/Box.md",
     "./docs/components/Button": "./docs/components/Button.md",
     "./docs/components/Card": "./docs/components/Card.md",
     "./docs/components/Carousel": "./docs/components/Carousel.md",
     "./docs/components/Cart": "./docs/components/Cart.md",
     "./docs/components/CartIcon": "./docs/components/CartIcon.md",
     "./docs/components/Chart": "./docs/components/Chart.md",
-    "./docs/components/ChartBar": "./docs/components/ChartBar.md",
     "./docs/components/ChatTyping": "./docs/components/ChatTyping.md",
     "./docs/components/Checkbox": "./docs/components/Checkbox.md",
-    "./docs/components/Checkout": "./docs/components/Checkout.md",
-    "./docs/components/CheckoutDelivery": "./docs/components/CheckoutDelivery.md",
     "./docs/components/CodeEditor": "./docs/components/CodeEditor.md",
     "./docs/components/CollapsiblePanel": "./docs/components/CollapsiblePanel.md",
     "./docs/components/ColorPicker": "./docs/components/ColorPicker.md",
-    "./docs/components/ColorPicker2": "./docs/components/ColorPicker2.md",
-    "./docs/components/ColorPicker3": "./docs/components/ColorPicker3.md",
     "./docs/components/Confirm": "./docs/components/Confirm.md",
     "./docs/components/ContextMenu": "./docs/components/ContextMenu.md",
     "./docs/components/ContextMenuItem": "./docs/components/ContextMenuItem.md",
     "./docs/components/CopyToClipboard": "./docs/components/CopyToClipboard.md",
     "./docs/components/Countdown": "./docs/components/Countdown.md",
-    "./docs/components/DataList": "./docs/components/DataList.md",
     "./docs/components/Datepicker": "./docs/components/Datepicker.md",
     "./docs/components/Datetimepicker": "./docs/components/Datetimepicker.md",
-    "./docs/components/DayTimeRange": "./docs/components/DayTimeRange.md",
     "./docs/components/Dropdown": "./docs/components/Dropdown.md",
-    "./docs/components/ErrorText": "./docs/components/ErrorText.md",
-    "./docs/components/FBLogin": "./docs/components/FBLogin.md",
     "./docs/components/Flex": "./docs/components/Flex.md",
-    "./docs/components/GHeatMaps": "./docs/components/GHeatMaps.md",
     "./docs/components/Gmaps": "./docs/components/Gmaps.md",
-    "./docs/components/GmapsDirection": "./docs/components/GmapsDirection.md",
     "./docs/components/Grid": "./docs/components/Grid.md",
-    "./docs/components/GSignIn": "./docs/components/GSignIn.md",
     "./docs/components/HTMLEditor": "./docs/components/HTMLEditor.md",
-    "./docs/components/IconMenu": "./docs/components/IconMenu.md",
     "./docs/components/Image": "./docs/components/Image.md",
     "./docs/components/Link": "./docs/components/Link.md",
     "./docs/components/MultiDropdown": "./docs/components/MultiDropdown.md",
@@ -125,6 +101,7 @@
     "exceljs": "^4.3.0",
     "file-type": "^18.2.1",
     "glob": "^8.0.3",
+    "highlight.js": "^11.11.1",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "marked": "^16.4.1",
@@ -154,6 +131,7 @@
   "author": "mixd.id",
   "license": "ISC",
   "files": [
+    "src",
     "docs/components"
   ],
   "bugs": {

package/src/components/AIChat.vue

@@ -0,0 +1,479 @@
+<template>
+  <div class="flex h-full w-full overflow-hidden">
+
+    <!-- Mobile drawer backdrop -->
+    <div v-if="showSidebar && !isDesktop" class="fixed inset-0 z-20 bg-black/40 md:hidden" @click="showSidebar = false" />
+
+    <!-- Left panel: sessions -->
+    <div class="relative shrink-0 flex flex-col bg-base-300 border-r-[1px] border-border-50
+                fixed inset-y-0 left-0 z-30 max-md:w-[280px] transition-transform
+                md:static md:z-auto md:transition-none"
+         :class="(showSidebar || isDesktop) ? 'translate-x-0' : '-translate-x-full'"
+         :style="isDesktop ? { width: leftWidth + 'px' } : null">
+
+      <div class="p-3 pb-0">
+        <button type="button"
+                class="w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg bg-base-500 hover:bg-base-200 transition-colors"
+                @click="newSession">
+          <svg width="13" height="13" class="fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"/></svg>
+          New Chat
+        </button>
+      </div>
+
+      <div class="flex-1 overflow-y-auto p-3 flex flex-col gap-1">
+        <div v-for="s in sessions" :key="s.uid"
+             class="group flex items-center gap-2 px-3 py-2 rounded-lg cursor-pointer transition-colors"
+             :class="s.uid === activeUid ? 'bg-base-500' : 'hover:bg-base-400'"
+             @click="selectSession(s.uid)">
+          <span class="flex-1 truncate">{{ s.name || 'New Chat' }}</span>
+          <button type="button"
+                  class="shrink-0 opacity-0 group-hover:opacity-100 transition-opacity"
+                  @click.stop="removeSession(s.uid)">
+            <svg width="11" height="11" class="fill-text-300 hover:fill-red-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg>
+          </button>
+        </div>
+      </div>
+
+      <!-- Resize handle (desktop only) -->
+      <div v-if="isDesktop" :class="$style.resize1" @mousedown="(e) => $util.dragResize(e, resizeLeft)" />
+    </div>
+
+    <!-- Main: chat -->
+    <div class="flex-1 flex flex-col min-w-0 bg-base-400">
+
+      <!-- Header -->
+      <div class="flex items-center gap-3 px-4 md:px-6 py-3 border-b-[1px] border-border-50 ">
+        <button type="button" class="md:hidden p-1" @click="showSidebar = true">
+          <svg width="18" height="18" class="fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/></svg>
+        </button>
+        <h3 class="flex-1 truncate md:text-lg">{{ activeSession?.name || 'New Chat' }}</h3>
+      </div>
+
+      <!-- Messages (flex-col-reverse keeps view pinned to the latest message) -->
+      <div ref="scroller" class="flex-1 overflow-y-auto flex flex-col-reverse">
+        <div class="w-full max-w-[780px] mx-auto px-4 md:px-6 py-6 flex flex-col gap-6">
+
+          <!-- Empty state with sample prompts -->
+          <div v-if="!messages.length" class="flex-1 flex flex-col items-center justify-center text-center py-16 gap-5">
+            <svg width="40" height="40" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 448c141.4 0 256-93.1 256-208S397.4 32 256 32S0 125.1 0 240c0 45.1 17.7 86.8 47.7 120.9c-1.9 24.5-11.4 46.3-21.4 62.9c-5.5 9.2-11.1 16.6-15.2 21.6c-2.1 2.5-3.7 4.4-4.9 5.7c-.6 .6-1 1.1-1.3 1.4l-.3 .3c-4.6 4.6-5.9 11.4-3.4 17.4c2.5 6 8.3 9.9 14.8 9.9c28.7 0 57.6-8.9 81.6-19.3c22.9-10 42.4-21.9 54.3-30.6c31.8 11.5 67 17.9 104.1 17.9z"/></svg>
+            <p class="text-text-300 text-lg">How can I help you today?</p>
+            <div class="flex flex-wrap gap-2 justify-center max-w-md">
+              <button v-for="(p, n) in samplePrompts" :key="n" type="button"
+                      class="px-4 py-2 rounded-full bg-base-300 hover:bg-base-500 transition-colors text-sm"
+                      @click="send(p)">
+                {{ p }}
+              </button>
+            </div>
+          </div>
+
+          <!-- Message list -->
+          <AIChatItem v-for="(message, i) in messages" :key="i" :message="message" />
+
+        </div>
+      </div>
+
+      <!-- Composer -->
+      <div class="w-full max-w-[780px] mx-auto px-4 md:px-6 pb-4 md:pb-6 pt-2">
+        <AIChatTextbox :sending="sending" @send="send" @cancel="cancel" />
+        <p class="text-center text-[11px] text-text-300 mt-2 hidden md:block">Press Enter to send · Shift+Enter for newline</p>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import AIChatItem from './AIChatItem.vue'
+import AIChatTextbox from './AIChatTextbox.vue'
+
+// AIChat mirrors the UserConfig model (UserConfig hasMany UserPreset):
+//   config.params            — UI state (leftWidth, sessionUid)
+//   config.presets[]         — chat sessions: { uid, name, params }
+//   config.presets[].params  — { messages: [{ direction, body, attachments?, model?, ellapsed? }] }
+//
+// It runs in two modes (same convention as AIDashboard):
+//   • Offline — no `socket`/`controller` (or `server-chat` off): assistant
+//     replies are canned samples that "stream" in locally to show off each
+//     supported message type. Demo sessions are seeded on first run.
+//   • Connected — `socket` + `controller` given: mirrors the server AIChat
+//     mixin. `${controller}.ai-chat` receives { messages } and returns
+//     { body, attachments?, model? }; `${controller}.save` persists the whole
+//     config (debounced, when `auto-save` is on) and `${controller}.remove-preset`
+//     drops a deleted session. Turn `auto-save` off when the host page owns
+//     persistence (e.g. via useConfig) to avoid a double write.
+const { controller, socket, config, autoSave, serverChat, samplePrompts } = defineProps({
+  controller: { type: String, default: '' },
+  socket: { type: Object, default: null },
+  config: { type: Object, default: () => ({ params: {} }) },
+  autoSave: { type: Boolean, default: true },
+  serverChat: { type: Boolean, default: true },
+  samplePrompts: {
+    type: Array,
+    default: () => [ 'Show me markdown', 'Write some code', 'Send me an image', 'Share a file' ],
+  },
+})
+
+const connected = computed(() => !!(socket && controller))
+const useServerChat = computed(() => connected.value && serverChat)
+
+/* ---------- Persisted state (UserConfig shape) ---------- */
+if (!config.params) config.params = {}
+if (config.params.leftWidth == null) config.params.leftWidth = 260
+if (!Array.isArray(config.presets)) config.presets = []
+
+const leftWidth = computed(() => config.params.leftWidth)
+
+function resizeLeft(w) {
+  const next = config.params.leftWidth + w
+  if (next >= 200 && next <= 480) config.params.leftWidth = next
+}
+
+/* ---------- Responsive ---------- */
+const isDesktop = ref(true)
+const showSidebar = ref(false)
+let mq = null
+function onMq(e) { isDesktop.value = e.matches }
+
+/* ---------- Sessions (UserPreset shape) ---------- */
+let seq = 0
+function uid(prefix = 's') {
+  return `${prefix}-${Date.now().toString(36)}-${seq++}`
+}
+
+function newSessionObj(name = '') {
+  return { uid: uid(), name, params: { messages: [] } }
+}
+
+function normalizeSession(session) {
+  if (!session.uid) session.uid = uid()
+  if (!session.params || typeof session.params !== 'object') session.params = {}
+  if (!Array.isArray(session.params.messages)) session.params.messages = []
+  // a reload can leave a message stuck mid-stream — freeze it
+  for (const m of session.params.messages) {
+    if (m.isLoading) {
+      m.isLoading = false
+      m.body = m.display || m.body || 'Cancelled.'
+      m.display = m.body
+    }
+  }
+  return session
+}
+
+config.presets.forEach(normalizeSession)
+
+const sessions = computed(() => config.presets)
+const activeUid = computed(() => config.params.sessionUid)
+const activeSession = computed(() => config.presets.find(s => s.uid === activeUid.value) ?? null)
+const messages = computed(() => activeSession.value?.params.messages ?? [])
+
+function selectSession(sessionUid) {
+  config.params.sessionUid = sessionUid
+  showSidebar.value = false
+}
+
+function newSession() {
+  // Reuse an existing empty session rather than piling up blanks.
+  const blank = config.presets.find(s => !s.params.messages.length)
+  const target = blank ?? newSessionObj()
+  if (!blank) config.presets.unshift(target)
+  selectSession(target.uid)
+  persist()
+}
+
+function removeSession(sessionUid) {
+  const i = config.presets.findIndex(s => s.uid === sessionUid)
+  if (i === -1) return
+  config.presets.splice(i, 1)
+  if (!config.presets.length) config.presets.push(newSessionObj())
+  if (activeUid.value === sessionUid) config.params.sessionUid = config.presets[0].uid
+  if (connected.value) socket.send(`${controller}.remove-preset`, { uid: sessionUid }).catch(() => {})
+  persist()
+}
+
+/* ---------- Server: persist ---------- */
+// Strip ephemeral streaming fields; only the finished transcript is saved.
+function cleanMessage(m) {
+  const { display, isLoading, streamDone, pendingAttachments, ...rest } = m
+  return { ...rest, body: m.body ?? m.display ?? '' }
+}
+
+function cleanConfig() {
+  return {
+    key: config.key,
+    name: config.name,
+    params: config.params,
+    presets: config.presets.map(s => ({
+      uid: s.uid,
+      name: s.name,
+      params: { ...s.params, messages: (s.params.messages || []).map(cleanMessage) },
+    })),
+  }
+}
+
+let saveTimer = null
+function persist() {
+  if (!connected.value || !autoSave) return
+  clearTimeout(saveTimer)
+  saveTimer = setTimeout(() => {
+    socket.send(`${controller}.save`, { config: cleanConfig() }).catch(() => {})
+  }, 700)
+}
+
+/* ---------- Sample assistant replies (offline mode) ---------- */
+const SAMPLES = {
+  markdown: {
+    body: `Sure! Here's a taste of **markdown** rendering:
+
+## Headings & emphasis
+You can use *italics*, **bold**, \`inline code\`, and [links](https://example.com).
+
+### Lists
+- First item
+- Second item
+  - Nested item
+1. Ordered one
+2. Ordered two
+
+### Table
+| Feature | Supported |
+| ------- | --------- |
+| Tables  | ✅ |
+| Code    | ✅ |
+| Images  | ✅ |
+
+> Blockquotes work too — handy for callouts.`,
+  },
+  code: {
+    body: `Here's a code block with syntax highlighting:
+
+\`\`\`js
+// Debounce a function
+function debounce(fn, wait = 300) {
+  let t
+  return (...args) => {
+    clearTimeout(t)
+    t = setTimeout(() => fn(...args), wait)
+  }
+}
+\`\`\`
+
+And some \`inline code\` mixed into a sentence.`,
+  },
+  image: {
+    body: `Of course — here's a sample image attachment:`,
+    attachments: [
+      { type: 'image', url: 'https://picsum.photos/seed/aichat/640/400' },
+    ],
+  },
+  images: {
+    body: `I can also return multiple images in a grid:`,
+    attachments: [
+      { type: 'image', url: 'https://picsum.photos/seed/one/320/320' },
+      { type: 'image', url: 'https://picsum.photos/seed/two/320/320' },
+    ],
+  },
+  file: {
+    body: `Here's a downloadable file attachment:`,
+    attachments: [
+      { type: 'file', url: 'https://example.com/files/quarterly-report.pdf' },
+      { type: 'file', url: 'https://example.com/files/data-export.xlsx' },
+    ],
+  },
+  text: {
+    body: `I'm a client-only demo, so this reply is canned — but the text still streams in with a smooth typing animation, just like a real model response.`,
+  },
+}
+
+// Pick a sample reply based on simple keyword matching.
+function pickReply(text) {
+  const t = text.toLowerCase()
+  if (t.includes('image') && (t.includes('multiple') || t.includes('grid'))) return SAMPLES.images
+  if (t.includes('image') || t.includes('photo') || t.includes('picture')) return SAMPLES.image
+  if (t.includes('file') || t.includes('download') || t.includes('attach')) return SAMPLES.file
+  if (t.includes('code') || t.includes('function') || t.includes('snippet')) return SAMPLES.code
+  if (t.includes('markdown') || t.includes('table') || t.includes('format')) return SAMPLES.markdown
+  return SAMPLES.text
+}
+
+// Build a finished assistant message from a sample (used for seeded sessions).
+function botMsg(sample) {
+  return {
+    direction: 2,
+    body: sample.body,
+    display: sample.body,
+    attachments: sample.attachments ?? null,
+    model: 'demo-client',
+    ellapsed: 1240,
+  }
+}
+
+// Offline first run: seed demo sessions. Connected first run: one blank session.
+function seed() {
+  if (!config.presets.length) {
+    if (useServerChat.value) {
+      config.presets.push(newSessionObj())
+    } else {
+      config.presets.push(
+        newSessionObj(),
+        { uid: uid(), name: 'Markdown & tables', params: { messages: [{ direction: 1, body: 'Show me markdown' }, botMsg(SAMPLES.markdown)] } },
+        { uid: uid(), name: 'Code snippet', params: { messages: [{ direction: 1, body: 'Write some code' }, botMsg(SAMPLES.code)] } },
+        { uid: uid(), name: 'Image attachment', params: { messages: [{ direction: 1, body: 'Send me an image' }, botMsg(SAMPLES.image)] } },
+      )
+    }
+  }
+  if (!config.presets.find(s => s.uid === config.params.sessionUid)) {
+    config.params.sessionUid = config.presets[0].uid
+  }
+}
+
+/* ---------- Streaming text animation ----------
+   The assistant message keeps a full `body` and an animated `display` that
+   catches up a few characters per frame — the smooth claude.ai typing reveal. */
+const sending = ref(false)
+let raf = null
+
+function tick() {
+  let active = false
+  for (const s of config.presets) {
+    for (const m of s.params.messages) {
+      if (m.display === undefined) continue
+      const target = m.body ?? ''
+      if (m.display.length < target.length) {
+        const remaining = target.length - m.display.length
+        const step = Math.max(2, Math.ceil(remaining / 10))
+        m.display = target.slice(0, m.display.length + step)
+        active = true
+      } else if (m.streamDone && m.isLoading) {
+        // Fully revealed — reveal attachments and finalize.
+        m.isLoading = false
+        m.attachments = m.pendingAttachments ?? m.attachments ?? null
+        sending.value = false
+        persist()
+      }
+    }
+  }
+  raf = active ? requestAnimationFrame(tick) : null
+}
+
+function animate() {
+  if (!raf) raf = requestAnimationFrame(tick)
+}
+
+/* ---------- Send / cancel ---------- */
+let streamTimer = null
+
+// The transcript sent to `${controller}.ai-chat` — finished messages only.
+function chatPayload(session) {
+  return {
+    messages: session.params.messages
+      .filter(m => !m.isLoading)
+      .map(m => ({ direction: m.direction, body: m.body ?? '' })),
+  }
+}
+
+async function serverSend(session, assistant) {
+  const started = Date.now()
+  try {
+    const res = await socket.send(`${controller}.ai-chat`, chatPayload(session))
+    if (!assistant.isLoading) return // cancelled while waiting
+    assistant.body = res?.body ?? res?.reply ?? ''
+    assistant.pendingAttachments = res?.attachments ?? null
+    if (res?.model) assistant.model = res.model
+  } catch (e) {
+    if (!assistant.isLoading) return
+    assistant.body = 'Sorry, something went wrong — please try again.'
+  }
+  assistant.ellapsed = Date.now() - started
+  assistant.streamDone = true
+  animate()
+}
+
+function offlineSend(session, assistant, text) {
+  const reply = pickReply(text)
+  const started = Date.now()
+  let i = 0
+  const full = reply.body
+  assistant.pendingAttachments = reply.attachments ?? null
+  // Simulate network latency + token streaming.
+  streamTimer = setInterval(() => {
+    const step = Math.max(3, Math.ceil((full.length - i) / 30))
+    i = Math.min(full.length, i + step)
+    assistant.body = full.slice(0, i)
+    animate()
+    if (i >= full.length) {
+      clearInterval(streamTimer)
+      streamTimer = null
+      assistant.model = 'demo-client'
+      assistant.ellapsed = Date.now() - started
+      assistant.streamDone = true
+      animate()
+    }
+  }, 45)
+}
+
+function send(content) {
+  const text = `${content ?? ''}`.trim()
+  if (!text || sending.value) return
+  const session = activeSession.value
+  if (!session) return
+  sending.value = true
+
+  if (!session.name) session.name = text.slice(0, 40)
+  session.params.messages.push({ direction: 1, body: text })
+
+  const assistant = {
+    direction: 2,
+    body: '',
+    display: '',
+    isLoading: true,
+    streamDone: false,
+    pendingAttachments: null,
+  }
+  session.params.messages.push(assistant)
+
+  if (useServerChat.value) serverSend(session, assistant)
+  else offlineSend(session, assistant, text)
+}
+
+function cancel() {
+  if (streamTimer) { clearInterval(streamTimer); streamTimer = null }
+  for (const s of config.presets) {
+    const target = s.params.messages.find(m => m.isLoading)
+    if (target) {
+      Object.assign(target, {
+        body: target.display || target.body || 'Cancelled.',
+        streamDone: true,
+        isLoading: false,
+      })
+    }
+  }
+  sending.value = false
+  persist()
+}
+
+/* ---------- Lifecycle ---------- */
+onMounted(() => {
+  seed()
+  mq = window.matchMedia('(min-width: 768px)')
+  isDesktop.value = mq.matches
+  mq.addEventListener('change', onMq)
+})
+
+// persist UI-state edits (no-op unless connected + autoSave)
+watch(() => config.params, () => persist(), { deep: true })
+
+onUnmounted(() => {
+  if (streamTimer) clearInterval(streamTimer)
+  if (raf) cancelAnimationFrame(raf)
+  clearTimeout(saveTimer)
+  mq?.removeEventListener('change', onMq)
+})
+</script>
+
+<style module>
+.resize1 {
+  @apply w-[4px] cursor-ew-resize absolute top-0 right-0 bottom-0;
+  @apply border-r-[1px] border-border-50 hover:border-primary;
+}
+</style>