@mixd-id/web-scaffold 0.2.250801012 → 0.2.250801014

package/src/components/AIChatItem.vue

@@ -0,0 +1,168 @@
+<template>
+  <div :class="['flex w-full', message.direction === 1 ? 'justify-end' : 'justify-start']">
+
+    <!-- Typing indicator (assistant, no content yet) -->
+    <div v-if="message.isLoading && !message.display"
+         class="rounded-3xl px-5 py-4">
+      <div class="flex gap-1.5 items-center">
+        <span v-for="d in 3" :key="d" class="w-2 h-2 rounded-full bg-text-300 animate-bounce"
+              :style="`animation-delay:${(d - 1) * 160}ms`" />
+      </div>
+    </div>
+
+    <!-- User bubble -->
+    <div v-else-if="message.direction === 1" class="max-w-[85%] flex flex-col items-end gap-2">
+      <!-- Image attachments -->
+      <div v-if="images.length" class="grid gap-2" :class="images.length > 1 ? 'grid-cols-2' : 'grid-cols-1'">
+        <img v-for="(img, n) in images" :key="n" :src="img" loading="lazy"
+             class="rounded-2xl max-h-60 w-full object-cover" />
+      </div>
+      <div v-if="message.body"
+           class="bg-base-500 rounded-3xl rounded-br-lg px-5 py-3 whitespace-pre-wrap md:text-lg leading-relaxed">
+        {{ message.body }}
+      </div>
+    </div>
+
+    <!-- Assistant bubble (markdown + streaming) -->
+    <div v-else class="max-w-full w-full">
+      <div :class="$style.md" class="md:text-lg leading-relaxed" v-html="renderedContent" />
+      <span v-if="message.isLoading" :class="$style.caret">▍</span>
+
+      <!-- Image attachments -->
+      <div v-if="images.length" class="mt-3 grid gap-2" :class="images.length > 1 ? 'grid-cols-2' : 'grid-cols-1 max-w-md'">
+        <img v-for="(img, n) in images" :key="n" :src="img" loading="lazy"
+             class="rounded-2xl w-full object-cover" />
+      </div>
+
+      <!-- File attachments -->
+      <div v-if="files.length" class="mt-3 flex flex-wrap gap-2">
+        <a v-for="(url, n) in files" :key="n" :href="url" target="_blank" rel="noopener"
+           class="flex items-center gap-2 p-2 pr-3 rounded-xl bg-base-300 hover:bg-base-500 transition-colors no-underline max-w-[260px]">
+          <span class="shrink-0 px-2 py-1 rounded-lg text-[10px] font-bold uppercase text-white" :style="{ background: fileColor(url) }">{{ fileExt(url) }}</span>
+          <span class="text-sm text-text truncate">{{ fileName(url) }}</span>
+        </a>
+      </div>
+
+      <!-- Footer meta -->
+      <div v-if="!message.isLoading && (message.ellapsed || message.model)"
+           class="mt-2 flex items-center gap-1.5 text-xs text-text-300">
+        <span v-if="message.ellapsed">{{ message.ellapsed }}ms</span>
+        <span v-if="message.ellapsed && message.model">·</span>
+        <span v-if="message.model">{{ message.model }}</span>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { Marked } from 'marked'
+import hljs from 'highlight.js'
+
+const { message } = defineProps({
+  message: { type: Object, required: true },
+})
+
+// Local Marked instance — avoids mutating global marked state on each mount.
+const markdown = new Marked({
+  gfm: true,
+  breaks: true,
+  renderer: {
+    code({ text, lang }) {
+      const language = lang && hljs.getLanguage(lang) ? lang : 'plaintext'
+      const html = hljs.highlight(text, { language }).value
+      return `<pre><code class="hljs language-${language}">${html}</code></pre>`
+    },
+  },
+})
+
+const renderedContent = computed(() => markdown.parse(message.display ?? message.body ?? ''))
+
+/* ---------- Attachments ---------- */
+const attachments = computed(() => message.attachments ?? [])
+const images = computed(() =>
+  attachments.value.filter(a => a.type === 'image').map(a => a.url ?? a.image),
+)
+const files = computed(() =>
+  attachments.value.filter(a => a.type === 'file' || a.type === 'url').map(a => a.url),
+)
+
+function fileName(url) {
+  return (url || '').split('/').pop() || url
+}
+function fileExt(url) {
+  return ((url || '').split('.').pop() || 'file').slice(0, 4)
+}
+
+const EXT_COLORS = {
+  pdf: '#c0392b', doc: '#2b5fa8', docx: '#2b5fa8',
+  xls: '#1d6f42', xlsx: '#1d6f42', csv: '#1d6f42',
+  zip: '#7f8c8d', png: '#8e44ad', jpg: '#8e44ad',
+}
+function fileColor(url) {
+  return EXT_COLORS[fileExt(url).toLowerCase()] ?? '#444'
+}
+</script>
+
+<style module>
+/* Animated caret shown while the assistant is streaming */
+.caret {
+  @apply inline-block ml-0.5 text-text-300;
+  animation: blink 1s steps(2, start) infinite;
+}
+@keyframes blink {
+  to { visibility: hidden; }
+}
+
+/* Markdown layout. Explicit !important is required because tailwind.config.js
+   uses `important: true`, which makes preflight resets beat these rules. */
+.md :global(p)            { margin: 0.5em 0 !important; }
+.md :global(p:first-child){ margin-top: 0 !important; }
+.md :global(p:last-child) { margin-bottom: 0 !important; }
+.md :global(ul)           { list-style-type: disc !important; padding-left: 1.5em !important; margin: 0.6em 0 !important; }
+.md :global(ol)           { list-style-type: decimal !important; padding-left: 1.5em !important; margin: 0.6em 0 !important; }
+.md :global(li)           { display: list-item !important; margin: 0.2em 0 !important; }
+.md :global(strong)       { font-weight: 700 !important; }
+.md :global(em)           { font-style: italic !important; }
+.md :global(a)            { color: #89b4fa !important; text-decoration: underline !important; }
+.md :global(h1), .md :global(h2),
+.md :global(h3), .md :global(h4) { font-weight: 700 !important; margin: 0.8em 0 0.3em !important; line-height: 1.3 !important; }
+.md :global(h1)           { font-size: 1.5em !important; }
+.md :global(h2)           { font-size: 1.3em !important; }
+.md :global(h3)           { font-size: 1.1em !important; }
+.md :global(table)        { border-collapse: collapse !important; width: 100% !important; margin: 0.8em 0 !important; display: block; overflow-x: auto; }
+.md :global(th), .md :global(td) { border: 1px solid rgba(128,128,128,0.35) !important; padding: 0.4em 0.7em !important; text-align: left !important; }
+.md :global(th)           { font-weight: 600 !important; background: rgba(128,128,128,0.1) !important; }
+.md :global(blockquote)   { border-left: 3px solid rgba(128,128,128,0.4) !important; padding-left: 1em !important; margin: 0.6em 0 !important; opacity: 0.8; }
+.md :global(hr)           { border-color: rgba(128,128,128,0.3) !important; margin: 1em 0 !important; }
+.md :global(:not(pre) > code) {
+  background: rgba(128,128,128,0.18) !important;
+  padding: 0.12em 0.4em !important;
+  border-radius: 0.3em !important;
+  font-size: 0.88em !important;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
+}
+
+/* highlight.js — Catppuccin Mocha. !important needed for the same reason. */
+.md :global(code.hljs) {
+  display: block !important;
+  overflow-x: auto !important;
+  padding: 1rem !important;
+  border-radius: 0.5rem !important;
+  margin: 0.5rem 0 !important;
+  font-size: 0.85em !important;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
+  background: #1e1e2e !important;
+  color: #cdd6f4 !important;
+}
+.md :global(code.hljs *) { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important; }
+.md :global(.hljs-keyword), .md :global(.hljs-selector-tag), .md :global(.hljs-title) { color: #cba6f7 !important; }
+.md :global(.hljs-string), .md :global(.hljs-attr) { color: #a6e3a1 !important; }
+.md :global(.hljs-number), .md :global(.hljs-literal) { color: #fab387 !important; }
+.md :global(.hljs-comment) { color: #6c7086 !important; font-style: italic; }
+.md :global(.hljs-built_in), .md :global(.hljs-name) { color: #89b4fa !important; }
+.md :global(.hljs-variable), .md :global(.hljs-template-variable) { color: #f38ba8 !important; }
+.md :global(.hljs-type) { color: #f9e2af !important; }
+.md :global(.hljs-tag) { color: #f38ba8 !important; }
+</style>

package/src/components/AIChatTextbox.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="flex items-end gap-2 bg-base-500 rounded-3xl border-[1px] border-border-50 p-2 pl-4 focus-within:border-border-200 transition-colors">
+    <textarea ref="textarea"
+              v-model="draft"
+              rows="1"
+              class="resize-none flex-1 bg-transparent outline-none py-2 md:text-lg leading-relaxed max-h-[40vh]"
+              placeholder="Message AI…"
+              @input="resize"
+              @keydown="onKeydown" />
+    <button type="button"
+            class="shrink-0 w-9 h-9 rounded-full flex items-center justify-center transition-colors"
+            :class="canSend ? 'bg-primary hover:opacity-90' : 'bg-base-200 opacity-50 cursor-default'"
+            :disabled="!canSend"
+            @click="sending ? emit('cancel') : submit()">
+      <svg v-if="!sending" width="15" height="15" class="fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z"/></svg>
+      <svg v-else width="13" height="13" class="fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M0 128C0 92.7 28.7 64 64 64H320c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128z"/></svg>
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { computed, nextTick, ref, useTemplateRef } from 'vue'
+
+const { sending } = defineProps({
+  sending: { type: Boolean, default: false },
+})
+
+const emit = defineEmits(['send', 'cancel'])
+
+const draft = ref('')
+const textarea = useTemplateRef('textarea')
+
+const canSend = computed(() => sending || draft.value.trim().length > 0)
+
+function resize() {
+  const el = textarea.value
+  if (!el) return
+  el.style.height = 'auto'
+  el.style.height = `${el.scrollHeight}px`
+}
+
+function onKeydown(e) {
+  if (e.key === 'Enter' && !e.shiftKey) {
+    e.preventDefault()
+    submit()
+  }
+}
+
+function submit() {
+  const content = draft.value.trim()
+  if (!content || sending) return
+  draft.value = ''
+  nextTick(resize)
+  emit('send', content)
+}
+</script>