@jskit-ai/assistant-core 0.1.171 → 0.1.173

package/src/client/conversation/AssistantComposerSupport.vue

@@ -0,0 +1,235 @@
+<template>
+  <section
+    class="assistant-composer-support"
+    :class="`assistant-composer-support--${mode}`"
+    data-assistant-composer-support
+    @focusout="$emit('focusout', $event)"
+    @keydown.esc.stop.prevent="$emit('dismiss')"
+  >
+    <span
+      :id="statusId || undefined"
+      aria-atomic="true"
+      aria-live="polite"
+      class="assistant-composer-support__sr-status"
+      role="status"
+    >{{ statusAnnouncement }}</span>
+
+    <div
+      v-if="mode === 'assistant'"
+      aria-hidden="true"
+      class="assistant-composer-support__assistant-status"
+    >
+      <slot name="activity" :activity="activity">
+        <span v-if="activity.animated !== false" class="assistant-composer-support__assistant-mark" />
+        <span>{{ activity.label }}</span>
+      </slot>
+    </div>
+
+    <template v-else-if="mode !== 'hidden'">
+      <v-icon
+        aria-hidden="true"
+        class="assistant-composer-support__marker"
+        :icon="mdiLightbulbOnOutline"
+        size="16"
+      />
+
+      <div
+        v-if="mode === 'loading'"
+        aria-hidden="true"
+        class="assistant-composer-support__loading"
+      >
+        <span>Thinking of a few ideas</span>
+      </div>
+
+      <div
+        v-else
+        class="assistant-composer-support__options"
+        aria-label="Suggested prompts"
+        aria-orientation="horizontal"
+        role="group"
+      >
+        <v-btn
+          v-for="suggestion in suggestions"
+          :key="suggestion.prompt"
+          :aria-label="`Use suggestion: ${suggestion.prompt}`"
+          class="assistant-composer-support__option"
+          rounded="xl"
+          size="small"
+          type="button"
+          variant="tonal"
+          @blur="$emit('preview', null)"
+          @mousedown.prevent
+          @focus="$emit('preview', suggestion)"
+          @mouseenter="$emit('preview', suggestion)"
+          @mouseleave="$emit('preview', null)"
+          @click="$emit('select', suggestion)"
+        >
+          <span>{{ suggestion.label }}</span>
+        </v-btn>
+      </div>
+    </template>
+  </section>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { mdiLightbulbOnOutline } from "@mdi/js";
+
+defineEmits(["dismiss", "focusout", "preview", "select"]);
+const props = defineProps({
+  activity: { type: Object, default: () => ({}) },
+  loading: {
+    default: false,
+    type: Boolean
+  },
+  statusId: {
+    default: "",
+    type: String
+  },
+  suggestions: {
+    default: () => [],
+    type: Array
+  }
+});
+
+const mode = computed(() => {
+  if (String(props.activity.label || "").trim()) {
+    return "assistant";
+  }
+  if (props.loading) {
+    return "loading";
+  }
+  return props.suggestions.length > 0 ? "ready" : "hidden";
+});
+const statusAnnouncement = computed(() => {
+  if (mode.value === "assistant") {
+    return String(props.activity.label || "").trim();
+  }
+  if (mode.value === "loading") {
+    return "Thinking of a few ideas.";
+  }
+  if (mode.value === "ready") {
+    return `${props.suggestions.length} suggested prompts are available before the message controls.`;
+  }
+  return "";
+});
+</script>
+
+<style scoped>
+.assistant-composer-support {
+  align-items: center;
+  box-sizing: border-box;
+  color: rgba(var(--v-theme-on-surface), 0.68);
+  display: grid;
+  grid-template-columns: 1.25rem minmax(0, 1fr);
+  height: 2.25rem;
+  max-width: 100%;
+  min-height: 2.25rem;
+  min-width: 0;
+  overflow: hidden;
+  padding-inline: 0.2rem;
+  width: 100%;
+}
+
+.assistant-composer-support__sr-status {
+  block-size: 1px;
+  clip-path: inset(50%);
+  inline-size: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+}
+
+.assistant-composer-support__marker {
+  justify-self: center;
+}
+
+.assistant-composer-support__assistant-status,
+.assistant-composer-support__loading {
+  align-items: center;
+  display: flex;
+}
+
+.assistant-composer-support__assistant-status {
+  font-size: 0.78rem;
+  gap: 0.45rem;
+  grid-column: 1 / -1;
+  line-height: 1.35;
+  min-width: 0;
+  overflow-wrap: anywhere;
+  padding-inline: 0.55rem;
+}
+
+.assistant-composer-support__assistant-mark {
+  animation: assistant-composer-support-pulse 1.2s ease-in-out infinite;
+  background: rgb(var(--v-theme-primary));
+  border-radius: 50%;
+  height: 0.42rem;
+  width: 0.42rem;
+}
+
+.assistant-composer-support__loading {
+  font-size: 0.76rem;
+  grid-column: 2;
+  min-width: 0;
+  padding-inline: 0.5rem;
+}
+
+.assistant-composer-support__options {
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  gap: 0.35rem;
+  grid-column: 2;
+  height: 100%;
+  min-width: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  overscroll-behavior-inline: contain;
+  padding: 0.1rem 0.2rem;
+  scroll-snap-type: inline proximity;
+  scrollbar-width: none;
+  width: 100%;
+}
+
+.assistant-composer-support__options::-webkit-scrollbar {
+  display: none;
+}
+
+.assistant-composer-support__option {
+  color: rgb(var(--v-theme-on-surface));
+  flex: 0 0 auto;
+  font-size: 0.75rem;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.25;
+  min-width: 0;
+  padding-inline: 0.65rem;
+  scroll-snap-align: start;
+  text-transform: none;
+}
+
+.assistant-composer-support__option span {
+  white-space: nowrap;
+}
+
+@keyframes assistant-composer-support-pulse {
+  0%,
+  100% {
+    opacity: 0.35;
+    transform: scale(0.8);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .assistant-composer-support__assistant-mark {
+    animation: none;
+    opacity: 1;
+    transform: none;
+  }
+}
+</style>

package/src/client/conversation/AssistantConversationElement.vue

@@ -1,25 +1,71 @@
 <template>
   <section class="assistant-conversation" :aria-label="label">
     <AssistantTranscript
-      v-bind="adapter.conversation" class="assistant-conversation__transcript"
+      v-bind="adapter.conversation" :working="working" class="assistant-conversation__transcript"
       @load-more="adapter.actions?.loadMore?.($event)" @reload="adapter.actions?.reload?.()"
       @resend-turn="adapter.actions?.resend?.($event)" @cancel-turn="adapter.actions?.cancel?.($event)"
       @edit-turn="adapter.actions?.edit?.($event)" @link-click="adapter.actions?.openLink?.($event)"
     >
       <template v-for="name in transcriptSlots" #[name]="scope"><slot :name="name" v-bind="scope" /></template>
     </AssistantTranscript>
+    <div v-if="adapter.goal && adapter.goal.enabled !== false" class="assistant-conversation__goal">
+      <AssistantGoalControl :state="adapter.goal" />
+    </div>
+    <AssistantComposerSupport
+      v-if="!$slots.hints && (adapter.composer || activity.label || adapter.suggestions)"
+      :activity="activity" :status-id="statusId"
+      :loading="adapter.suggestions?.visible && adapter.suggestions.loading"
+      :suggestions="adapter.suggestions?.visible ? adapter.suggestions.items : []"
+      @preview="adapter.suggestions?.previewSuggestion($event)"
+      @select="selectSuggestion" @dismiss="dismissSuggestions"
+    >
+      <template v-if="$slots.activity" #activity="scope"><slot name="activity" v-bind="scope" /></template>
+    </AssistantComposerSupport>
     <slot name="hints" :adapter="adapter" />
     <slot name="composer" :adapter="adapter">
       <AssistantPromptInput
         v-if="adapter.composer" ref="input" v-bind="adapter.composer" class="assistant-conversation__composer"
-        :model-value="adapter.composer.draft || ''" :submit-enabled="adapter.composer.canSend"
+        :model-value="adapter.composer.draft || ''" :submit-enabled="canSend"
         :aria-label="adapter.composer.ariaLabel || 'Message AI assistant'" :rows="adapter.composer.rows || 2"
+        :described-by="activity.label || adapter.suggestions?.visible ? statusId : adapter.composer.describedBy"
+        :placeholder="suggestionPreview || adapter.composer.placeholder" :placeholder-affects-height="!suggestionPreview"
+        :attachment-state="attachmentState" :dragging="attachmentsEnabled && adapter.attachments.dragActive"
         tab-to-submit @update:model-value="adapter.actions.setDraft($event)"
         @submit="submit" @tab-to-submit="delivery?.focus()"
+        @focus="adapter.suggestions?.focus()" @blur="adapter.suggestions?.blur()"
+        @escape="dismissSuggestions"
+        @dragenter="attachmentEvent('handleDragEnter', $event)" @dragover="attachmentEvent('handleDragOver', $event)"
+        @dragleave="attachmentEvent('handleDragLeave', $event)" @drop="attachmentEvent('handleDrop', $event)"
+        @paste="attachmentEvent('handlePaste', $event)"
       >
-        <template v-if="$slots['input-start']" #input-start><slot name="input-start" :adapter="adapter" /></template>
+        <template v-if="attachmentsEnabled" #attachments>
+          <input ref="fileInput" hidden multiple type="file" :accept="adapter.attachments.accept" :disabled="!adapter.attachments.canAddFiles" @change="attachSelectedFiles">
+          <AssistantAttachmentQueue
+            :items="adapter.attachments.queueItems" :preview-enabled="Boolean(adapter.attachments.open)"
+            :maximum-files="adapter.attachments.maxItems"
+            @cancel="adapter.attachments.cancelAttachment($event)" @remove="adapter.attachments.removeAttachment($event)"
+            @retry="adapter.attachments.retryAttachment($event)" @preview="adapter.attachments.open($event)" @focus-input="input?.focus()"
+          />
+        </template>
+        <template v-if="adapter.questions || $slots['input-start']" #input-start>
+          <slot name="input-start" :adapter="adapter">
+            <AssistantQuestionInputs
+              v-bind="adapter.questions"
+              @update:answers="adapter.questions.setAnswers($event)" @update:choice="adapter.questions.setChoice($event)" @dismiss="adapter.questions.dismiss()"
+            />
+          </slot>
+        </template>
         <template #footer>
-          <AssistantComposerActions ref="delivery" :state="adapter.composer" @submit="submit" @stop="stop">
+          <AssistantComposerActions ref="delivery" :state="{ ...adapter.composer, canSend }" @submit="submit" @stop="stop">
+            <AssistantModelControl
+              v-if="adapter.models && adapter.models.enabled !== false" v-model="modelsOpen" v-bind="adapter.models"
+              @select-provider="adapter.models.selectProvider?.($event)" @select-model="adapter.models.selectModel?.($event)"
+              @select-variant="adapter.models.selectVariant?.($event)" @apply="applyModel" @reload="adapter.models.reload?.()"
+            />
+            <v-btn
+              v-if="attachmentsEnabled" aria-label="Attach files" title="Attach files" size="small" variant="text" :icon="mdiPaperclip"
+              :disabled="!adapter.attachments.canAddFiles" @click="fileInput?.click()"
+            />
             <slot
               v-if="configurationMode !== 'hidden'" name="configuration"
               :configuration="configuration" :disabled="configurationMode !== 'editable' || adapter.composer.pending"
@@ -34,7 +80,10 @@
               />
             </slot>
             <slot name="composer-tools" :adapter="adapter" />
-            <template #feedback><slot name="composer-feedback" :adapter="adapter" /></template>
+            <template #feedback>
+              <p v-if="attachmentsEnabled && adapter.attachments.status" role="alert" class="assistant-conversation__attachment-error">{{ adapter.attachments.status }}</p>
+              <slot name="composer-feedback" :adapter="adapter" />
+            </template>
           </AssistantComposerActions>
         </template>
       </AssistantPromptInput>
@@ -42,10 +91,16 @@
   </section>
 </template>
 <script setup>
-import { computed, ref, useSlots } from "vue";
+import { computed, ref, useId, useSlots } from "vue";
+import { mdiPaperclip } from "@mdi/js";
 import AssistantTranscript from "./AssistantTranscript.vue";
 import AssistantPromptInput from "./AssistantPromptInput.vue";
 import AssistantComposerActions from "./AssistantComposerActions.vue";
+import AssistantComposerSupport from "./AssistantComposerSupport.vue";
+import AssistantGoalControl from "./AssistantGoalControl.vue";
+import AssistantAttachmentQueue from "./AssistantAttachmentQueue.vue";
+import AssistantQuestionInputs from "./AssistantQuestionInputs.vue";
+import AssistantModelControl from "./AssistantModelControl.vue";
 const props = defineProps({
   adapter: { type: Object, required: true },
   label: { type: String, default: "Assistant conversation" },
@@ -56,10 +111,47 @@ const props = defineProps({
 const slots = useSlots();
 const transcriptSlots = computed(() => ["welcome", "attachments", "system-message", "message-actions"].filter((name) => slots[name]));
 const input = ref(null);
+const fileInput = ref(null);
+const modelsOpen = ref(false);
 const delivery = ref(null);
+const statusId = `assistant-status-${useId()}`;
+const working = computed(() => props.adapter.conversation.working ?? Boolean(
+  props.adapter.composer?.canStop || props.adapter.conversation.turns?.some(turn => turn.pending)
+));
+const activity = computed(() => props.adapter.activity ?? {
+  label: props.adapter.composer?.stopPending ? "Stopping…"
+    : working.value
+      ? "Assistant is working…" : props.adapter.composer?.pending ? "Sending to assistant…" : ""
+});
+const suggestionPreview = computed(() => !props.adapter.composer?.draft && props.adapter.suggestions?.visible
+  ? props.adapter.suggestions.preview : "");
+const attachmentsEnabled = computed(() => props.adapter.attachments && props.adapter.attachments.enabled !== false);
+const attachmentState = computed(() => ({
+  count: attachmentsEnabled.value ? props.adapter.attachments.queueItems?.length || 0 : 0,
+  canSubmit: !attachmentsEnabled.value || props.adapter.attachments.canSubmit !== false
+}));
+const canSend = computed(() => props.adapter.composer?.canSend && attachmentState.value.canSubmit);
+function attachmentEvent(method, event) {
+  if (attachmentsEnabled.value) return props.adapter.attachments[method]?.(event);
+}
+function attachSelectedFiles(event) {
+  const files = Array.from(event.target.files || []);
+  event.target.value = "";
+  if (attachmentsEnabled.value && props.adapter.attachments.canAddFiles) return props.adapter.attachments.uploadFiles(files);
+}
+async function applyModel() {
+  if (await props.adapter.models.apply() !== false) modelsOpen.value = false;
+}
+function selectSuggestion(value) {
+  if (props.adapter.suggestions?.select(value) !== false) input.value?.focus();
+}
+function dismissSuggestions() {
+  props.adapter.suggestions?.dismiss();
+  input.value?.focus();
+}
 function submit() {
-  if (!props.adapter.composer?.canSend) return;
-  return props.adapter.actions.submit({ configuration: props.configuration });
+  if (!canSend.value) return;
+  return props.adapter.actions.submit({ configuration: props.configuration, attachments: attachmentsEnabled.value ? props.adapter.attachments.attachments.map(item => ({ ...item })) : [] });
 }
 function stop() {
   const state = props.adapter.composer;
@@ -73,8 +165,10 @@ function updateConfiguration(value) {
 defineExpose({ focus: () => input.value?.focus(), submit, stop });
 </script>
 <style scoped>
-.assistant-conversation { display: flex; flex-direction: column; min-height: 0; min-width: 0; height: 100%; gap: 0; }
+.assistant-conversation { display: flex; flex-direction: column; min-height: 0; min-width: 0; height: 100%; gap: 0; container: assistant-conversation / inline-size; }
+.assistant-conversation__goal { display: flex; justify-content: flex-end; flex: 0 0 auto; }
 .assistant-conversation__transcript { flex: 1 1 auto; min-height: 0; }
 .assistant-conversation__composer { flex: 0 0 auto; }
+.assistant-conversation__attachment-error { flex-basis: 100%; margin: 0; }
 .assistant-conversation__setting { min-width: 8rem; max-width: 16rem; }
 </style>

package/src/client/conversation/AssistantGoalControl.vue

@@ -0,0 +1,81 @@
+<script setup>
+import { computed, onMounted, onScopeDispose, ref, watch } from "vue";
+
+const props = defineProps({ state: { type: Object, default: null } });
+const open = ref(false);
+const objective = ref("");
+const tokenBudget = ref("");
+const now = ref(Date.now());
+const goal = computed(() => props.state?.goal);
+const running = computed(() => goal.value?.status === "active");
+const label = computed(() => ({
+  active: "Goal running", paused: "Goal paused", blocked: "Goal blocked",
+  usageLimited: "Goal waiting for allowance", budgetLimited: "Goal budget reached", complete: "Goal complete"
+})[goal.value?.status] || "Set goal");
+const elapsed = computed(() => {
+  if (!Number.isFinite(goal.value?.elapsedSeconds)) return "";
+  const sinceSample = running.value && Number.isFinite(goal.value.sampledAt)
+    ? Math.max(0, now.value - goal.value.sampledAt) / 1000 : 0;
+  const total = Math.max(0, Math.floor(goal.value.elapsedSeconds + sinceSample));
+  const seconds = String(total % 60).padStart(2, "0");
+  const minutes = Math.floor(total / 60);
+  return minutes < 60 ? `${minutes}:${seconds}` : `${Math.floor(minutes / 60)}:${String(minutes % 60).padStart(2, "0")}:${seconds}`;
+});
+const canSet = computed(() => typeof props.state?.set === "function" && (!goal.value || goal.value.status === "complete"));
+const validBudget = computed(() => tokenBudget.value === "" || (Number.isSafeInteger(Number(tokenBudget.value)) && Number(tokenBudget.value) > 0));
+let timer;
+onMounted(() => watch(() => [props.state?.enabled, running.value, goal.value?.elapsedSeconds, goal.value?.sampledAt], () => {
+  clearInterval(timer);
+  now.value = Date.now();
+  if (props.state?.enabled !== false && running.value && Number.isFinite(goal.value?.sampledAt)) {
+    timer = setInterval(() => { now.value = Date.now(); }, 1000);
+  }
+}, { immediate: true, flush: "sync" }));
+onScopeDispose(() => clearInterval(timer));
+watch(() => props.state?.enabled, enabled => { if (enabled === false) open.value = false; });
+async function setGoal() {
+  if (!canSet.value || props.state.pending || !objective.value.trim() || !validBudget.value) return;
+  const result = await props.state.set({ objective: objective.value.trim(), ...(tokenBudget.value === "" ? {} : { tokenBudget: Number(tokenBudget.value) }) });
+  if (result !== false && !props.state.error) { objective.value = ""; tokenBudget.value = ""; }
+}
+</script>
+
+<template>
+  <v-menu v-if="state && state.enabled !== false" v-model="open" location="top" :close-on-content-click="false">
+    <template #activator="{ props: menuProps }">
+      <v-btn v-bind="menuProps" class="assistant-goal" size="small" variant="text" :aria-label="label" :title="[label, elapsed && `${elapsed} running time`, goal?.objective].filter(Boolean).join('\n')">
+        <span v-if="goal" class="assistant-goal__light" :class="{ 'assistant-goal__light--running': running, 'assistant-goal__light--paused': goal.status === 'paused' }" aria-hidden="true" />
+        <span class="assistant-goal__label">{{ goal ? 'Goal' : 'Set goal' }}</span>
+        <span v-if="elapsed" class="assistant-goal__elapsed" aria-hidden="true">{{ elapsed }}</span>
+      </v-btn>
+    </template>
+    <v-card class="assistant-goal__details pa-3" max-width="360">
+      <strong role="status">{{ label }}</strong>
+      <p v-if="goal" class="my-2">{{ goal.objective }}</p>
+      <p v-if="elapsed" class="text-body-small my-2">Running time: {{ elapsed }}</p>
+      <v-btn v-if="running && state.pause" size="small" :disabled="state.pending" @click="state.pause()">{{ state.pending ? 'Pausing…' : 'Pause goal' }}</v-btn>
+      <v-btn v-else-if="['paused', 'blocked', 'usageLimited'].includes(goal?.status) && state.resume" size="small" :disabled="state.pending" @click="state.resume()">{{ state.pending ? 'Resuming…' : 'Resume goal' }}</v-btn>
+      <p v-if="running || goal?.status === 'paused'" class="text-body-small mt-2">Pausing prevents further automatic turns. Use Stop to interrupt the current turn.</p>
+      <form v-if="canSet" class="assistant-goal__form mt-2" @submit.prevent="setGoal">
+        <v-textarea v-model="objective" label="Goal objective" rows="2" auto-grow :disabled="state.pending" hide-details />
+        <v-text-field v-model="tokenBudget" label="Token budget (optional)" type="number" min="1" step="1" :disabled="state.pending" :error="!validBudget" hide-details />
+        <v-btn type="submit" size="small" :disabled="state.pending || !objective.trim() || !validBudget">{{ state.pending ? 'Starting…' : 'Start goal' }}</v-btn>
+      </form>
+      <p v-if="state.error" role="alert" class="text-error text-body-small mt-2">{{ state.error }}</p>
+      <slot :goal="goal" />
+    </v-card>
+  </v-menu>
+</template>
+
+<style scoped>
+.assistant-goal { text-transform: none; flex-shrink: 0; font-variant-numeric: tabular-nums; }
+.assistant-goal__light { width: 0.625rem; height: 0.625rem; border-radius: 50%; margin-inline-end: 0.45rem; background: currentColor; }
+.assistant-goal__light--running { background: #d32f2f; box-shadow: 0 0 0 3px #d32f2f20; animation: assistant-goal-flash 1.5s ease-in-out infinite; }
+.assistant-goal__light--paused { background: #ef6c00; box-shadow: 0 0 0 3px #ef6c0020; }
+.assistant-goal__elapsed { margin-inline-start: 0.45rem; }
+.assistant-goal__details { overflow-wrap: anywhere; }
+.assistant-goal__form { display: grid; gap: 0.75rem; }
+@keyframes assistant-goal-flash { 50% { opacity: 0.3; } }
+@container assistant-conversation (max-width: 26rem) { .assistant-goal__elapsed { display: none; } }
+@media (prefers-reduced-motion: reduce) { .assistant-goal__light--running { animation: none; } }
+</style>

package/src/client/conversation/AssistantMessageAttachments.vue

@@ -0,0 +1,114 @@
+<template>
+  <ul
+    v-if="attachments.length"
+    aria-label="Attached files"
+    class="assistant-conversation-attachments"
+  >
+    <li
+      v-for="(attachment, index) in attachments"
+      :key="attachmentKey(attachment, index)"
+      class="assistant-conversation-attachments__item"
+    >
+      <component
+        :is="previewEnabled ? 'button' : 'span'"
+        :type="previewEnabled ? 'button' : undefined"
+        class="assistant-conversation-attachments__open"
+        @click="previewEnabled && emit('preview', attachment)"
+      >
+        <v-icon
+          aria-hidden="true"
+          class="assistant-conversation-attachments__icon"
+          :icon="attachmentIcon(attachment)"
+          size="19"
+        />
+        <span class="assistant-conversation-attachments__details">
+          <span
+            class="assistant-conversation-attachments__name text-body-small font-weight-medium"
+            :title="attachment.fileName"
+          >
+            {{ attachment.reference }} {{ attachment.fileName }}
+          </span>
+          <span
+            v-if="attachmentSizeLabel(attachment.size)"
+            class="assistant-conversation-attachments__size text-label-small"
+          >
+            {{ attachmentSizeLabel(attachment.size) }}
+          </span>
+        </span>
+      </component>
+    </li>
+  </ul>
+</template>
+
+<script setup>
+import { mdiFileOutline, mdiImageOutline } from "@mdi/js";
+import { attachmentSizeLabel } from "../../shared/conversation/attachments.js";
+
+defineProps({
+  attachments: { type: Array, default: () => [] },
+  previewEnabled: Boolean
+});
+const emit = defineEmits(["preview"]);
+function attachmentIcon(attachment) {
+  return /\.(?:avif|bmp|gif|heic|heif|jpe?g|png|svg|webp)$/iu.test(attachment.fileName) ? mdiImageOutline : mdiFileOutline;
+}
+function attachmentKey(attachment, index) {
+  return attachment.attachmentId || `${index}:${attachment.fileName}:${attachment.size ?? ""}`;
+}
+</script>
+
+<style scoped>
+.assistant-conversation-attachments {
+  display: grid;
+  gap: 0.35rem;
+  list-style: none;
+  margin: 0;
+  max-width: 100%;
+  padding: 0;
+  width: min(19rem, 100%);
+}
+
+.assistant-conversation-attachments__item {
+  align-items: center;
+  background: rgba(var(--v-theme-surface), 0.82);
+  border: 1px solid rgba(var(--v-theme-outline), 0.2);
+  border-radius: 10px;
+  color: rgb(var(--v-theme-on-surface));
+  min-height: 2.8rem;
+  min-width: 0;
+  padding: 0.42rem 0.65rem;
+}
+
+.assistant-conversation-attachments__icon {
+  color: rgb(var(--v-theme-primary));
+}
+
+.assistant-conversation-attachments__details {
+  display: grid;
+  min-width: 0;
+}
+
+.assistant-conversation-attachments__open {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  color: inherit;
+  gap: 0.55rem;
+  grid-template-columns: auto minmax(0, 1fr);
+  padding: 0;
+  text-align: left;
+  display: grid;
+  min-width: 0;
+  width: 100%;
+}
+
+.assistant-conversation-attachments__name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.assistant-conversation-attachments__size {
+  color: rgba(var(--v-theme-on-surface), 0.62);
+}
+</style>