@steerable/agent-ui 0.2.0 → 0.2.4

package/src/cards/SearchSourcesCard.tsx

@@ -0,0 +1,244 @@
+/**
+ * `<SearchSourcesCard />`
+ *
+ * Renders a row of stacked favicons summarising the web sources an agent
+ * consulted, plus an expandable detail panel listing each `(title, domain,
+ * snippet)` triple.
+ *
+ * Appearance variants:
+ *  - `card` (default): bordered card chrome with a divided expanded list.
+ *  - `inline`: no chrome around the trigger; expanded items use a borderless
+ *    `:hover` background. Matches the deeppath "above the input" aesthetic.
+ *
+ * Slots:
+ *  - `renderSummary(count, more)` -- replace the default "{count} 个来源" label.
+ *  - `faviconUrlFor(url)` -- replace the default favicon resolver.
+ */
+import * as React from 'react';
+import type { SearchSourcesPayload } from '@steerable/agent-protocol';
+import { GlobeIcon, ChevronDownIcon, ExternalLinkIcon } from './icons.js';
+
+export type SearchSourcesCardAppearance = 'card' | 'inline';
+
+export interface SearchSourcesCardProps {
+  payload: SearchSourcesPayload;
+  className?: string;
+  appearance?: SearchSourcesCardAppearance;
+  faviconUrlFor?: (url: string) => string | null;
+  renderSummary?: (uniqueCount: number, overflowCount: number) => React.ReactNode;
+}
+
+const MAX_STACKED = 5;
+
+function extractDomain(url: string): string {
+  try {
+    return new URL(url).hostname.replace(/^www\./, '');
+  } catch {
+    return url;
+  }
+}
+
+function defaultFaviconUrl(url: string): string | null {
+  try {
+    const host = new URL(url).hostname;
+    return `https://www.google.com/s2/favicons?sz=64&domain=${host}`;
+  } catch {
+    return null;
+  }
+}
+
+function FaviconCircle({ src, size = 18 }: { src: string | null; size?: number }) {
+  const [failed, setFailed] = React.useState(false);
+  const showFallback = !src || failed;
+
+  if (showFallback) {
+    return (
+      <span
+        className="inline-flex items-center justify-center rounded-full border-2 border-[var(--agent-background,#fff)] bg-[var(--agent-muted,#f3f4f6)]"
+        style={{ width: size, height: size }}
+      >
+        <GlobeIcon
+          size={Math.round(size * 0.55)}
+          className="text-[var(--agent-muted-foreground,#6b7280)]"
+        />
+      </span>
+    );
+  }
+
+  return (
+    <img
+      src={src}
+      alt=""
+      width={size}
+      height={size}
+      className="rounded-full border-2 border-[var(--agent-background,#fff)] bg-[var(--agent-background,#fff)] object-cover"
+      style={{ width: size, height: size }}
+      loading="lazy"
+      onError={() => setFailed(true)}
+    />
+  );
+}
+
+export const SearchSourcesCard: React.FC<SearchSourcesCardProps> = ({
+  payload,
+  className,
+  appearance = 'card',
+  faviconUrlFor = defaultFaviconUrl,
+  renderSummary,
+}) => {
+  const [expanded, setExpanded] = React.useState(false);
+  const sources = payload.sources ?? [];
+
+  const unique = React.useMemo(() => {
+    const seen = new Set<string>();
+    return sources.filter((s) => {
+      if (!s?.url || seen.has(s.url)) return false;
+      seen.add(s.url);
+      return true;
+    });
+  }, [sources]);
+
+  if (unique.length === 0) return null;
+
+  const stacked = unique.slice(0, MAX_STACKED);
+  const more = unique.length - stacked.length;
+
+  const isCard = appearance === 'card';
+
+  const summaryLabel = renderSummary
+    ? renderSummary(unique.length, more)
+    : isCard
+      ? <>
+          {unique.length} 个来源{more > 0 ? `（+${more}）` : ''}
+        </>
+      : <>搜索了 {unique.length} 个网站</>;
+
+  return (
+    <div
+      className={[
+        'steerable-search-sources',
+        isCard
+          ? 'rounded-lg border border-[var(--agent-border,#e5e7eb)] bg-[var(--agent-card-bg,#fff)]'
+          : '',
+        className,
+      ].filter(Boolean).join(' ')}
+    >
+      <button
+        type="button"
+        onClick={() => setExpanded((v) => !v)}
+        className={
+          isCard
+            ? 'flex w-full items-center justify-between gap-2 px-3 py-2 text-left'
+            : 'group flex items-center gap-2 rounded-md py-1 text-sm text-[var(--agent-muted-foreground,#6b7280)] transition-colors duration-150 hover:text-[var(--agent-foreground,#111827)]'
+        }
+      >
+        <span className={isCard ? 'flex items-center gap-2' : 'flex items-center'}>
+          {isCard ? (
+            <>
+              <span className="flex -space-x-2">
+                {stacked.map((s, idx) => (
+                  <FaviconCircle key={`${idx}-${s.url}`} src={s.favicon ?? faviconUrlFor(s.url)} />
+                ))}
+              </span>
+              <span className="text-xs text-[var(--agent-muted-foreground,#6b7280)]">
+                {summaryLabel}
+              </span>
+            </>
+          ) : (
+            <>
+              <span className="flex" style={{ paddingLeft: 0 }}>
+                {stacked.map((s, i) => (
+                  <span
+                    key={`${i}-${s.url}`}
+                    className="inline-block"
+                    style={{ marginLeft: i === 0 ? 0 : -6, zIndex: MAX_STACKED - i }}
+                  >
+                    <FaviconCircle src={s.favicon ?? faviconUrlFor(s.url)} />
+                  </span>
+                ))}
+                {more > 0 && (
+                  <span
+                    className="inline-flex items-center justify-center rounded-full border-2 border-[var(--agent-background,#fff)] bg-[var(--agent-muted,#f3f4f6)] text-[10px] font-medium text-[var(--agent-muted-foreground,#6b7280)]"
+                    style={{ width: 18, height: 18, marginLeft: -6, zIndex: 0 }}
+                  >
+                    +{more}
+                  </span>
+                )}
+              </span>
+            </>
+          )}
+        </span>
+        {!isCard && <span className="ml-2">{summaryLabel}</span>}
+        <ChevronDownIcon
+          size={isCard ? 14 : 14}
+          className={[
+            isCard ? 'text-[var(--agent-muted-foreground,#6b7280)]' : 'h-3.5 w-3.5',
+            'transition-transform duration-200',
+            expanded ? 'rotate-180' : '',
+          ].filter(Boolean).join(' ')}
+        />
+      </button>
+      {expanded && (
+        isCard ? (
+          <ul className="divide-y divide-[var(--agent-border,#e5e7eb)] border-t border-[var(--agent-border,#e5e7eb)]">
+            {unique.map((s, idx) => (
+              <li key={`${idx}-${s.url}`} className="px-3 py-2 text-sm">
+                <a
+                  href={s.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-start gap-2 text-[var(--agent-foreground,#111827)] hover:underline"
+                >
+                  <FaviconCircle src={s.favicon ?? faviconUrlFor(s.url)} size={16} />
+                  <span className="min-w-0 flex-1">
+                    <span className="block truncate font-medium">{s.title || extractDomain(s.url)}</span>
+                    <span className="block truncate text-xs text-[var(--agent-muted-foreground,#6b7280)]">
+                      {extractDomain(s.url)}
+                    </span>
+                    {s.snippet && (
+                      <span className="mt-1 block text-xs text-[var(--agent-muted-foreground,#6b7280)] line-clamp-2">
+                        {s.snippet}
+                      </span>
+                    )}
+                  </span>
+                  <ExternalLinkIcon
+                    size={12}
+                    className="mt-1 flex-shrink-0 text-[var(--agent-muted-foreground,#6b7280)]"
+                  />
+                </a>
+              </li>
+            ))}
+          </ul>
+        ) : (
+          <div className="mt-1.5 flex flex-col gap-0.5">
+            {unique.map((s, idx) => (
+              <a
+                key={`${idx}-${s.url}`}
+                href={s.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="group/item flex items-center gap-2.5 rounded-md px-2 py-1.5 transition-colors duration-150 hover:bg-[var(--agent-muted,#f3f4f6)]"
+              >
+                <FaviconCircle src={s.favicon ?? faviconUrlFor(s.url)} size={16} />
+                <div className="min-w-0 flex-1">
+                  <div className="truncate text-xs text-[var(--agent-foreground,#111827)]">
+                    {s.title || extractDomain(s.url)}
+                  </div>
+                  <div className="truncate text-[11px] text-[var(--agent-muted-foreground,#6b7280)]">
+                    {extractDomain(s.url)}
+                  </div>
+                </div>
+                <ExternalLinkIcon
+                  size={12}
+                  className="shrink-0 text-[var(--agent-muted-foreground,#6b7280)] opacity-0 transition-opacity group-hover/item:opacity-100"
+                />
+              </a>
+            ))}
+          </div>
+        )
+      )}
+    </div>
+  );
+};
+
+export default SearchSourcesCard;

package/src/cards/SuggestedRepliesCard.tsx

@@ -0,0 +1,48 @@
+/**
+ * `<SuggestedRepliesCard />`
+ *
+ * Quick-reply chips rendered below the composer. The card is pure presentation:
+ * the parent decides where to mount it and what `onSelect` does (typically:
+ * push the chosen text into the composer and submit).
+ */
+import * as React from 'react';
+import type { SuggestedRepliesPayload } from '@steerable/agent-protocol';
+
+export interface SuggestedRepliesCardProps {
+  payload: SuggestedRepliesPayload;
+  onSelect: (text: string) => void;
+  className?: string;
+  buttonClassName?: string;
+}
+
+export const SuggestedRepliesCard: React.FC<SuggestedRepliesCardProps> = ({
+  payload,
+  onSelect,
+  className,
+  buttonClassName,
+}) => {
+  const suggestions = payload.suggestions ?? [];
+  if (suggestions.length === 0) return null;
+
+  return (
+    <div className={['steerable-suggested-replies flex flex-wrap gap-2 py-2', className].filter(Boolean).join(' ')}>
+      {suggestions.map((text, idx) => (
+        <button
+          key={`${idx}-${text}`}
+          type="button"
+          onClick={() => onSelect(text)}
+          className={[
+            'rounded-full border px-3 py-1.5 text-sm transition-colors duration-150',
+            'border-[var(--agent-border,#e5e7eb)] bg-[var(--agent-card-bg,#f9fafb)]',
+            'text-[var(--agent-foreground,#111827)] hover:bg-[var(--agent-accent,#e5e7eb)]',
+            buttonClassName,
+          ].filter(Boolean).join(' ')}
+        >
+          {text}
+        </button>
+      ))}
+    </div>
+  );
+};
+
+export default SuggestedRepliesCard;

package/src/cards/SummaryMessageCard.tsx

@@ -0,0 +1,145 @@
+/**
+ * `<SummaryMessageCard />`
+ *
+ * Compact summary of N previous messages (e.g. history compaction). Collapsed
+ * by default so it doesn't dominate the chat scrollback.
+ *
+ * Appearance variants:
+ *  - `card` (default): bordered chrome.
+ *  - `inline`: a small pill button + indented body block below. Matches the
+ *    deeppath "above the input" aesthetic.
+ *
+ * Slots:
+ *  - `renderMarkdown(body)` -- supply your own markdown renderer.
+ *  - `renderLabel({ isPending, count })` -- replace the trigger label.
+ *  - `renderToggle({ expanded, canToggle })` -- replace the toggle chevron + text.
+ */
+import * as React from 'react';
+import type { SummaryMessagePayload } from '@steerable/agent-protocol';
+import { ArchiveIcon, ChevronDownIcon, ChevronRightIcon, LoaderIcon } from './icons.js';
+import { asReactNode, type RenderSlotResult } from './types.js';
+
+export type SummaryMessageCardAppearance = 'card' | 'inline';
+
+export interface SummaryMessageLabelArgs {
+  isPending: boolean;
+  count: number | null;
+}
+
+export interface SummaryMessageToggleArgs {
+  expanded: boolean;
+  canToggle: boolean;
+}
+
+export interface SummaryMessageCardProps {
+  payload: SummaryMessagePayload;
+  renderMarkdown?: (body: string) => RenderSlotResult;
+  renderLabel?: (args: SummaryMessageLabelArgs) => RenderSlotResult;
+  renderToggle?: (args: SummaryMessageToggleArgs) => RenderSlotResult;
+  appearance?: SummaryMessageCardAppearance;
+  className?: string;
+  defaultExpanded?: boolean;
+}
+
+export const SummaryMessageCard: React.FC<SummaryMessageCardProps> = ({
+  payload,
+  renderMarkdown,
+  renderLabel,
+  renderToggle,
+  appearance = 'card',
+  className,
+  defaultExpanded = false,
+}) => {
+  const [expanded, setExpanded] = React.useState(defaultExpanded);
+  const isPending = payload.status === 'pending';
+  const count =
+    typeof payload.summarizedCount === 'number' && payload.summarizedCount > 0
+      ? payload.summarizedCount
+      : null;
+  const hasBody = Boolean(payload.body && payload.body.trim());
+  const canToggle = !isPending && hasBody;
+
+  const defaultLabel = isPending
+    ? '总结中…'
+    : `历史摘要${count ? `（${count} 条消息）` : ''}`;
+  const labelNode: React.ReactNode = renderLabel
+    ? asReactNode(renderLabel({ isPending, count }))
+    : defaultLabel;
+
+  const defaultToggle = expanded
+    ? <ChevronDownIcon size={12} />
+    : <ChevronRightIcon size={12} />;
+  const toggleNode: React.ReactNode = renderToggle
+    ? asReactNode(renderToggle({ expanded, canToggle }))
+    : defaultToggle;
+
+  const body: React.ReactNode = expanded && canToggle ? (
+    renderMarkdown ? (
+      asReactNode(renderMarkdown(payload.body))
+    ) : (
+      <pre className="whitespace-pre-wrap break-words font-sans">{payload.body}</pre>
+    )
+  ) : null;
+
+  if (appearance === 'inline') {
+    return (
+      <div className={['steerable-summary-message', className].filter(Boolean).join(' ')}>
+        <button
+          type="button"
+          onClick={() => canToggle && setExpanded((v) => !v)}
+          disabled={!canToggle}
+          className={[
+            'group inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-[11px] leading-none text-[var(--agent-muted-foreground,#6b7280)] transition-colors',
+            canToggle
+              ? 'cursor-pointer hover:bg-[var(--agent-muted,#f3f4f6)] hover:text-[var(--agent-foreground,#111827)]'
+              : 'cursor-default',
+          ].join(' ')}
+        >
+          {isPending ? (
+            <LoaderIcon size={12} className="animate-spin" />
+          ) : (
+            <ArchiveIcon size={12} />
+          )}
+          <span>{labelNode}</span>
+          {canToggle && (
+            <span className="inline-flex items-center gap-0.5 opacity-60 group-hover:opacity-100">
+              {toggleNode}
+            </span>
+          )}
+        </button>
+        {body && (
+          <div className="ml-3 mt-1.5 rounded-md border border-[var(--agent-border,#e5e7eb)] bg-[var(--agent-muted,#f3f4f6)]/30 px-3 py-2 text-[12px] leading-relaxed text-[var(--agent-muted-foreground,#6b7280)]">
+            {body}
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={[
+        'steerable-summary-message rounded-lg border border-[var(--agent-border,#e5e7eb)] bg-[var(--agent-muted,#f3f4f6)]/40 text-xs',
+        className,
+      ].filter(Boolean).join(' ')}
+    >
+      <button
+        type="button"
+        onClick={() => canToggle && setExpanded((v) => !v)}
+        disabled={!canToggle}
+        className="flex w-full items-center gap-2 px-3 py-2 text-left text-[var(--agent-muted-foreground,#6b7280)]"
+      >
+        {isPending ? <LoaderIcon size={12} /> : <ArchiveIcon size={12} />}
+        <span>{labelNode}</span>
+        {canToggle && <span className="ml-auto">{toggleNode}</span>}
+      </button>
+      {body && (
+        <div className="border-t border-[var(--agent-border,#e5e7eb)] px-3 py-2 text-[var(--agent-foreground,#111827)]">
+          {body}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default SummaryMessageCard;

package/src/cards/ThinkingProcessCard.tsx

@@ -0,0 +1,155 @@
+/**
+ * `<ThinkingProcessCard />`
+ *
+ * Collapsible chain-of-thought panel.
+ *
+ * Behaviour switches:
+ *  - `isStreaming` paints the card with a soft pulsing border to convey
+ *    "thoughts still arriving".
+ *  - `autoExpandWhileStreaming` opens the panel automatically when streaming
+ *    starts; `autoCollapseOnComplete` closes it once streaming finishes.
+ *  - Controlled mode: pass `expanded` + `onExpandedChange` to delegate the
+ *    open/close state (used by host apps that persist expansion in a
+ *    context like deeppath's `MessageListContext`).
+ *
+ * Slots:
+ *  - `renderMarkdown(body)`: replace the default `<pre>` body renderer.
+ *  - `renderLabel({ isStreaming, isExpanded })`: replace the trigger label
+ *    (deeppath uses "正在思考：...", "思考过程", "下一步推理"... variants).
+ *  - `renderStreamingFooter`: extra content rendered below the body while
+ *    streaming (deeppath shows a pulsing "思考中..." line).
+ *  - `bodyClassName` overrides default compact body typography.
+ */
+import * as React from 'react';
+import type { ThinkingProcessPayload } from '@steerable/agent-protocol';
+import { ChevronDownIcon, ChevronRightIcon } from './icons.js';
+import { asReactNode, type RenderSlotResult } from './types.js';
+
+export interface ThinkingProcessLabelArgs {
+  isStreaming: boolean;
+  isExpanded: boolean;
+}
+
+export interface ThinkingProcessCardProps {
+  payload: ThinkingProcessPayload;
+  renderMarkdown?: (body: string) => RenderSlotResult;
+  renderLabel?: (args: ThinkingProcessLabelArgs) => RenderSlotResult;
+  renderStreamingFooter?: () => RenderSlotResult;
+  className?: string;
+  bodyClassName?: string;
+  isStreaming?: boolean;
+  expanded?: boolean;
+  onExpandedChange?: (next: boolean) => void;
+  autoExpandWhileStreaming?: boolean;
+  autoCollapseOnComplete?: boolean;
+  durationMs?: number | null;
+}
+
+function formatDuration(ms?: number | null): string | null {
+  if (!ms || ms <= 0) return null;
+  return `${(ms / 1000).toFixed(1)}秒`;
+}
+
+export const ThinkingProcessCard: React.FC<ThinkingProcessCardProps> = ({
+  payload,
+  renderMarkdown,
+  renderLabel,
+  renderStreamingFooter,
+  className,
+  bodyClassName,
+  isStreaming = false,
+  expanded: expandedProp,
+  onExpandedChange,
+  autoExpandWhileStreaming = false,
+  autoCollapseOnComplete = false,
+  durationMs = null,
+}) => {
+  const isControlled = expandedProp !== undefined;
+  const [internalExpanded, setInternalExpanded] = React.useState(
+    Boolean(payload.defaultExpanded),
+  );
+  const expanded = isControlled ? Boolean(expandedProp) : internalExpanded;
+  const setExpanded = React.useCallback(
+    (next: boolean) => {
+      if (!isControlled) setInternalExpanded(next);
+      onExpandedChange?.(next);
+    },
+    [isControlled, onExpandedChange],
+  );
+
+  const prevStreamingRef = React.useRef(isStreaming);
+  React.useEffect(() => {
+    const wasStreaming = prevStreamingRef.current;
+    if (autoExpandWhileStreaming && isStreaming && !expanded && payload.body?.trim()) {
+      setExpanded(true);
+    }
+    if (autoCollapseOnComplete && wasStreaming && !isStreaming && expanded) {
+      setExpanded(false);
+    }
+    prevStreamingRef.current = isStreaming;
+  }, [
+    isStreaming,
+    expanded,
+    autoExpandWhileStreaming,
+    autoCollapseOnComplete,
+    payload.body,
+    setExpanded,
+  ]);
+
+  const showBody = expanded || (isStreaming && Boolean(payload.body));
+  const duration = formatDuration(durationMs);
+
+  const defaultLabel = isStreaming ? '正在思考...' : '思考过程';
+  const labelNode = renderLabel
+    ? asReactNode(renderLabel({ isStreaming, isExpanded: expanded }))
+    : defaultLabel;
+
+  const defaultBodyClasses =
+    'whitespace-pre-wrap break-words font-sans text-xs leading-relaxed text-[var(--agent-muted-foreground,#6b7280)]';
+
+  return (
+    <div className={['steerable-thinking-process', className].filter(Boolean).join(' ')}>
+      <button
+        type="button"
+        onClick={() => setExpanded(!expanded)}
+        className={[
+          'flex items-center gap-1 text-xs transition-colors duration-200',
+          isStreaming
+            ? 'font-medium text-[var(--agent-foreground,#111827)]'
+            : 'text-[var(--agent-muted-foreground,#6b7280)] hover:text-[var(--agent-foreground,#111827)]',
+        ].join(' ')}
+      >
+        {expanded ? <ChevronDownIcon size={14} /> : <ChevronRightIcon size={14} />}
+        <span>{labelNode}</span>
+        {duration && !isStreaming && (
+          <span className="ml-1 text-[var(--agent-muted-foreground,#6b7280)]">({duration})</span>
+        )}
+        {isStreaming && !expanded && (
+          <span
+            aria-hidden
+            className="ml-1 inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-[var(--agent-muted-foreground,#6b7280)]"
+          />
+        )}
+      </button>
+      {showBody && (
+        <div
+          className={[
+            'mt-1 overflow-hidden rounded-lg border p-3',
+            isStreaming
+              ? 'border-[var(--agent-border,#e5e7eb)] bg-[var(--agent-muted,#f3f4f6)]/30 shadow-sm animate-pulse'
+              : 'border-[var(--agent-border,#e5e7eb)] bg-[var(--agent-muted,#f3f4f6)]/30',
+          ].join(' ')}
+        >
+          <div className={bodyClassName ?? defaultBodyClasses}>
+            {renderMarkdown ? asReactNode(renderMarkdown(payload.body)) : payload.body}
+          </div>
+          {isStreaming && renderStreamingFooter && (
+            <div className="mt-2">{asReactNode(renderStreamingFooter())}</div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ThinkingProcessCard;