@olares/lares-mobile 0.15.5 → 0.15.6

package/src/chat/ChatBar.vue

@@ -47,9 +47,9 @@ export default {
   max-width: 100%;
   margin: 0;
   overflow: hidden;
-  font-size: 16px;
+  font-size: 18px;
   font-weight: 600;
-  line-height: 22px;
+  line-height: 24px;
   text-align: center;
   text-overflow: ellipsis;
   white-space: nowrap;

package/src/chat/Composer.vue

@@ -1,15 +1,97 @@
 <template>
-  <form class="lares-composer" @submit.prevent="onSend">
-    <div class="lares-composer__card" data-composer-card :data-holding="holding ? 'true' : 'false'">
+  <form class="lares-composer" :class="{ 'lares-composer--hero': hero }" @submit.prevent="onSend">
+    <div
+      class="lares-composer__card"
+      data-composer-card
+      :data-hero="hero ? 'true' : 'false'"
+      :data-holding="holding ? 'true' : 'false'"
+    >
+      <div v-if="referenceOpen" ref="referenceMenu" class="lares-composer__menu" role="listbox">
+        <p v-if="referencesError" class="lares-composer__menu-status">{{ referencesError }}</p>
+        <p v-else-if="referencesLoading" class="lares-composer__menu-status">{{ t("agent.loading") }}</p>
+        <p v-else-if="!references.length" class="lares-composer__menu-status">{{ t("references.empty") }}</p>
+        <div v-else class="lares-composer__menu-scroll">
+          <template v-for="(row, index) in referenceMenuRows" :key="row.id">
+            <p v-if="row.section" class="lares-composer__menu-section">{{ row.section }}</p>
+            <button
+              type="button"
+              class="lares-composer__menu-item"
+              role="option"
+              :aria-selected="index === referenceIndex"
+              :data-selected="index === referenceIndex"
+              @mousedown.prevent
+              @click="pickReference(row)"
+            >
+              <span class="lares-composer__menu-name">{{ row.name }}</span>
+              <span class="lares-composer__menu-path">{{ row.description }}</span>
+            </button>
+          </template>
+        </div>
+      </div>
+      <div v-if="commandsOpen" ref="commandsMenu" class="lares-composer__menu" role="listbox">
+        <p class="lares-composer__menu-section">{{ t("desktop.commands") }}</p>
+        <p v-if="commandsError" class="lares-composer__menu-status">{{ commandsError }}</p>
+        <p v-else-if="!commands" class="lares-composer__menu-status">{{ t("agent.loading") }}</p>
+        <div v-else-if="commandMenuRows.length" class="lares-composer__menu-scroll">
+          <button
+            v-for="(command, index) in commandMenuRows"
+            :key="command.name"
+            type="button"
+            class="lares-composer__menu-item lares-composer__menu-item--command"
+            role="option"
+            :aria-selected="index === commandIndex"
+            :data-selected="index === commandIndex"
+            @mousedown.prevent
+            @click="pickCommand(command)"
+          >
+            <span class="lares-composer__command-name">/{{ command.name }}</span>
+            <span class="lares-composer__command-hint">{{ command.description || command.hint }}</span>
+          </button>
+        </div>
+      </div>
+      <div v-if="draftImages.length" class="lares-composer__attachments">
+        <figure
+          v-for="image in draftImages"
+          :key="image.id"
+          :data-status="imageStatus(image)"
+        >
+          <img
+            :src="image.previewUrl"
+            :alt="image.file?.name || ''"
+            class="lares-composer__attachment-img"
+          />
+          <div v-if="imageStatus(image) === 'uploading'" class="lares-composer__attachment-overlay">
+            <svg class="lares-composer__spin" viewBox="0 0 16 16" aria-hidden="true">
+              <circle cx="8" cy="8" r="6" />
+            </svg>
+          </div>
+          <div v-else-if="imageStatus(image) === 'failed'" class="lares-composer__attachment-overlay" data-kind="error">
+            <span aria-hidden="true">!</span>
+          </div>
+          <button
+            type="button"
+            class="lares-composer__attachment-remove"
+            :aria-label="t('composer.removeAttachment', { name: image.file?.name || t('composer.attach') })"
+            @click="$emit('remove-image', image.id)"
+          >
+            <svg viewBox="0 0 16 16" aria-hidden="true">
+              <path d="m4.5 4.5 7 7m0-7-7 7" />
+            </svg>
+          </button>
+        </figure>
+      </div>
       <textarea
         ref="input"
         :value="draft"
         class="lares-composer__input"
         rows="1"
-        :placeholder="t('chat.placeholder')"
+        :placeholder="placeholder"
         :disabled="sending"
         @input="onInput"
         @keydown="onKeydown"
+        @click="onCaretMove"
+        @keyup="onCaretMove"
+        @select="onCaretMove"
         @pointerdown="onHoldDown"
         @pointerup="onHoldUp"
         @pointercancel="onHoldUp"
@@ -17,7 +99,7 @@
       />
       <p v-if="holding" class="lares-composer__hold">{{ t("composer.hold") }} · {{ elapsed }}</p>
       <div class="lares-composer__bar">
-        <div class="lares-composer__pills">
+        <div v-if="!hero" class="lares-composer__pills">
           <button
             type="button"
             class="lares-composer__pill"
@@ -112,6 +194,15 @@
 
 <script>
 import { formatElapsed } from "./voice.js";
+import {
+  REFERENCE_DEBOUNCE_MS,
+  activeReference,
+  applyReference,
+  isCommandLine,
+  referenceRows,
+  visibleCommands,
+} from "./composer-tokens.js";
+import { draftImageStatus } from "@olares/lares-core/files/draft-images";
 
 const HOLD_MS = 240;
 
@@ -131,11 +222,31 @@ export default {
     voiceElapsed: { type: Number, default: 0 },
     voiceError: { type: String, default: "" },
     failures: { type: Array, default: () => [] },
+    draftImages: { type: Array, default: () => [] },
+    references: { type: Array, default: () => [] },
+    referencesLoading: { type: Boolean, default: false },
+    referencesError: { type: String, default: "" },
+    commands: { type: Array, default: null },
+    commandsError: { type: String, default: "" },
+    hero: { type: Boolean, default: false },
     t: { type: Function, required: true },
   },
-  emits: ["update:draft", "send", "model", "effort", "files", "voice", "hold-start", "hold-end"],
+  emits: [
+    "update:draft", "send", "model", "effort", "files", "voice", "hold-start", "hold-end",
+    "open-commands", "open-references", "pick-command", "remove-image",
+  ],
   data() {
-    return { holding: false, holdTimer: 0 };
+    return {
+      holding: false,
+      holdTimer: 0,
+      commandsOpen: false,
+      commandTyped: false,
+      commandIndex: 0,
+      referenceOpen: false,
+      referenceToken: null,
+      referenceIndex: 0,
+      referenceTimer: 0,
+    };
   },
   computed: {
     showSend() {
@@ -153,6 +264,10 @@ export default {
     attachLabel() {
       return this.attachPending ? this.t("button.uploading", { count: 1 }) : this.t("composer.attach");
     },
+    placeholder() {
+      if (this.hero) return this.t("chat.placeholderNewSession");
+      return this.t("chat.placeholder");
+    },
     voiceLabel() {
       if (this.voiceError) return this.voiceError;
       if (this.voicePhase === "recording") return this.t("mic.stop");
@@ -162,26 +277,156 @@ export default {
     voiceBlocked() {
       return this.voicePhase === "transcribing" || this.sending;
     },
+    referenceMenuRows() {
+      return referenceRows(this.references, this.t);
+    },
+    commandMenuRows() {
+      return visibleCommands(this.commands, this.draft, this.commandTyped);
+    },
+    overlayPointerActive() {
+      return this.referenceOpen || this.commandsOpen;
+    },
   },
   watch: {
     draft() {
       this.autosize();
     },
+    overlayPointerActive(active) {
+      if (active) window.addEventListener("pointerdown", this.onTokenPointer, true);
+      else window.removeEventListener("pointerdown", this.onTokenPointer, true);
+    },
   },
   mounted() {
     this.autosize();
   },
   beforeUnmount() {
     this.clearHold();
+    window.clearTimeout(this.referenceTimer);
+    window.removeEventListener("pointerdown", this.onTokenPointer, true);
   },
   methods: {
     onInput(event) {
-      this.$emit("update:draft", event.target.value);
+      const value = event.target.value;
+      this.$emit("update:draft", value);
+      this.trackReference(value, event.target.selectionStart ?? value.length);
+      if (isCommandLine(value)) {
+        if (!this.commandsOpen) this.$emit("open-commands");
+        this.commandTyped = true;
+        this.commandIndex = 0;
+        this.commandsOpen = true;
+      } else if (this.commandTyped) {
+        this.commandTyped = false;
+        this.commandsOpen = false;
+      }
+    },
+    onCaretMove(event) {
+      window.setTimeout(() => {
+        if (this.referenceOpen) {
+          this.trackReference(this.draft, event.target.selectionStart ?? this.draft.length);
+        }
+      }, 0);
+    },
+    onTokenPointer(event) {
+      if (this.$refs.referenceMenu?.contains(event.target)) return;
+      if (this.$refs.commandsMenu?.contains(event.target)) return;
+      const input = this.$refs.input;
+      if (event.target !== input) {
+        this.closeReferences();
+        if (this.commandTyped) {
+          this.commandsOpen = false;
+          this.commandTyped = false;
+        }
+        return;
+      }
+      window.setTimeout(() => {
+        if (this.referenceOpen) {
+          this.trackReference(this.draft, input.selectionStart ?? this.draft.length);
+        }
+      }, 0);
+    },
+    closeReferences() {
+      window.clearTimeout(this.referenceTimer);
+      this.referenceOpen = false;
+      this.referenceToken = null;
+    },
+    trackReference(value, caret) {
+      const token = activeReference(value, caret);
+      window.clearTimeout(this.referenceTimer);
+      if (!token) {
+        this.closeReferences();
+        return;
+      }
+      this.commandsOpen = false;
+      this.commandTyped = false;
+      this.referenceOpen = true;
+      this.referenceToken = token;
+      this.referenceIndex = 0;
+      this.referenceTimer = window.setTimeout(() => {
+        this.$emit("open-references", { query: token.query, quoted: token.quoted });
+      }, REFERENCE_DEBOUNCE_MS);
+    },
+    pickReference(row) {
+      if (!this.referenceToken) return;
+      const inserted = applyReference(this.draft, this.referenceToken, row);
+      this.$emit("update:draft", inserted.draft);
+      this.$nextTick(() => {
+        const input = this.$refs.input;
+        input?.focus();
+        input?.setSelectionRange(inserted.caret, inserted.caret);
+        if (row.continuation) this.trackReference(inserted.draft, inserted.caret);
+        else this.closeReferences();
+      });
+    },
+    pickCommand(command) {
+      this.commandsOpen = false;
+      this.commandTyped = false;
+      this.$emit("pick-command", command);
+    },
+    imageStatus(image) {
+      return draftImageStatus(image);
     },
     onSend() {
+      if (this.referenceOpen || this.commandsOpen) return;
       if (this.canSend) this.$emit("send");
     },
     onKeydown(event) {
+      if (this.referenceOpen) {
+        if (event.key === "Escape") {
+          event.preventDefault();
+          this.closeReferences();
+          return;
+        }
+        if ((event.key === "ArrowDown" || event.key === "ArrowUp") && this.references.length) {
+          event.preventDefault();
+          const step = event.key === "ArrowDown" ? 1 : -1;
+          this.referenceIndex = (this.referenceIndex + step + this.references.length) % this.references.length;
+          return;
+        }
+        if (event.key === "Enter" && !event.shiftKey && !event.isComposing && this.references.length) {
+          event.preventDefault();
+          this.pickReference(this.references[this.referenceIndex] ?? this.references[0]);
+          return;
+        }
+      }
+      if (this.commandsOpen) {
+        if (event.key === "Escape") {
+          event.preventDefault();
+          this.commandsOpen = false;
+          this.commandTyped = false;
+          return;
+        }
+        if ((event.key === "ArrowDown" || event.key === "ArrowUp") && this.commandMenuRows.length) {
+          event.preventDefault();
+          const step = event.key === "ArrowDown" ? 1 : -1;
+          this.commandIndex = (this.commandIndex + step + this.commandMenuRows.length) % this.commandMenuRows.length;
+          return;
+        }
+        if (event.key === "Enter" && !event.shiftKey && !event.isComposing && this.commandMenuRows.length) {
+          event.preventDefault();
+          this.pickCommand(this.commandMenuRows[this.commandIndex] ?? this.commandMenuRows[0]);
+          return;
+        }
+      }
       if (event.key !== "Enter" || event.shiftKey || event.isComposing) return;
       if (typeof window !== "undefined" && window.matchMedia?.("(pointer: coarse)").matches) return;
       event.preventDefault();
@@ -235,9 +480,12 @@ export default {
         const el = this.$refs.input;
         if (!el) return;
         el.style.height = "auto";
-        el.style.height = `${Math.min(el.scrollHeight, 160)}px`;
+        el.style.height = `${Math.min(el.scrollHeight, 176)}px`;
       });
     },
+    focus() {
+      this.$refs.input?.focus();
+    },
   },
 };
 </script>
@@ -251,7 +499,12 @@ export default {
   padding: 8px 16px calc(12px + env(safe-area-inset-bottom, 0px));
 }
 
+.lares-composer--hero {
+  padding: 0;
+}
+
 .lares-composer__card {
+  position: relative;
   display: flex;
   flex-direction: column;
   gap: 6px;
@@ -261,10 +514,208 @@ export default {
   background: var(--q-background-1);
 }
 
+.lares-composer__menu {
+  position: absolute;
+  z-index: 12;
+  right: 0;
+  bottom: calc(100% + 6px);
+  left: 0;
+  display: flex;
+  max-height: min(240px, 38vh);
+  flex-direction: column;
+  overflow: hidden;
+  border: 1px solid var(--q-separator);
+  border-radius: 14px;
+  padding: 4px;
+  background: var(--q-background-1);
+  box-shadow: 0 12px 30px rgb(0 0 0 / 16%);
+}
+
+.lares-composer__menu-scroll {
+  min-height: 0;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.lares-composer__menu-status {
+  display: flex;
+  min-height: 40px;
+  align-items: center;
+  margin: 0;
+  padding: 8px 12px;
+  color: var(--q-ink-3);
+  font-size: 15px;
+  line-height: 20px;
+}
+
+.lares-composer__menu-section {
+  margin: 0;
+  padding: 6px 12px 2px;
+  color: var(--q-ink-3);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 18px;
+}
+
+.lares-composer__menu-section:not(:first-child) {
+  margin-top: 4px;
+}
+
+.lares-composer__menu-item {
+  display: flex;
+  width: 100%;
+  min-height: 44px;
+  align-items: center;
+  gap: 8px;
+  border: 0;
+  border-radius: 10px;
+  padding: 8px 12px;
+  background: transparent;
+  color: var(--q-ink-1);
+  font: inherit;
+  font-size: 15px;
+  line-height: 20px;
+  text-align: left;
+}
+
+.lares-composer__menu-item[data-selected="true"],
+.lares-composer__menu-item:active {
+  background: var(--q-background-hover);
+}
+
+.lares-composer__menu-name {
+  max-width: 42%;
+  flex: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.lares-composer__menu-path {
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  color: var(--q-ink-3);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.lares-composer__menu-item--command {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+}
+
+.lares-composer__command-name {
+  color: var(--q-ink-1);
+  font-weight: 500;
+}
+
+.lares-composer__command-hint {
+  width: 100%;
+  overflow: hidden;
+  color: var(--q-ink-3);
+  font-size: 14px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.lares-composer__card[data-hero="true"] {
+  gap: 4px;
+  border-radius: 20px;
+  padding: 10px 14px 8px;
+  background: var(--q-background-2);
+}
+
+.lares-composer__card[data-hero="true"] .lares-composer__input {
+  min-height: 44px;
+  padding: 0;
+  font-size: 16px;
+  line-height: 1.45;
+}
+
+.lares-composer__card[data-hero="true"] .lares-composer__bar {
+  min-height: 28px;
+}
+
+.lares-composer__attachments {
+  display: flex;
+  gap: 8px;
+  overflow-x: auto;
+  padding: 0 0 4px;
+  scrollbar-width: none;
+}
+
+.lares-composer__attachments::-webkit-scrollbar {
+  display: none;
+}
+
+.lares-composer__attachments figure {
+  position: relative;
+  width: 72px;
+  height: 72px;
+  flex: 0 0 72px;
+  overflow: hidden;
+  margin: 0;
+  border: 1px solid var(--q-separator);
+  border-radius: 12px;
+  background: var(--q-background-3);
+}
+
+.lares-composer__attachments figure[data-status="failed"] {
+  border-color: var(--q-orange-default);
+}
+
+.lares-composer__attachment-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: opacity var(--lares-duration-normal, 220ms) var(--lares-ease-out, ease);
+}
+
+.lares-composer__attachment-overlay {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  background: rgb(0 0 0 / 42%);
+  color: var(--q-ink-on-brand);
+}
+
+.lares-composer__attachment-overlay[data-kind="error"] {
+  background: rgb(0 0 0 / 54%);
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.lares-composer__attachment-remove {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  display: grid;
+  width: 22px;
+  height: 22px;
+  place-items: center;
+  border: 0;
+  border-radius: 50%;
+  padding: 0;
+  background: rgb(0 0 0 / 58%);
+  color: white;
+}
+
+.lares-composer__attachment-remove svg {
+  width: 12px;
+  height: 12px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+}
+
 .lares-composer__input {
   width: 100%;
-  min-height: 24px;
-  max-height: 160px;
+  min-height: 28px;
+  max-height: 176px;
   resize: none;
   overflow-y: auto;
   border: 0;
@@ -280,8 +731,8 @@ export default {
 .lares-composer__hold {
   margin: 0;
   color: var(--q-blue-default);
-  font-size: 13px;
-  line-height: 18px;
+  font-size: 15px;
+  line-height: 20px;
 }
 
 .lares-composer__bar {
@@ -312,9 +763,9 @@ export default {
   padding: 0 10px 0 8px;
   background: var(--q-background-3);
   color: var(--q-ink-2);
-  font-size: 13px;
+  font-size: 15px;
   font-weight: 500;
-  line-height: 16px;
+  line-height: 18px;
   white-space: nowrap;
 }
 
@@ -399,7 +850,7 @@ export default {
 }
 
 .lares-composer__live {
-  font-size: 10px;
+  font-size: 12px;
   font-variant-numeric: tabular-nums;
 }
 
@@ -414,7 +865,7 @@ export default {
 
 .lares-composer__hint {
   margin: 0 4px;
-  font-size: 12px;
+  font-size: 14px;
   color: var(--q-ink-3);
 }
 

package/src/chat/Deliverables.vue

@@ -53,7 +53,7 @@
 </template>
 
 <script>
-import { fileName } from "@olares/lares-core/files/preview-workspace";
+import { fileName } from "@olares/lares-core/files/filename";
 
 export default {
   name: "LaresDeliverables",
@@ -79,7 +79,7 @@ export default {
 .lares-turn-media-loading {
   margin: 0;
   color: var(--q-ink-3);
-  font-size: 13px;
+  font-size: 15px;
 }
 
 .lares-turn-media-list {
@@ -109,7 +109,7 @@ export default {
   justify-content: space-between;
   gap: 12px;
   color: var(--q-ink-2);
-  font-size: 12px;
+  font-size: 14px;
 }
 
 .lares-turn-media-caption > span {
@@ -119,11 +119,21 @@ export default {
   white-space: nowrap;
 }
 
-.lares-turn-open,
-.lares-turn-file {
-  border: 0;
+.lares-turn-open {
+  height: 28px;
+  flex: none;
+  padding: 0 10px;
+  border: 1px solid var(--q-input-stroke);
+  border-radius: 14px;
   background: transparent;
-  color: var(--q-blue-default);
+  color: var(--q-ink-1);
+  cursor: pointer;
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.lares-turn-open:hover {
+  background: var(--q-background-hover);
 }
 
 .lares-turn-media-image,
@@ -144,8 +154,8 @@ export default {
   width: min(520px, 100%);
   padding: 16px;
   color: var(--q-ink-3);
-  font-size: 13px;
-  line-height: 20px;
+  font-size: 15px;
+  line-height: 22px;
 }
 
 .lares-turn-files {
@@ -153,7 +163,7 @@ export default {
   grid-template-columns: max-content minmax(0, 1fr);
   align-items: center;
   gap: 8px;
-  font-size: 13px;
+  font-size: 15px;
 }
 
 .lares-turn-files-label {
@@ -170,7 +180,9 @@ export default {
   max-width: 320px;
   padding: 4px 8px;
   overflow: hidden;
+  border: 0;
   border-radius: 6px;
+  cursor: pointer;
   background: var(--q-background-hover);
   color: var(--q-ink-2);
   text-overflow: ellipsis;