@jxsuite/studio 0.34.0 → 0.36.0

package/src/panels/ai-chat/chat-view.ts

@@ -0,0 +1,250 @@
+/// <reference lib="dom" />
+/**
+ * Chat-view.js — the active-conversation templates: header and message list.
+ *
+ * Message-row anatomy: user messages render as right-aligned bubbles (attached-context
+ * blocks become chips), assistant messages render sanitized markdown plus tool-call
+ * chips, tool messages surface failures only (ADR §11.3), the streaming tail renders
+ * as plain text with a cursor (markdown parses once on finalize), and chat errors get
+ * a danger row with recovery advice. Pure templates — state lives in ai-panel.
+ *
+ * @license MIT
+ */
+
+import { html, nothing } from "lit-html";
+import type { TemplateResult } from "lit-html";
+import { ref } from "lit-html/directives/ref.js";
+import type { Message, ToolCallRecord } from "@jxsuite/ai/chat-state";
+import { splitAttachedContext } from "./attached-context";
+import { renderMarkdown } from "./chat-markdown";
+
+// ─── Helpers (moved from ai-panel.ts) ────────────────────────────────────────
+
+/**
+ * Parse a tool result message content (JSON string) into its success/error shape. Returns null if
+ * the content isn't a valid tool result.
+ *
+ * @param {string} content
+ * @returns {{ success: boolean; error?: string; summary?: string } | null}
+ */
+export function tryParseToolResult(
+  content: string,
+): { success: boolean; error?: string; summary?: string } | null {
+  try {
+    const parsed = JSON.parse(content) as { success?: unknown; error?: string; summary?: string };
+    if (parsed && typeof parsed.success === "boolean") {
+      return parsed as { success: boolean; error?: string; summary?: string };
+    }
+  } catch {
+    /* Not JSON — not a tool result */
+  }
+  return null;
+}
+
+/**
+ * Label for an assistant tool call: the tool name plus the target path when present.
+ *
+ * @param {{ name: string; arguments: string }} tc
+ * @returns {string}
+ */
+export function formatToolLabel(tc: { name: string; arguments: string }): string {
+  let detail = "";
+  try {
+    const args = (tc.arguments ? JSON.parse(tc.arguments) : {}) as {
+      path?: unknown;
+      parentPath?: unknown;
+    };
+    if (Array.isArray(args.path)) {
+      detail = `: ${JSON.stringify(args.path)}`;
+    } else if (Array.isArray(args.parentPath)) {
+      detail = `: ${JSON.stringify(args.parentPath)}`;
+    }
+  } catch {
+    /* Partial/unparsed args — show name only */
+  }
+  return `${tc.name}${detail}`;
+}
+
+/**
+ * Return actionable advice for common AI assistant errors so the user knows how to recover instead
+ * of just seeing a raw error message.
+ *
+ * @param {string} error
+ * @returns {string}
+ */
+export function formatErrorAdvice(error: string): string {
+  const lower = error.toLowerCase();
+  if (lower.includes("no api key") || lower.includes("401")) {
+    return "Use the settings button below the message box to add an OpenAI-compatible API key.";
+  }
+  if (lower.includes("network error") || lower.includes("fetch")) {
+    return "Check that the dev server is running and reachable.";
+  }
+  if (lower.includes("429") || lower.includes("rate limit")) {
+    return "The API rate limit was hit. Wait a moment and try again.";
+  }
+  if (lower.includes("500") || lower.includes("internal")) {
+    return "The upstream API returned a server error. Try again in a moment.";
+  }
+  return "";
+}
+
+// ─── Header ─────────────────────────────────────────────────────────────────
+
+export interface ChatHeaderOptions {
+  /** The open session's title, or null for a fresh unsaved chat. */
+  title: string | null;
+  streaming: boolean;
+  onShowSessions: () => void;
+  onNewChat: () => void;
+}
+
+/** The chat header: history button, session title, streaming spinner, New Chat. */
+export function renderChatHeader(opts: ChatHeaderOptions): TemplateResult {
+  return html`
+    <div class="ai-chat-header">
+      <sp-action-button size="s" quiet title="Chat history" @click=${opts.onShowSessions}>
+        <sp-icon-history slot="icon"></sp-icon-history>
+      </sp-action-button>
+      <span class="ai-chat-title">${opts.title ?? "New chat"}</span>
+      <span class="ai-header-spacer"></span>
+      ${opts.streaming
+        ? html`<sp-progress-circle size="s" indeterminate></sp-progress-circle>`
+        : nothing}
+      <sp-action-button size="s" quiet title="New chat" @click=${opts.onNewChat}>
+        <sp-icon-add slot="icon"></sp-icon-add>
+      </sp-action-button>
+    </div>
+  `;
+}
+
+// ─── Message rows ───────────────────────────────────────────────────────────
+
+function renderUserMessage(msg: Message): TemplateResult {
+  const { body, contextLines } = splitAttachedContext(msg.content);
+  return html`
+    <div class="ai-msg-user">
+      <div class="ai-msg-user-body">${body}</div>
+      ${contextLines.length > 0
+        ? html`
+            <div class="ai-msg-context-chips">
+              ${contextLines.map((line) => html`<span class="ai-context-chip">${line}</span>`)}
+            </div>
+          `
+        : nothing}
+    </div>
+  `;
+}
+
+function renderToolChips(toolCalls: ToolCallRecord[]): TemplateResult | typeof nothing {
+  if (toolCalls.length === 0) {
+    return nothing;
+  }
+  return html`
+    <div class="ai-msg-tools">
+      ${toolCalls.map(
+        (tc) => html`
+          <span class="ai-tool-chip">
+            <sp-icon-gears size="xs"></sp-icon-gears>
+            ${formatToolLabel(tc)}
+          </span>
+        `,
+      )}
+    </div>
+  `;
+}
+
+function renderAssistantMessage(msg: Message): TemplateResult | typeof nothing {
+  const toolCalls = msg.toolCalls ?? [];
+  if (!msg.content && toolCalls.length === 0) {
+    return nothing;
+  }
+  return html`
+    <div class="ai-msg-assistant">
+      ${msg.content ? renderMarkdown(msg.id, msg.content) : nothing} ${renderToolChips(toolCalls)}
+    </div>
+  `;
+}
+
+function renderToolMessage(msg: Message): TemplateResult | typeof nothing {
+  // Show only failed tool results so the user knows why an edit didn't land
+  // (ADR §11.3). Successful tool results stay hidden to reduce noise.
+  const parsed = tryParseToolResult(msg.content);
+  if (!parsed || parsed.success) {
+    return nothing;
+  }
+  return html`<div class="ai-msg-tool-error">⚠️ ${parsed.error || "Tool call failed"}</div>`;
+}
+
+function renderStreamingTail(msg: Message): TemplateResult {
+  if (!msg.content) {
+    return html`
+      <div class="ai-msg-typing">
+        <span></span>
+        <span></span>
+        <span></span>
+      </div>
+    `;
+  }
+  return html`
+    <div class="ai-msg-assistant">
+      <span class="ai-msg-streaming">${msg.content}</span>
+      ${renderToolChips(msg.toolCalls ?? [])}
+    </div>
+  `;
+}
+
+// ─── Message list ───────────────────────────────────────────────────────────
+
+export interface MessageListOptions {
+  messages: Message[];
+  /** ChatState status — "streaming" renders the tail live. */
+  status: string;
+  error: string | null;
+  onScroll: (e: Event) => void;
+  /** Ref to the scrolling element, for stick-to-bottom maintenance. */
+  listRef: (el: Element | undefined) => void;
+}
+
+/** The scrollable message list — THE scroller of the chat view. */
+export function renderMessageList(opts: MessageListOptions): TemplateResult {
+  const { messages, status } = opts;
+  const lastIdx = messages.length - 1;
+  return html`
+    <div class="ai-chat-messages" ${ref(opts.listRef)} @scroll=${opts.onScroll}>
+      ${messages.length === 0 && status !== "streaming"
+        ? html`
+            <div class="ai-chat-empty">
+              Ask the assistant to build or edit this page — it can add sections, restyle elements,
+              and wire up components.
+            </div>
+          `
+        : nothing}
+      ${messages.map((msg, i) => {
+        if (msg.role === "user") {
+          return renderUserMessage(msg);
+        }
+        if (msg.role === "tool") {
+          return renderToolMessage(msg);
+        }
+        if (msg.role === "assistant") {
+          if (status === "streaming" && i === lastIdx) {
+            return renderStreamingTail(msg);
+          }
+          return renderAssistantMessage(msg);
+        }
+        return nothing;
+      })}
+      ${status !== "streaming" && opts.error
+        ? html`
+            <div class="ai-msg-error">
+              <div>${opts.error}</div>
+              ${formatErrorAdvice(opts.error)
+                ? html`<div class="ai-msg-error-advice">${formatErrorAdvice(opts.error)}</div>`
+                : nothing}
+            </div>
+          `
+        : nothing}
+    </div>
+  `;
+}

