@happyvertical/smrt-chat 0.30.0

package/dist/svelte/components/agent/ToolCallDisplay.svelte

@@ -0,0 +1,335 @@
+<script lang="ts">
+/**
+ * ToolCallDisplay - Inline tool call/result display
+ * Collapsible card showing tool name, arguments (as JSON), status indicator,
+ * and result/error. Color-coded by status (pending, running, success, error).
+ */
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { M } from '../../i18n.js';
+import type { ToolCallDisplayData } from '../../types.js';
+
+export interface Props {
+  /** Tool call data */
+  toolCall: ToolCallDisplayData;
+}
+
+const { toolCall }: Props = $props();
+
+const { t } = useI18n();
+
+let isExpanded = $state(false);
+
+const statusIcon = $derived.by(() => {
+  switch (toolCall.status) {
+    case 'pending':
+      return '...';
+    case 'running':
+      return '...';
+    case 'success':
+      return '...';
+    case 'error':
+      return '...';
+    default:
+      return '';
+  }
+});
+
+const statusLabel = $derived.by(() => {
+  switch (toolCall.status) {
+    case 'pending':
+      return 'Pending';
+    case 'running':
+      return 'Running';
+    case 'success':
+      return 'Completed';
+    case 'error':
+      return 'Error';
+    default:
+      return toolCall.status;
+  }
+});
+
+function formatJson(value: unknown): string {
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+}
+
+function formatDuration(ms: number | undefined): string {
+  if (ms === undefined) return '';
+  if (ms < 1000) return `${ms}ms`;
+  return `${(ms / 1000).toFixed(1)}s`;
+}
+</script>
+
+<div class="tool-call tool-call--{toolCall.status}" aria-label={t(M['chat.tool_call_display.tool_call'], { toolName: toolCall.toolName })}>
+  <button
+    class="tool-call__header"
+    type="button"
+    onclick={() => isExpanded = !isExpanded}
+    aria-expanded={isExpanded}
+    aria-controls="tool-call-body-{toolCall.toolCallId}"
+  >
+    <div class="tool-call__status-dot" aria-label="{statusLabel}"></div>
+
+    <span class="tool-call__name">{toolCall.toolName}</span>
+
+    <div class="tool-call__header-right">
+      {#if toolCall.duration !== undefined}
+        <span class="tool-call__duration">{formatDuration(toolCall.duration)}</span>
+      {/if}
+      <span class="tool-call__status-label">{statusLabel}</span>
+      <svg
+        class="tool-call__chevron"
+        class:tool-call__chevron--open={isExpanded}
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        aria-hidden="true"
+      >
+        <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z" />
+      </svg>
+    </div>
+  </button>
+
+  {#if isExpanded}
+    <div class="tool-call__body" id="tool-call-body-{toolCall.toolCallId}">
+      {#if toolCall.arguments && Object.keys(toolCall.arguments).length > 0}
+        <div class="tool-call__section">
+          <span class="tool-call__section-label">Arguments</span>
+          <pre class="tool-call__json">{formatJson(toolCall.arguments)}</pre>
+        </div>
+      {/if}
+
+      {#if toolCall.status === 'success' && toolCall.result !== undefined}
+        <div class="tool-call__section">
+          <span class="tool-call__section-label">Result</span>
+          <pre class="tool-call__json tool-call__json--result">{formatJson(toolCall.result)}</pre>
+        </div>
+      {/if}
+
+      {#if toolCall.status === 'error' && toolCall.error}
+        <div class="tool-call__section">
+          <span class="tool-call__section-label">Error</span>
+          <pre class="tool-call__json tool-call__json--error">{toolCall.error}</pre>
+        </div>
+      {/if}
+
+      {#if toolCall.status === 'running'}
+        <div class="tool-call__running">
+          <div class="tool-call__spinner" aria-label={t(M['chat.tool_call_display.running'])}></div>
+          <span>Executing...</span>
+        </div>
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .tool-call {
+    border: 1px solid var(--smrt-color-outline-variant, #c4c6d0);
+    border-radius: var(--smrt-radius-medium, 8px);
+    overflow: hidden;
+    font-family: var(--smrt-font-family, system-ui);
+  }
+
+  .tool-call--pending {
+    border-left: 3px solid var(--smrt-color-outline, #74777f);
+  }
+
+  .tool-call--running {
+    border-left: 3px solid var(--smrt-color-primary, #005ac1);
+  }
+
+  .tool-call--success {
+    border-left: 3px solid var(--smrt-color-success, #4caf50);
+  }
+
+  .tool-call--error {
+    border-left: 3px solid var(--smrt-color-error, #ba1a1a);
+  }
+
+  .tool-call__header {
+    display: flex;
+    align-items: center;
+    gap: var(--smrt-spacing-2, 8px);
+    width: 100%;
+    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-3, 12px);
+    border: none;
+    background: var(--smrt-color-surface-container-low, #f7f7fb);
+    cursor: pointer;
+    text-align: left;
+    color: var(--smrt-color-on-surface, #1a1c1e);
+    font: inherit;
+    transition: background var(--smrt-duration-short2, 150ms);
+  }
+
+  .tool-call__header:hover {
+    background: var(--smrt-color-surface-container, #f0f0f4);
+  }
+
+  .tool-call__header:focus-visible {
+    outline: 2px solid var(--smrt-color-primary, #005ac1);
+    outline-offset: -2px;
+  }
+
+  .tool-call__status-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: var(--smrt-radius-full, 9999px);
+    flex-shrink: 0;
+  }
+
+  .tool-call--pending .tool-call__status-dot {
+    background: var(--smrt-color-outline, #74777f);
+  }
+
+  .tool-call--running .tool-call__status-dot {
+    background: var(--smrt-color-primary, #005ac1);
+    animation: pulse 1.5s ease-in-out infinite;
+  }
+
+  .tool-call--success .tool-call__status-dot {
+    background: var(--smrt-color-success, #4caf50);
+  }
+
+  .tool-call--error .tool-call__status-dot {
+    background: var(--smrt-color-error, #ba1a1a);
+  }
+
+  .tool-call__name {
+    font: var(--smrt-typography-label-large-font, 500 0.875rem/1.25 sans-serif);
+    font-family: var(--smrt-font-family-mono, 'SF Mono', 'Fira Code', 'Cascadia Code', monospace);
+    flex: 1;
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .tool-call__header-right {
+    display: flex;
+    align-items: center;
+    gap: var(--smrt-spacing-2, 8px);
+    flex-shrink: 0;
+  }
+
+  .tool-call__duration {
+    font: var(--smrt-typography-label-small-font, 500 0.6875rem/1 sans-serif);
+    color: var(--smrt-color-outline, #74777f);
+  }
+
+  .tool-call__status-label {
+    font: var(--smrt-typography-label-small-font, 500 0.6875rem/1 sans-serif);
+    color: var(--smrt-color-on-surface-variant, #43474e);
+  }
+
+  .tool-call__chevron {
+    color: var(--smrt-color-on-surface-variant, #43474e);
+    transition: transform var(--smrt-duration-short2, 150ms);
+  }
+
+  .tool-call__chevron--open {
+    transform: rotate(180deg);
+  }
+
+  .tool-call__body {
+    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-3, 12px) var(--smrt-spacing-3, 12px);
+    display: flex;
+    flex-direction: column;
+    gap: var(--smrt-spacing-2, 8px);
+    border-top: 1px solid var(--smrt-color-outline-variant, #c4c6d0);
+    background: var(--smrt-color-surface, #fefbff);
+  }
+
+  .tool-call__section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--smrt-spacing-1, 4px);
+  }
+
+  .tool-call__section-label {
+    font: var(--smrt-typography-label-small-font, 500 0.6875rem/1 sans-serif);
+    color: var(--smrt-color-on-surface-variant, #43474e);
+    text-transform: uppercase;
+    letter-spacing: var(--smrt-typography-label-small-tracking, 0.5px);
+  }
+
+  .tool-call__json {
+    margin: 0;
+    padding: var(--smrt-spacing-2, 8px);
+    border-radius: var(--smrt-radius-small, 4px);
+    background: var(--smrt-color-surface-container-low, #f7f7fb);
+    color: var(--smrt-color-on-surface, #1a1c1e);
+    font-family: var(--smrt-font-family-mono, 'SF Mono', 'Fira Code', 'Cascadia Code', monospace);
+    font-size: var(--smrt-typography-body-small-size, 0.75rem);
+    line-height: var(--smrt-typography-body-small-line-height, 1.5);
+    overflow-x: auto;
+    white-space: pre-wrap;
+    word-break: break-all;
+    max-height: 200px;
+    overflow-y: auto;
+  }
+
+  .tool-call__json--result {
+    background: var(--smrt-color-success-container, #f1f8e9);
+    color: var(--smrt-color-on-success-container, #33691e);
+  }
+
+  .tool-call__json--error {
+    background: var(--smrt-color-error-container, #ffdad6);
+    color: var(--smrt-color-on-error-container, #410002);
+  }
+
+  .tool-call__running {
+    display: flex;
+    align-items: center;
+    gap: var(--smrt-spacing-2, 8px);
+    padding: var(--smrt-spacing-2, 8px);
+    font: var(--smrt-typography-body-small-font, 0.8125rem/1.4 sans-serif);
+    color: var(--smrt-color-primary, #005ac1);
+  }
+
+  .tool-call__spinner {
+    width: 16px;
+    height: 16px;
+    border: 2px solid var(--smrt-color-primary-container, #d6e3ff);
+    border-top-color: var(--smrt-color-primary, #005ac1);
+    border-radius: var(--smrt-radius-full, 9999px);
+    animation: spin 0.8s linear infinite;
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes pulse {
+    0%, 100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.4;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .tool-call__chevron,
+    .tool-call__header {
+      transition: none;
+    }
+
+    .tool-call__spinner {
+      animation: none;
+      border-top-color: var(--smrt-color-primary, #005ac1);
+    }
+
+    .tool-call--running .tool-call__status-dot {
+      animation: none;
+    }
+  }
+</style>

package/dist/svelte/components/agent/ToolCallDisplay.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { ToolCallDisplayData } from '../../types.js';
+export interface Props {
+    /** Tool call data */
+    toolCall: ToolCallDisplayData;
+}
+declare const ToolCallDisplay: import("svelte").Component<Props, {}, "">;
+type ToolCallDisplay = ReturnType<typeof ToolCallDisplay>;
+export default ToolCallDisplay;
+//# sourceMappingURL=ToolCallDisplay.svelte.d.ts.map

package/dist/svelte/components/agent/ToolCallDisplay.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolCallDisplay.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/agent/ToolCallDisplay.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAG1D,MAAM,WAAW,KAAK;IACpB,qBAAqB;IACrB,QAAQ,EAAE,mBAAmB,CAAC;CAC/B;AAiHD,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/svelte/components/agent/message-blocks.d.ts

@@ -0,0 +1,12 @@
+export type ParsedBlock = {
+    type: 'text';
+    content: string;
+} | {
+    type: 'fields';
+    fields: Record<string, string>;
+} | {
+    type: 'markdown';
+    content: string;
+};
+export declare function parseAgentMessageBlocks(text: string): ParsedBlock[];
+//# sourceMappingURL=message-blocks.d.ts.map

package/dist/svelte/components/agent/message-blocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-blocks.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/agent/message-blocks.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GACnB;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,GACjC;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CAAE,GAClD;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAAC;AAE1C,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,MAAM,GAAG,WAAW,EAAE,CA2CnE"}

package/dist/svelte/components/agent/message-blocks.js

@@ -0,0 +1,41 @@
+export function parseAgentMessageBlocks(text) {
+    if (!text)
+        return [];
+    const regex = /```(json|markdown)[ \t]*\r?\n([\s\S]*?)```/gi;
+    const blocks = [];
+    let lastIndex = 0;
+    let match = regex.exec(text);
+    while (match !== null) {
+        if (match.index > lastIndex) {
+            blocks.push({
+                type: 'text',
+                content: text.slice(lastIndex, match.index),
+            });
+        }
+        const lang = match[1].toLowerCase();
+        const body = match[2].trim();
+        if (lang === 'json') {
+            try {
+                const parsed = JSON.parse(body);
+                if (parsed.fields && typeof parsed.fields === 'object') {
+                    blocks.push({ type: 'fields', fields: parsed.fields });
+                }
+                else {
+                    blocks.push({ type: 'text', content: match[0] });
+                }
+            }
+            catch {
+                blocks.push({ type: 'text', content: match[0] });
+            }
+        }
+        else {
+            blocks.push({ type: 'markdown', content: body });
+        }
+        lastIndex = regex.lastIndex;
+        match = regex.exec(text);
+    }
+    if (lastIndex < text.length) {
+        blocks.push({ type: 'text', content: text.slice(lastIndex) });
+    }
+    return blocks;
+}

package/dist/svelte/components/agent/message-blocks.test.js

@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest';
+import { parseAgentMessageBlocks } from './message-blocks';
+describe('parseAgentMessageBlocks', () => {
+    it('preserves fenced markdown blocks as readable content', () => {
+        expect(parseAgentMessageBlocks('Here is a draft:\n```markdown\n# Heading\n\nBody copy\n```\nThanks.')).toEqual([
+            { type: 'text', content: 'Here is a draft:\n' },
+            { type: 'markdown', content: '# Heading\n\nBody copy' },
+            { type: 'text', content: '\nThanks.' },
+        ]);
+    });
+    it('extracts field updates from json blocks', () => {
+        expect(parseAgentMessageBlocks('```json\n{"fields":{"title":"New title","body":"Updated body"}}\n```')).toEqual([
+            {
+                type: 'fields',
+                fields: { title: 'New title', body: 'Updated body' },
+            },
+        ]);
+    });
+    it('falls back to plain text for invalid json blocks', () => {
+        expect(parseAgentMessageBlocks('```json\n{not valid json}\n```')).toEqual([
+            { type: 'text', content: '```json\n{not valid json}\n```' },
+        ]);
+    });
+    it('supports windows newlines and whitespace after the language tag', () => {
+        expect(parseAgentMessageBlocks('Intro\r\n```markdown   \r\n# Heading\r\n\r\nBody copy\r\n```\r\nDone')).toEqual([
+            { type: 'text', content: 'Intro\r\n' },
+            { type: 'markdown', content: '# Heading\r\n\r\nBody copy' },
+            { type: 'text', content: '\r\nDone' },
+        ]);
+    });
+});