@jskit-ai/assistant-core 0.1.165 → 0.1.167

package/src/client/conversation/LongTextInlineParts.vue

@@ -0,0 +1,64 @@
+<template>
+  <template
+    v-for="(part, partIndex) in parts"
+    :key="partKey(part, partIndex)"
+  >
+    <strong v-if="part.type === 'strong'">{{ part.text }}</strong>
+    <code v-else-if="part.type === 'code'">{{ part.text }}</code>
+    <a
+      v-else-if="part.type === 'link'"
+      :href="part.href"
+      @click="handleLinkClick($event, part)"
+    >{{ part.text }}</a>
+    <span v-else>{{ part.text }}</span>
+  </template>
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+import { parseLongTextInlineParts } from "../../shared/conversation/longTextBlocks.js";
+
+const props = defineProps({
+  text: {
+    default: "",
+    type: String
+  }
+});
+const emit = defineEmits(["link-click"]);
+
+const parts = computed(() => parseLongTextInlineParts(props.text));
+
+function partKey(part, partIndex) {
+  return `${part.type}:${partIndex}:${part.text}`;
+}
+
+function handleLinkClick(event, part = {}) {
+  emit("link-click", {
+    event,
+    href: part.href || "",
+    text: part.text || ""
+  });
+}
+</script>
+
+<style scoped>
+code {
+  background: rgba(var(--v-theme-primary), 0.07);
+  border: 1px solid rgba(var(--v-theme-primary), 0.14);
+  border-radius: 3px;
+  color: rgba(var(--v-theme-on-surface), 0.9);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+  font-size: 0.9em;
+  overflow-wrap: anywhere;
+  padding: 0.02rem 0.2rem;
+  word-break: break-word;
+}
+
+span,
+strong,
+a {
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+</style>

package/src/client/conversation/LongTextPreviewBlocks.vue

@@ -0,0 +1,324 @@
+<template>
+  <div
+    class="studio-long-text-review__blocks"
+    :class="{ 'studio-long-text-review__blocks--compact': compact }"
+  >
+    <template
+      v-for="(block, blockIndex) in blocks"
+      :key="blockKey(block, blockIndex)"
+    >
+      <component
+        :is="headingTag(block.level)"
+        v-if="block.type === 'heading'"
+        class="studio-long-text-review__heading"
+      >
+        <LongTextInlineParts
+          :text="block.text"
+          @link-click="emit('link-click', $event)"
+        />
+      </component>
+      <component
+        :is="block.type"
+        v-else-if="isListBlock(block)"
+        class="studio-long-text-review__list"
+      >
+        <li
+          v-for="(item, itemIndex) in block.items"
+          :key="`item:${blockIndex}:${itemIndex}`"
+        >
+          <LongTextInlineParts
+            :text="item.text"
+            @link-click="emit('link-click', $event)"
+          />
+        </li>
+      </component>
+      <pre
+        v-else-if="block.type === 'code'"
+        class="studio-long-text-review__code"
+      ><code>{{ block.text }}</code></pre>
+      <div
+        v-else-if="block.type === 'table'"
+        class="studio-long-text-review__table-wrap"
+        role="region"
+        aria-label="Table"
+        tabindex="0"
+      >
+        <table class="studio-long-text-review__table">
+          <thead>
+            <tr>
+              <th
+                v-for="(header, columnIndex) in block.headers"
+                :key="`header:${blockIndex}:${columnIndex}`"
+                :class="tableCellClass(block, columnIndex)"
+                scope="col"
+              >
+                <LongTextInlineParts
+                  :text="header"
+                  @link-click="emit('link-click', $event)"
+                />
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="(row, rowIndex) in block.rows"
+              :key="`row:${blockIndex}:${rowIndex}`"
+            >
+              <td
+                v-for="(cell, columnIndex) in row"
+                :key="`cell:${blockIndex}:${rowIndex}:${columnIndex}`"
+                :class="tableCellClass(block, columnIndex)"
+              >
+                <LongTextInlineParts
+                  :text="cell"
+                  @link-click="emit('link-click', $event)"
+                />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <details
+        v-else-if="block.type === 'details'"
+        class="studio-long-text-review__details"
+      >
+        <summary class="studio-long-text-review__details-summary">
+          <LongTextInlineParts
+            :text="block.summary || 'Details'"
+            @link-click="emit('link-click', $event)"
+          />
+        </summary>
+        <LongTextPreviewBlocks
+          class="studio-long-text-review__details-body"
+          compact
+          :blocks="block.blocks || []"
+          @link-click="emit('link-click', $event)"
+        />
+      </details>
+      <p
+        v-else
+        class="studio-long-text-review__paragraph"
+      >
+        <LongTextInlineParts
+          :text="block.text"
+          @link-click="emit('link-click', $event)"
+        />
+      </p>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import LongTextInlineParts from "./LongTextInlineParts.vue";
+
+defineProps({
+  blocks: {
+    type: Array,
+    required: true
+  },
+  compact: {
+    type: Boolean,
+    default: false
+  }
+});
+const emit = defineEmits(["link-click"]);
+
+function isListBlock(block) {
+  return block.type === "ul" || block.type === "ol";
+}
+
+function blockKey(block, blockIndex) {
+  return `${block.type}:${blockIndex}`;
+}
+
+function headingTag(level) {
+  if (level <= 1) {
+    return "h3";
+  }
+  if (level === 2) {
+    return "h4";
+  }
+  return "h5";
+}
+
+function tableCellClass(block = {}, columnIndex = 0) {
+  const alignment = Array.isArray(block.alignments) ? block.alignments[columnIndex] : "";
+  return {
+    "studio-long-text-review__table-cell--center": alignment === "center",
+    "studio-long-text-review__table-cell--right": alignment === "right"
+  };
+}
+</script>
+
+<style scoped>
+.studio-long-text-review__blocks {
+  color: rgb(var(--v-theme-on-surface));
+  display: grid;
+  gap: 0.36rem;
+  line-height: 1.4;
+  max-width: 100%;
+  min-width: 0;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.studio-long-text-review__blocks--compact {
+  gap: 0.24rem;
+  line-height: 1.28;
+}
+
+.studio-long-text-review__heading {
+  font-weight: 760;
+  letter-spacing: 0;
+  line-height: 1.15;
+  margin: 0;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+h3.studio-long-text-review__heading {
+  font-size: 1.1rem;
+}
+
+h4.studio-long-text-review__heading {
+  font-size: 0.98rem;
+}
+
+h5.studio-long-text-review__heading {
+  font-size: 0.9rem;
+}
+
+.studio-long-text-review__paragraph {
+  font-size: 0.88rem;
+  margin: 0;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.studio-long-text-review__blocks--compact .studio-long-text-review__paragraph {
+  font-size: 0.8rem;
+}
+
+.studio-long-text-review__list {
+  display: grid;
+  gap: 0.16rem;
+  margin: 0;
+  min-width: 0;
+  overflow-wrap: anywhere;
+  padding-inline-start: 1.3rem;
+}
+
+.studio-long-text-review__list li {
+  font-size: 0.92rem;
+  line-height: 1.36;
+  min-width: 0;
+  overflow-wrap: anywhere;
+  padding-inline-start: 0.1rem;
+  word-break: break-word;
+}
+
+.studio-long-text-review__blocks--compact .studio-long-text-review__list li {
+  font-size: 0.8rem;
+}
+
+.studio-long-text-review__code {
+  background: rgba(var(--v-theme-surface-variant), 0.58);
+  border: 1px solid rgba(var(--v-border-color), 0.26);
+  border-radius: 8px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+  font-size: 0.82rem;
+  line-height: 1.36;
+  margin: 0;
+  max-width: 100%;
+  min-width: 0;
+  overflow: auto;
+  padding: 0.46rem 0.55rem;
+  white-space: pre;
+}
+
+.studio-long-text-review__table-wrap {
+  border: 1px solid rgba(var(--v-border-color), 0.28);
+  border-radius: 8px;
+  inline-size: fit-content;
+  margin-block: 0.35rem;
+  max-width: 100%;
+  min-width: 0;
+  overflow: auto;
+}
+
+.studio-long-text-review__table-wrap:focus-visible {
+  outline: 2px solid rgb(var(--v-theme-primary));
+  outline-offset: -2px;
+}
+
+.studio-long-text-review__table {
+  border-collapse: separate;
+  border-spacing: 0;
+  font-size: 0.88rem;
+  inline-size: auto;
+  line-height: 1.45;
+  overflow-wrap: break-word;
+  word-break: normal;
+}
+
+.studio-long-text-review__table th,
+.studio-long-text-review__table td {
+  border-bottom: 1px solid rgba(var(--v-border-color), 0.22);
+  max-inline-size: 28rem;
+  padding: 0.55rem 0.75rem;
+  text-align: left;
+  vertical-align: top;
+}
+
+.studio-long-text-review__table th {
+  background: rgba(var(--v-theme-surface-variant), 0.48);
+  color: rgb(var(--v-theme-on-surface));
+  font-weight: 760;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.studio-long-text-review__table tbody tr:last-child td {
+  border-bottom: 0;
+}
+
+.studio-long-text-review__table :deep(span),
+.studio-long-text-review__table :deep(strong),
+.studio-long-text-review__table :deep(a),
+.studio-long-text-review__table :deep(code) {
+  overflow-wrap: break-word;
+  word-break: normal;
+}
+
+.studio-long-text-review__table-cell--right {
+  font-variant-numeric: tabular-nums;
+  text-align: right !important;
+}
+
+.studio-long-text-review__table-cell--center {
+  text-align: center !important;
+}
+
+.studio-long-text-review__details {
+  border: 1px solid rgba(var(--v-border-color), 0.34);
+  border-radius: 8px;
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.studio-long-text-review__details-summary {
+  background: rgba(var(--v-theme-surface-variant), 0.48);
+  cursor: pointer;
+  font-size: 0.82rem;
+  font-weight: 650;
+  line-height: 1.2;
+  list-style-position: inside;
+  padding: 0.42rem 0.55rem;
+}
+
+.studio-long-text-review__details-body {
+  padding: 0.5rem 0.6rem 0.58rem;
+}
+</style>

package/src/client/conversation/index.js

@@ -0,0 +1,9 @@
+export { default as AssistantConversationElement } from "./AssistantConversationElement.vue";
+export { default as AssistantTranscript } from "./AssistantTranscript.vue";
+export { default as AssistantPromptInput } from "./AssistantPromptInput.vue";
+export { default as AssistantComposerActions } from "./AssistantComposerActions.vue";
+export { default as AssistantProgress } from "./AssistantProgress.vue";
+export { default as LongTextPreviewBlocks } from "./LongTextPreviewBlocks.vue";
+export { default as LongTextInlineParts } from "./LongTextInlineParts.vue";
+export { useScrollToBottom } from "./useScrollToBottom.js";
+export { createAssistantTextSubmission } from "./submitText.js";

package/src/client/conversation/submitText.js

@@ -0,0 +1,29 @@
+/** A companion's text enters the same draft and send action as keyboard input. */
+export function createAssistantTextSubmission({ getState, setDraft, submit, afterDraftChange = async () => {} }) {
+  let revision = 0;
+  return async function submitText(text, { sendImmediately = true, signal, timeoutMs = 2000 } = {}) {
+    const request = ++revision;
+    const value = String(text || "").trim();
+    const initial = getState();
+    if (!value || !initial.active || signal?.aborted) throw new Error("The chat composer is not ready yet.");
+    const hasDraft = Boolean(initial.draft?.trim());
+    const writtenValue = hasDraft ? `${initial.draft}\n${value}` : value;
+    setDraft(writtenValue);
+    if (!sendImmediately || hasDraft) return "draft";
+    await afterDraftChange();
+    const deadline = Date.now() + timeoutMs;
+    while (true) {
+      const state = getState();
+      if (signal?.aborted || request !== revision || !state.active || state.id !== initial.id || state.draft !== writtenValue) {
+        throw new Error("The chat changed before sending. Review the draft before sending.");
+      }
+      if (state.canSend) {
+        const result = await submit();
+        if (result === false) throw new Error("Your words are in the chat box, but this conversation cannot send yet.");
+        return state.turnActive ? "steer" : "send";
+      }
+      if (Date.now() >= deadline) throw new Error("Your words are in the chat box, but this conversation cannot send yet.");
+      await new Promise((resolve) => setTimeout(resolve, 16));
+    }
+  };
+}

package/src/client/conversation/useScrollToBottom.js

@@ -0,0 +1,151 @@
+import { nextTick, onBeforeUnmount, unref } from "vue";
+
+const DEFAULT_SETTLE_DELAYS_MS = [0, 80];
+
+function readElement(value) {
+  return unref(value) || null;
+}
+
+function hasWindowTimer(name) {
+  return typeof window !== "undefined" && typeof window[name] === "function";
+}
+
+function waitForLayoutFrame() {
+  if (typeof window === "undefined" || typeof window.requestAnimationFrame !== "function") {
+    return Promise.resolve();
+  }
+
+  return new Promise((resolve) => {
+    window.requestAnimationFrame(resolve);
+  });
+}
+
+function normalizedScrollBehavior(value = "") {
+  return value === "smooth" ? "smooth" : "auto";
+}
+
+function scrollElementToBottom(targetElement, behavior = "auto") {
+  if (behavior === "smooth" && typeof targetElement.scrollTo === "function") {
+    targetElement.scrollTo({
+      behavior,
+      top: targetElement.scrollHeight
+    });
+    return;
+  }
+  targetElement.scrollTop = targetElement.scrollHeight;
+}
+
+function useScrollToBottom({
+  anchor = null,
+  enabled = true,
+  scrollAnchorIntoView = true,
+  settleDelaysMs = DEFAULT_SETTLE_DELAYS_MS,
+  target
+} = {}) {
+  const scheduledTimers = new Set();
+  let disposed = false;
+  let scheduleVersion = 0;
+
+  function isEnabled() {
+    return unref(enabled) !== false;
+  }
+
+  function clearScheduledTimers() {
+    if (hasWindowTimer("clearTimeout")) {
+      scheduledTimers.forEach((timer) => {
+        window.clearTimeout(timer);
+      });
+    }
+    scheduledTimers.clear();
+  }
+
+  function clearScheduledScrolls() {
+    scheduleVersion += 1;
+    clearScheduledTimers();
+  }
+
+  function scrollNow(options = {}) {
+    if (disposed || !isEnabled()) {
+      return;
+    }
+
+    const targetElement = readElement(target);
+    if (!targetElement) {
+      return;
+    }
+
+    const behavior = normalizedScrollBehavior(options?.behavior);
+    scrollElementToBottom(targetElement, behavior);
+    if (scrollAnchorIntoView !== false) {
+      const anchorOptions = {
+        block: "end"
+      };
+      if (behavior === "smooth") {
+        anchorOptions.behavior = behavior;
+      }
+      readElement(anchor)?.scrollIntoView?.(anchorOptions);
+    }
+    scrollElementToBottom(targetElement, behavior);
+  }
+
+  function scheduleScroll(delayMs, options = {}, version = scheduleVersion) {
+    if (
+      disposed ||
+      version !== scheduleVersion ||
+      !isEnabled() ||
+      !hasWindowTimer("setTimeout")
+    ) {
+      return;
+    }
+
+    const timer = window.setTimeout(() => {
+      scheduledTimers.delete(timer);
+      if (version !== scheduleVersion) {
+        return;
+      }
+      scrollNow(options);
+    }, delayMs);
+    scheduledTimers.add(timer);
+  }
+
+  async function scrollAfterLayout(options = {}) {
+    if (disposed || !isEnabled()) {
+      return;
+    }
+    const version = scheduleVersion + 1;
+    scheduleVersion = version;
+    clearScheduledTimers();
+
+    await nextTick();
+    if (version !== scheduleVersion) {
+      return;
+    }
+    scrollNow(options);
+
+    await waitForLayoutFrame();
+    if (version !== scheduleVersion) {
+      return;
+    }
+    scrollNow(options);
+
+    clearScheduledTimers();
+    settleDelaysMs.forEach((delayMs) => {
+      scheduleScroll(delayMs, options, version);
+    });
+  }
+
+  onBeforeUnmount(() => {
+    disposed = true;
+    clearScheduledScrolls();
+  });
+
+  return {
+    clearScheduledScrolls,
+    scrollAfterLayout,
+    scrollNow
+  };
+}
+
+export {
+  useScrollToBottom
+};