package/src/panels/ai-chat/composer.ts

@@ -0,0 +1,315 @@
+/// <reference lib="dom" />
+/**
+ * Composer.js — the sticky bottom chat input (VSCode-Copilot style).
+ *
+ * Auto-growing textarea (Enter sends, Shift+Enter newline) above a control row with a
+ * context-attach menu, model picker, settings button, and a Send button that morphs
+ * into Stop while streaming. Closure factory (precedent: createAiCredentialsForm) so
+ * draft state never leaks between hosts.
+ *
+ * The textarea is intentionally uncontrolled (no .value binding): lit re-renders reuse
+ * the DOM node, so streaming updates never clobber the draft, focus, or caret — the
+ * reason this panel can re-render without the panel-scheduler's focus guard.
+ *
+ * @license MIT
+ */
+
+import { html, nothing } from "lit-html";
+import type { TemplateResult } from "lit-html";
+import { live } from "lit-html/directives/live.js";
+import { ref } from "lit-html/directives/ref.js";
+import { getNodeAtPath } from "../../state";
+import { fetchAvailableModels } from "../../services/ai-models";
+import { getModel, setModel } from "../../services/ai-settings";
+import { activeTab } from "../../workspace/workspace";
+import { buildMessageWithContext } from "./attached-context";
+import type { ContextChip } from "./attached-context";
+import type { AiModel } from "../../services/ai-models";
+import type { JxMutableNode, JxPath } from "@jxsuite/schema/types";
+
+/** Tallest the textarea auto-grows before it scrolls internally. */
+const MAX_INPUT_HEIGHT = 120;
+const RETRY_MODELS = "__retry_models__";
+
+export interface ComposerOptions {
+  /** Receives the full message content (typed text + serialized context). */
+  onSend: (text: string) => void;
+  onStop: () => void;
+  /** Opens the credentials form. */
+  onOpenSettings: () => void;
+  isStreaming: () => boolean;
+  /** Host re-render scheduler — called whenever composer state changes. */
+  requestRender: () => void;
+}
+
+export interface Composer {
+  render: () => TemplateResult;
+  focus: () => void;
+  clear: () => void;
+}
+
+/**
+ * Create a composer instance bound to a host's render scheduler.
+ *
+ * @param {ComposerOptions} opts
+ * @returns {Composer}
+ */
+export function createComposer(opts: ComposerOptions): Composer {
+  let textareaEl: HTMLTextAreaElement | null = null;
+  let hasText = false;
+  let chips: ContextChip[] = [];
+
+  /** Null until the first fetch settles; kept on error so the picker can offer Retry. */
+  let models: AiModel[] | null = null;
+  let modelsLoading = false;
+  let modelsError = "";
+
+  // ── Model picker ──────────────────────────────────────────────────────
+
+  function ensureModels(force = false) {
+    if (modelsLoading || (models !== null && !force)) {
+      return;
+    }
+    modelsLoading = true;
+    modelsError = "";
+    fetchAvailableModels({ force })
+      .then((list) => {
+        models = list;
+      })
+      .catch((error: unknown) => {
+        models = [];
+        modelsError = (error as Error).message || "Failed to fetch models";
+      })
+      .finally(() => {
+        modelsLoading = false;
+        opts.requestRender();
+      });
+  }
+
+  function onModelChange(e: Event) {
+    const { value } = e.target as HTMLInputElement;
+    if (value === RETRY_MODELS) {
+      models = null;
+      ensureModels(true);
+      // Re-render so the picker snaps back to the stored model instead of "Retry".
+      opts.requestRender();
+      return;
+    }
+    if (value) {
+      setModel(value);
+    }
+  }
+
+  function renderModelPicker(): TemplateResult {
+    ensureModels();
+    const current = getModel();
+    const listed = models ?? [];
+    const items = listed.some((m) => m.id === current)
+      ? listed
+      : [{ id: current, name: current }, ...listed];
+    return html`
+      <sp-picker
+        size="s"
+        quiet
+        class="ai-model-picker"
+        title=${modelsError ? `Couldn't load models: ${modelsError}` : "Model"}
+        .value=${live(current)}
+        @change=${onModelChange}
+      >
+        ${items.map((m) => html`<sp-menu-item value=${m.id}>${m.name}</sp-menu-item>`)}
+        ${modelsLoading
+          ? html`<sp-menu-item disabled value="__loading__">Loading models…</sp-menu-item>`
+          : nothing}
+        ${modelsError
+          ? html`<sp-menu-item value=${RETRY_MODELS}>Retry loading models</sp-menu-item>`
+          : nothing}
+      </sp-picker>
+    `;
+  }
+
+  // ── Context attach ────────────────────────────────────────────────────
+
+  /** Snapshot the current page / selected element into chip candidates. */
+  function contextCandidates() {
+    const tab = activeTab.value;
+    const documentPath = tab?.documentPath || null;
+    const selection = (tab?.session.selection as JxPath | null) || null;
+    let selectionChip: ContextChip | null = null;
+    if (tab && selection) {
+      const node = getNodeAtPath(tab.doc.document as JxMutableNode, selection) as
+        | (JxMutableNode & { tagName?: string; textContent?: string })
+        | undefined;
+      const tag = node?.tagName || "element";
+      const text = typeof node?.textContent === "string" ? node.textContent.slice(0, 40) : "";
+      selectionChip = {
+        detail: `Selected element at ${JSON.stringify(selection)}: <${tag}>${text ? ` "${text}"` : ""}`,
+        kind: "selection",
+        label: `<${tag}>`,
+      };
+    }
+    return {
+      pageChip: documentPath
+        ? ({ detail: `Page: ${documentPath}`, kind: "page", label: documentPath } as ContextChip)
+        : null,
+      selectionChip,
+    };
+  }
+
+  /** Add (or refresh) a chip of the given kind — one chip per kind. */
+  function addChip(chip: ContextChip) {
+    chips = [...chips.filter((c) => c.kind !== chip.kind), chip];
+    opts.requestRender();
+  }
+
+  function removeChip(kind: ContextChip["kind"]) {
+    chips = chips.filter((c) => c.kind !== kind);
+    opts.requestRender();
+  }
+
+  function renderAttachMenu(): TemplateResult {
+    const { pageChip, selectionChip } = contextCandidates();
+    return html`
+      <overlay-trigger placement="top-start" triggered-by="click">
+        <sp-action-button size="s" quiet slot="trigger" title="Attach context">
+          <sp-icon-attach slot="icon"></sp-icon-attach>
+        </sp-action-button>
+        <sp-popover slot="click-content" tip>
+          <sp-menu
+            @change=${(e: Event) => {
+              const { value } = e.target as unknown as HTMLInputElement;
+              if (value === "page" && pageChip) {
+                addChip(pageChip);
+              } else if (value === "selection" && selectionChip) {
+                addChip(selectionChip);
+              }
+            }}
+          >
+            <sp-menu-item value="page" ?disabled=${!pageChip}>
+              Current page${pageChip ? ` — ${pageChip.label}` : ""}
+            </sp-menu-item>
+            <sp-menu-item value="selection" ?disabled=${!selectionChip}>
+              Selected element${selectionChip ? ` — ${selectionChip.label}` : ""}
+            </sp-menu-item>
+          </sp-menu>
+        </sp-popover>
+      </overlay-trigger>
+    `;
+  }
+
+  function renderChips(): TemplateResult | typeof nothing {
+    if (chips.length === 0) {
+      return nothing;
+    }
+    return html`
+      <div class="ai-composer-chips">
+        ${chips.map(
+          (c) => html`
+            <span class="ai-context-chip" title=${c.detail}>
+              ${c.label}
+              <sp-action-button quiet size="s" title="Remove" @click=${() => removeChip(c.kind)}>
+                <sp-icon-close slot="icon"></sp-icon-close>
+              </sp-action-button>
+            </span>
+          `,
+        )}
+      </div>
+    `;
+  }
+
+  // ── Input ─────────────────────────────────────────────────────────────
+
+  function autoGrow() {
+    if (!textareaEl) {
+      return;
+    }
+    textareaEl.style.height = "auto";
+    textareaEl.style.height = `${Math.min(textareaEl.scrollHeight, MAX_INPUT_HEIGHT)}px`;
+  }
+
+  function onInput() {
+    autoGrow();
+    const nowHasText = Boolean(textareaEl?.value.trim());
+    if (nowHasText !== hasText) {
+      hasText = nowHasText;
+      // Only re-render on the empty↔non-empty flip so typing stays cheap.
+      opts.requestRender();
+    }
+  }
+
+  function onKeydown(e: KeyboardEvent) {
+    if (e.key === "Enter" && !e.shiftKey && !e.isComposing) {
+      e.preventDefault();
+      trySend();
+    }
+  }
+
+  function trySend() {
+    const text = textareaEl?.value ?? "";
+    if (!text.trim() || opts.isStreaming()) {
+      return;
+    }
+    opts.onSend(buildMessageWithContext(text, chips));
+    clear();
+    opts.requestRender();
+  }
+
+  function clear() {
+    if (textareaEl) {
+      textareaEl.value = "";
+      textareaEl.style.height = "auto";
+    }
+    hasText = false;
+    chips = [];
+  }
+
+  function focus() {
+    textareaEl?.focus();
+  }
+
+  // ── Template ──────────────────────────────────────────────────────────
+
+  function render(): TemplateResult {
+    const streaming = opts.isStreaming();
+    return html`
+      <div class="ai-composer">
+        ${renderChips()}
+        <textarea
+          class="ai-composer-input"
+          rows="1"
+          placeholder="Ask the assistant… (Enter to send)"
+          ${ref((el) => {
+            textareaEl = (el as HTMLTextAreaElement | null) || null;
+          })}
+          @input=${onInput}
+          @keydown=${onKeydown}
+        ></textarea>
+        <div class="ai-composer-row">
+          ${renderAttachMenu()} ${renderModelPicker()}
+          <span class="ai-header-spacer"></span>
+          <sp-action-button size="s" quiet title="API key & endpoint" @click=${opts.onOpenSettings}>
+            <sp-icon-settings slot="icon"></sp-icon-settings>
+          </sp-action-button>
+          ${streaming
+            ? html`
+                <sp-action-button size="s" class="ai-send-btn" title="Stop" @click=${opts.onStop}>
+                  <sp-icon-stop slot="icon"></sp-icon-stop>
+                </sp-action-button>
+              `
+            : html`
+                <sp-action-button
+                  size="s"
+                  class="ai-send-btn"
+                  title="Send"
+                  ?disabled=${!hasText}
+                  @click=${trySend}
+                >
+                  <sp-icon-send slot="icon"></sp-icon-send>
+                </sp-action-button>
+              `}
+        </div>
+      </div>
+    `;
+  }
+
+  return { clear, focus, render };
+}

package/src/panels/ai-chat/sessions-view.ts

@@ -0,0 +1,98 @@
+/// <reference lib="dom" />
+/**
+ * Sessions-view.js — the full-pane chat history list (VSCode-Copilot style).
+ *
+ * Renders the session rows (title, relative time, message count) with per-row delete,
+ * a header with a New Chat action, and an empty state. Pure template functions — all
+ * state and storage live in ai-panel / document-assistant.
+ *
+ * @license MIT
+ */
+
+import { html } from "lit-html";
+import type { TemplateResult } from "lit-html";
+import type { SessionMeta } from "../../services/ai-session-store";
+
+const MINUTE = 60_000;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+
+/**
+ * Human relative timestamp: "just now", "5m ago", "3h ago", "yesterday", "4d ago", then a locale
+ * date.
+ *
+ * @param {number} ts
+ * @param {number} [now]
+ * @returns {string}
+ */
+export function relativeTime(ts: number, now: number = Date.now()): string {
+  const delta = Math.max(0, now - ts);
+  if (delta < MINUTE) {
+    return "just now";
+  }
+  if (delta < HOUR) {
+    return `${Math.floor(delta / MINUTE)}m ago`;
+  }
+  if (delta < DAY) {
+    return `${Math.floor(delta / HOUR)}h ago`;
+  }
+  if (delta < 2 * DAY) {
+    return "yesterday";
+  }
+  if (delta < 7 * DAY) {
+    return `${Math.floor(delta / DAY)}d ago`;
+  }
+  return new Date(ts).toLocaleDateString();
+}
+
+export interface SessionsListOptions {
+  sessions: SessionMeta[];
+  onOpen: (id: string) => void;
+  onDelete: (id: string) => void;
+  onNew: () => void;
+}
+
+function renderRow(s: SessionMeta, opts: SessionsListOptions): TemplateResult {
+  return html`
+    <div class="ai-session-row" @click=${() => opts.onOpen(s.id)}>
+      <div class="ai-session-text">
+        <div class="ai-session-title">${s.title}</div>
+        <div class="ai-session-meta">
+          ${relativeTime(s.updatedAt)} · ${s.messageCount}
+          ${s.messageCount === 1 ? "message" : "messages"}
+        </div>
+      </div>
+      <sp-action-button
+        quiet
+        size="s"
+        class="ai-session-delete"
+        title="Delete chat"
+        @click=${(e: Event) => {
+          e.stopPropagation();
+          opts.onDelete(s.id);
+        }}
+      >
+        <sp-icon-delete slot="icon"></sp-icon-delete>
+      </sp-action-button>
+    </div>
+  `;
+}
+
+/** The sessions pane: header ("Chats" + New Chat) above the scrollable session rows. */
+export function renderSessionsList(opts: SessionsListOptions): TemplateResult {
+  return html`
+    <div class="ai-chat-header">
+      <span class="ai-chat-title">Chats</span>
+      <span class="ai-header-spacer"></span>
+      <sp-action-button size="s" quiet title="New chat" @click=${opts.onNew}>
+        <sp-icon-add slot="icon"></sp-icon-add>
+        New Chat
+      </sp-action-button>
+    </div>
+    <div class="ai-sessions">
+      ${opts.sessions.length === 0
+        ? html`<div class="ai-sessions-empty">No previous chats</div>`
+        : opts.sessions.map((s) => renderRow(s, opts))}
+    </div>
+  `;
+}