@olares/lares-mobile 0.15.0

package/src/chat/HistoryPanel.vue

@@ -0,0 +1,227 @@
+<template>
+  <div
+    class="lares-history"
+    :data-open="open ? 'true' : 'false'"
+    :inert="!open"
+    :aria-hidden="!open"
+  >
+    <div class="lares-history__backdrop" @click="$emit('close')" />
+    <aside class="lares-history__sheet" role="dialog" :aria-label="t('bar.history')">
+      <header class="lares-history__head">
+        <h2 class="lares-history__title">{{ t("bar.history") }}</h2>
+      </header>
+      <div class="lares-history__list">
+        <div
+          v-if="pending"
+          class="lares-history__skeleton"
+          role="status"
+          :aria-label="t('history.loading')"
+        >
+          <section v-for="block in [1, 2]" :key="block" class="lares-history__section">
+            <span class="lares-history__bone lares-history__bone--label" />
+            <span class="lares-history__bone" />
+            <span class="lares-history__bone" />
+            <span class="lares-history__bone" />
+            <span class="lares-history__bone" />
+          </section>
+        </div>
+        <p v-else-if="sections.length === 0" class="lares-history__empty">{{ t("history.empty") }}</p>
+        <section v-for="section in sections" :key="section.id" class="lares-history__section">
+          <h3 class="lares-history__label">{{ t(section.key) }}</h3>
+          <button
+            v-for="row in section.rows"
+            :key="row.sessionId"
+            type="button"
+            class="lares-history__item"
+            :data-current="row.sessionId === sessionId ? 'true' : 'false'"
+            @click="$emit('pick', row.sessionId)"
+          >
+            {{ row.title || t("history.untitled") }}
+          </button>
+        </section>
+      </div>
+    </aside>
+  </div>
+</template>
+
+<script>
+import { groupSessionsByRecency, visibleHistorySessions } from "@olares/lares-core/larepass/chat";
+
+export default {
+  name: "LaresHistoryPanel",
+  props: {
+    open: { type: Boolean, default: false },
+    sessions: { type: Array, default: () => [] },
+    sessionId: { type: String, default: "" },
+    ready: { type: Boolean, default: false },
+    t: { type: Function, required: true },
+  },
+  emits: ["close", "pick"],
+  computed: {
+    pending() {
+      return !this.ready && this.sections.length === 0;
+    },
+    sections() {
+      return groupSessionsByRecency(visibleHistorySessions(this.sessions, this.sessionId));
+    },
+  },
+};
+</script>
+
+<style scoped>
+.lares-history {
+  position: absolute;
+  inset: 0;
+  z-index: 4;
+  pointer-events: none;
+}
+
+.lares-history[data-open="true"] {
+  pointer-events: auto;
+}
+
+.lares-history__backdrop {
+  position: absolute;
+  inset: 0;
+  background: var(--q-background-alpha);
+  opacity: 0;
+  transition: opacity 0.28s cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+.lares-history[data-open="true"] .lares-history__backdrop {
+  opacity: 1;
+}
+
+.lares-history__sheet {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  width: min(80vw, 320px);
+  height: 100%;
+  flex-direction: column;
+  min-height: 0;
+  background: var(--q-background-1);
+  box-shadow: 8px 0 32px rgb(0 0 0 / 8%);
+  transform: translateX(-100%);
+  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+.lares-history[data-open="true"] .lares-history__sheet {
+  transform: translateX(0);
+}
+
+.lares-history__head {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  height: 56px;
+  padding: 0 20px;
+}
+
+.lares-history__title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 24px;
+}
+
+.lares-history__list {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  flex-direction: column;
+  gap: 16px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 4px 12px 24px;
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
+}
+
+.lares-history__section {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.lares-history__label {
+  margin: 0;
+  padding: 8px 16px 4px;
+  color: var(--q-ink-3);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+}
+
+.lares-history__empty {
+  margin: 12px 8px;
+  font-size: 13px;
+  color: var(--q-ink-3);
+}
+
+.lares-history__skeleton {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.lares-history__bone {
+  display: block;
+  height: 44px;
+  border-radius: 12px;
+  background: var(--q-background-3);
+  animation: lares-history-pulse 1.2s ease-in-out infinite;
+}
+
+.lares-history__bone--label {
+  width: 72px;
+  height: 12px;
+  margin: 8px 16px 4px;
+  border-radius: 6px;
+}
+
+.lares-history__section .lares-history__bone:nth-child(2) { width: 88%; }
+.lares-history__section .lares-history__bone:nth-child(3) { width: 72%; }
+.lares-history__section .lares-history__bone:nth-child(4) { width: 80%; }
+.lares-history__section .lares-history__bone:nth-child(5) { width: 64%; }
+
+@keyframes lares-history-pulse {
+  50% { opacity: 0.45; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .lares-history__bone {
+    animation: none;
+  }
+}
+
+.lares-history__item {
+  width: 100%;
+  overflow: hidden;
+  border: 0;
+  border-radius: 12px;
+  padding: 12px 16px;
+  text-align: left;
+  background: transparent;
+  color: var(--q-ink-1);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.lares-history__item[data-current="true"] {
+  background: var(--q-background-3);
+}
+
+.lares-history__item:active {
+  background: var(--q-background-hover);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .lares-history__backdrop,
+  .lares-history__sheet {
+    transition: none;
+  }
+}
+</style>

package/src/chat/MessageActions.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="lares-actions" role="toolbar" :aria-label="t('action.bar')">
+    <div class="lares-actions__left">
+      <button type="button" :aria-label="copied ? t('action.copied') : t('action.copy')" @click="copy">
+        <svg viewBox="0 0 24 24" aria-hidden="true">
+          <rect x="9" y="9" width="11" height="13" rx="2" />
+          <path d="M6 16H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+        </svg>
+      </button>
+      <button
+        type="button"
+        :aria-label="t('action.like')"
+        :aria-pressed="reaction === 'like' ? 'true' : 'false'"
+        :data-on="reaction === 'like' ? 'true' : 'false'"
+        @click="$emit('react', reaction === 'like' ? '' : 'like')"
+      >
+        <svg viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M7 11v10H4a1 1 0 0 1-1-1v-8a1 1 0 0 1 1-1h3Zm0 0 4.2-8.1A2.2 2.2 0 0 1 15.2 4v5H20a2 2 0 0 1 2 2.3l-1.2 8A2 2 0 0 1 18.8 21H7" />
+        </svg>
+      </button>
+      <button
+        type="button"
+        :aria-label="t('action.dislike')"
+        :aria-pressed="reaction === 'dislike' ? 'true' : 'false'"
+        :data-on="reaction === 'dislike' ? 'true' : 'false'"
+        @click="$emit('react', reaction === 'dislike' ? '' : 'dislike')"
+      >
+        <svg viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M17 13V3h3a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-3Zm0 0-4.2 8.1A2.2 2.2 0 0 1 8.8 20v-5H4a2 2 0 0 1-2-2.3l1.2-8A2 2 0 0 1 5.2 3H17" />
+        </svg>
+      </button>
+      <button type="button" :aria-label="t('action.share')" @click="share">
+        <svg viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M4 20v-7a4 4 0 0 1 4-4h12" />
+          <path d="m16 5 4 4-4 4" />
+        </svg>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "LaresMessageActions",
+  props: {
+    text: { type: String, default: "" },
+    reaction: { type: String, default: "" },
+    t: { type: Function, required: true },
+  },
+  emits: ["react"],
+  data() {
+    return { copied: false, copyTimer: 0 };
+  },
+  beforeUnmount() {
+    if (this.copyTimer) clearTimeout(this.copyTimer);
+  },
+  methods: {
+    async copy() {
+      try {
+        await navigator.clipboard.writeText(this.text);
+        this.copied = true;
+        if (this.copyTimer) clearTimeout(this.copyTimer);
+        this.copyTimer = setTimeout(() => {
+          this.copied = false;
+        }, 1600);
+      } catch {
+        // clipboard may be blocked
+      }
+    },
+    async share() {
+      if (typeof navigator.share === "function") {
+        try {
+          await navigator.share({ text: this.text });
+          return;
+        } catch (err) {
+          if (err?.name === "AbortError") return;
+        }
+      }
+      await this.copy();
+    },
+  },
+};
+</script>
+
+<style scoped>
+.lares-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 2px;
+}
+
+.lares-actions__left {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.lares-actions button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: 0;
+  border-radius: 8px;
+  padding: 0;
+  background: transparent;
+  color: var(--q-ink-3);
+}
+
+.lares-actions button[data-on="true"] {
+  color: var(--q-blue-default);
+}
+
+.lares-actions button:active {
+  background: var(--q-btn-bg-pressed);
+}
+
+.lares-actions svg {
+  width: 18px;
+  height: 18px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.7;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+</style>

package/src/chat/QuestionCard.vue

@@ -0,0 +1,126 @@
+<template>
+  <section class="lares-question" :aria-label="heading">
+    <p class="lares-question__heading">{{ heading }}</p>
+    <p class="lares-question__prompt">{{ prompt }}</p>
+    <p v-if="detail" class="lares-question__detail">{{ detail }}</p>
+    <div class="lares-question__options">
+      <button
+        v-for="option in options"
+        :key="option.label"
+        type="button"
+        class="lares-question__option"
+        :disabled="disabled"
+        @click="$emit('pick', option.label)"
+      >
+        <span class="lares-question__label">{{ option.label }}</span>
+        <span v-if="option.description" class="lares-question__hint">{{ option.description }}</span>
+      </button>
+    </div>
+    <p v-if="hint" class="lares-question__wait">{{ hint }}</p>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "LaresQuestionCard",
+  props: {
+    questions: { type: Array, default: () => [] },
+    rpcId: { type: String, default: "" },
+    busy: { type: Boolean, default: false },
+    t: { type: Function, required: true },
+  },
+  emits: ["pick"],
+  computed: {
+    current() {
+      return this.questions[0] || null;
+    },
+    heading() {
+      return this.current?.header || this.t("question.title");
+    },
+    prompt() {
+      return this.current?.question || "";
+    },
+    detail() {
+      return this.current?.detail || "";
+    },
+    options() {
+      return Array.isArray(this.current?.options) ? this.current.options : [];
+    },
+    disabled() {
+      return this.busy || !this.rpcId || !this.current;
+    },
+    hint() {
+      if (this.busy) return this.t("question.busy");
+      if (!this.rpcId) return this.t("question.waiting");
+      return "";
+    },
+  },
+};
+</script>
+
+<style scoped>
+.lares-question {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 10px;
+  margin: 8px 0;
+  padding: 12px;
+  border: 1px solid var(--q-separator);
+  border-radius: 14px;
+  background: var(--q-background-1);
+}
+
+.lares-question__heading {
+  margin: 0;
+  color: var(--q-ink-2);
+  font-size: 12px;
+}
+
+.lares-question__prompt {
+  margin: 0;
+  color: var(--q-ink-1);
+  font-size: 15px;
+  font-weight: 500;
+}
+
+.lares-question__detail,
+.lares-question__wait {
+  margin: 0;
+  color: var(--q-ink-3);
+  font-size: 13px;
+}
+
+.lares-question__options {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.lares-question__option {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 2px;
+  padding: 10px 12px;
+  border: 1px solid var(--q-separator);
+  border-radius: 10px;
+  background: var(--q-background-hover);
+  color: inherit;
+  text-align: left;
+}
+
+.lares-question__option:disabled {
+  opacity: 0.55;
+}
+
+.lares-question__label {
+  font-size: 14px;
+  color: var(--q-ink-1);
+}
+
+.lares-question__hint {
+  font-size: 12px;
+  color: var(--q-ink-3);
+}
+</style>

package/src/chat/StageIcon.vue

@@ -0,0 +1,43 @@
+<template>
+  <svg
+    class="lares-stage-icon"
+    :viewBox="glyph.viewBox"
+    :width="14"
+    :height="14"
+    aria-hidden="true"
+    fill="none"
+  >
+    <path
+      v-for="(p, i) in glyph.paths"
+      :key="i"
+      :d="p.d"
+      :fill-rule="p.fillRule"
+      :clip-rule="p.clipRule"
+      :transform="p.transform"
+      fill="currentColor"
+    />
+  </svg>
+</template>
+
+<script>
+import { GLYPHS } from "./stage-icons.js";
+
+export default {
+  name: "LaresStageIcon",
+  props: {
+    name: { type: String, required: true },
+  },
+  computed: {
+    glyph() {
+      return GLYPHS[this.name] || GLYPHS.sparkle;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.lares-stage-icon {
+  display: block;
+  flex: none;
+}
+</style>

package/src/chat/StageRow.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="lares-stage" :data-kind="kind" :data-open="open ? 'true' : 'false'">
+    <button type="button" class="lares-stage__row" :aria-expanded="open" @click="open = !open">
+      <span class="lares-stage__leading" aria-hidden="true">
+        <LaresStageIcon :name="iconName" />
+      </span>
+      <span class="lares-stage__title">{{ title }}</span>
+      <template v-if="summary">
+        <span class="lares-stage__sep" aria-hidden="true" />
+        <span class="lares-stage__summary">{{ summary }}</span>
+      </template>
+    </button>
+    <pre v-if="open && body" class="lares-stage__body">{{ body }}</pre>
+  </div>
+</template>
+
+<script>
+import { stageIconOf } from "./stage-icons.js";
+import LaresStageIcon from "./StageIcon.vue";
+
+export default {
+  name: "LaresStageRow",
+  components: { LaresStageIcon },
+  props: {
+    kind: { type: String, default: "" },
+    variant: { type: String, default: "" },
+    title: { type: String, required: true },
+    summary: { type: String, default: "" },
+    body: { type: String, default: "" },
+  },
+  data() {
+    return { open: false };
+  },
+  computed: {
+    iconName() {
+      return stageIconOf(this.kind, this.variant);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.lares-stage {
+  min-width: 0;
+  max-width: 100%;
+}
+
+.lares-stage__row {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+  min-height: 24px;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
+}
+
+.lares-stage__leading {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  margin-right: 6px;
+  color: var(--q-ink-2);
+}
+
+.lares-stage__title {
+  flex: none;
+  color: var(--q-ink-2);
+}
+
+.lares-stage__title,
+.lares-stage__summary {
+  min-width: 0;
+  overflow: hidden;
+  font-size: 14px;
+  line-height: 24px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.lares-stage[data-kind="retry"] .lares-stage__title {
+  flex: auto;
+}
+
+.lares-stage__summary {
+  flex: auto;
+  color: var(--q-ink-2);
+}
+
+.lares-stage__sep {
+  flex: none;
+  width: 2px;
+  height: 2px;
+  margin: 0 8px;
+  border-radius: 1px;
+  background: var(--q-ink-2);
+}
+
+.lares-stage__body {
+  box-sizing: border-box;
+  min-width: 0;
+  max-width: 100%;
+  max-height: 141px;
+  margin: 4px 0 0 22px;
+  border-radius: 8px;
+  padding: 10px 12px;
+  overflow: auto;
+  background: var(--q-background-3);
+  color: var(--q-ink-2);
+  font: 400 11px/16px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.lares-stage[data-kind="think"] .lares-stage__body {
+  max-height: none;
+  margin: 6px 0 2px 2px;
+  border-radius: 0;
+  border-left: 2px solid var(--q-input-stroke);
+  padding: 0 0 0 12px;
+  background: transparent;
+  font: 400 13px/1.6 inherit;
+}
+</style>