@tetherto/mdk-ui-agent 0.0.0 → 0.12.1

package/src/components/composer.tsx

@@ -0,0 +1,147 @@
+import { Button } from '@tetherto/mdk-react-devkit/primitives'
+import type { FormEvent, JSX, KeyboardEvent } from 'react'
+import { memo, useEffect, useLayoutEffect, useRef, useState } from 'react'
+
+import { AGENT_LABELS } from '../branding'
+import { SendIcon, StopIcon } from './icons'
+
+/** Grows with the text up to this, then scrolls. Keeps the panel usable. */
+const MAX_ROWS = 6
+
+export type ComposerProps = {
+  disabled?: boolean
+  /**
+   * A turn is running. Kept separate from `disabled` — which is about the input —
+   * because this swaps Send for Stop, and a composer disabled for any other reason
+   * must not offer to stop a turn that is not there.
+   */
+  isStreaming?: boolean
+  placeholder?: string
+  /**
+   * Changing this focuses the input — used when the panel switches conversation,
+   * so starting a new one lands the caret where you are about to type. Ignored on
+   * first render, so mounting the panel never steals focus from the host page.
+   */
+  focusKey?: string | number | null
+  onSend: (text: string) => void
+  /** Aborts the running turn. Without it a turn going wrong can only be escaped by reloading. */
+  onStop?: VoidFunction
+}
+
+/**
+ * The input row: auto-growing, Enter sends, Shift+Enter breaks the line.
+ *
+ * `disabled` is driven by the session being busy, not by a local guard — the
+ * gateway allows one turn at a time per session and answers a second POST with
+ * a 409, and a turn paused on an approval still counts as busy.
+ */
+const ComposerView = ({
+  disabled = false,
+  isStreaming = false,
+  placeholder = AGENT_LABELS.placeholder,
+  focusKey = null,
+  onSend,
+  onStop,
+}: ComposerProps): JSX.Element => {
+  const [value, setValue] = useState('')
+  const textAreaRef = useRef<HTMLTextAreaElement>(null)
+  const refocusRef = useRef(false)
+
+  /**
+   * Hands focus back when the turn releases the input.
+   *
+   * Disabling a focused `<textarea>` makes the browser blur it, so without this
+   * the caret is gone after every message and the next one needs a click. Armed
+   * only by an actual submit, so a turn finishing never steals focus from
+   * somewhere else the operator has moved to.
+   */
+  useEffect(() => {
+    if (disabled || !refocusRef.current) return
+    refocusRef.current = false
+    textAreaRef.current?.focus()
+  }, [disabled])
+
+  // Focus on a conversation change, but not on the first render — mounting the
+  // panel (or a route page) must not pull focus out of whatever the host had.
+  const lastFocusKeyRef = useRef<string | number | null | undefined>(undefined)
+  useEffect(() => {
+    const previous = lastFocusKeyRef.current
+    lastFocusKeyRef.current = focusKey
+    // `disabled` is a dependency only so the focus lands after the input is
+    // usable again; a change to it alone must not count as a conversation
+    // switch, or every finished turn would grab focus.
+    if (previous === undefined || previous === focusKey || disabled) return
+    textAreaRef.current?.focus()
+  }, [focusKey, disabled])
+
+  // The devkit `TextArea` is a plain `<textarea>` with no auto-grow, so the
+  // height is measured here: reset first, otherwise scrollHeight only ever
+  // grows and the box never shrinks back after a deletion.
+  useLayoutEffect(() => {
+    const node = textAreaRef.current
+    if (!node) return
+    node.style.height = 'auto'
+    const lineHeight = Number.parseFloat(globalThis.getComputedStyle(node).lineHeight) || 20
+    node.style.height = `${Math.min(node.scrollHeight, lineHeight * MAX_ROWS)}px`
+  }, [value])
+
+  const submit = () => {
+    const text = value.trim()
+    if (!text || disabled) return
+    setValue('')
+    refocusRef.current = true
+    onSend(text)
+  }
+
+  const handleSubmit = (event: FormEvent) => {
+    event.preventDefault()
+    submit()
+  }
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+    // `isComposing` guards IME candidate selection, where Enter commits the
+    // candidate rather than the message.
+    if (event.key !== 'Enter' || event.shiftKey || event.nativeEvent.isComposing) return
+    event.preventDefault()
+    submit()
+  }
+
+  return (
+    <form className="mdk-agent-composer" onSubmit={handleSubmit}>
+      <textarea
+        ref={textAreaRef}
+        className="mdk-agent-composer__input"
+        rows={1}
+        value={value}
+        placeholder={placeholder}
+        aria-label={AGENT_LABELS.composer}
+        disabled={disabled}
+        onChange={(event) => setValue(event.target.value)}
+        onKeyDown={handleKeyDown}
+      />
+      {isStreaming && onStop
+        ? (
+            <Button
+              type="button"
+              variant="primary"
+              className="mdk-agent-composer__send"
+              aria-label="Stop"
+              icon={<StopIcon size={18} />}
+              onClick={onStop}
+            />
+          )
+        : (
+            <Button
+              type="submit"
+              variant="primary"
+              className="mdk-agent-composer__send"
+              aria-label="Send"
+              disabled={disabled || value.trim().length === 0}
+              icon={<SendIcon size={18} />}
+            />
+          )}
+    </form>
+  )
+}
+
+export const Composer = memo(ComposerView)

package/src/components/conversation-list.tsx

@@ -0,0 +1,141 @@
+import { Button } from '@tetherto/mdk-react-devkit/primitives'
+import type { JSX } from 'react'
+import { useEffect, useState } from 'react'
+
+import type { Conversation } from '../core/conversation-store'
+import { AGENT_LABELS } from '../branding'
+import { formatConversationMeta } from '../core/format'
+import { MessagePlusIcon, TrashIcon } from './icons'
+
+export type ConversationListProps = {
+  conversations: Conversation[]
+  activeId: string | null
+  /** The conversation with a turn in flight, if any. */
+  runningId?: string | null
+  onSelect: (id: string) => void
+  onCreate: VoidFunction
+  /** Omit to hide the delete affordance entirely. */
+  onDelete?: (id: string) => void
+}
+
+/**
+ * Past conversations, newest first.
+ *
+ * "Running" is local truth, not server truth: the gateway keeps sessions in
+ * memory per process and exposes no way to list them, so the only turn this
+ * client can know about is the one it is streaming itself.
+ */
+export const ConversationList = ({
+  conversations,
+  activeId,
+  runningId = null,
+  onSelect,
+  onCreate,
+  onDelete,
+}: ConversationListProps): JSX.Element => {
+  // Deleting drops a transcript that exists nowhere else — the gateway keeps no
+  // history — so it takes two clicks rather than a modal.
+  const [confirmingId, setConfirmingId] = useState<string | null>(null)
+
+  // A conversation that disappears (deleted elsewhere, or storage cleared) must
+  // not leave the row behind it stuck in the confirming state.
+  useEffect(() => {
+    if (confirmingId && !conversations.some((c) => c.id === confirmingId)) setConfirmingId(null)
+  }, [conversations, confirmingId])
+
+  return (
+    <div className="mdk-agent-conversations">
+      <div className="mdk-agent-conversations__scroll">
+        {conversations.length === 0
+          ? <p className="mdk-agent-conversations__empty">No conversations yet.</p>
+          : null}
+
+        {conversations.map((conversation) => {
+          const isRunning = conversation.id === runningId
+          const isConfirming = conversation.id === confirmingId
+
+          return (
+            <div
+              key={conversation.id}
+              className={`mdk-agent-conversations__row${
+                conversation.id === activeId ? ' mdk-agent-conversations__row--active' : ''
+              }`}
+            >
+              <button
+                type="button"
+                className="mdk-agent-conversations__open"
+                onClick={() => onSelect(conversation.id)}
+              >
+                <span className="mdk-agent-conversations__title">{conversation.title}</span>
+                <span className="mdk-agent-conversations__meta">
+                  {formatConversationMeta(conversation.updatedAt, conversation.messages.length)}
+                </span>
+              </button>
+
+              {isConfirming
+                ? (
+                    <div className="mdk-agent-conversations__confirm">
+                      <button
+                        type="button"
+                        className="mdk-agent-conversations__confirm-yes"
+                        onClick={() => {
+                          setConfirmingId(null)
+                          onDelete?.(conversation.id)
+                        }}
+                      >
+                        Delete
+                      </button>
+                      <button
+                        type="button"
+                        className="mdk-agent-conversations__confirm-no"
+                        onClick={() => setConfirmingId(null)}
+                      >
+                        Cancel
+                      </button>
+                    </div>
+                  )
+                : (
+                    <>
+                      <span
+                        className={`mdk-agent-conversations__badge mdk-agent-conversations__badge--${
+                          isRunning ? 'running' : 'idle'
+                        }`}
+                      >
+                        {isRunning ? 'Running' : 'Idle'}
+                      </span>
+                      {onDelete
+                        ? (
+                            <button
+                              type="button"
+                              className="mdk-agent-conversations__delete"
+                              // Deleting the conversation whose turn is streaming would
+                              // strand the open stream with nowhere to write its result.
+                              disabled={isRunning}
+                              aria-label={`Delete conversation: ${conversation.title}`}
+                              onClick={() => setConfirmingId(conversation.id)}
+                            >
+                              <TrashIcon size={14} />
+                            </button>
+                          )
+                        : null}
+                    </>
+                  )}
+            </div>
+          )
+        })}
+      </div>
+
+      <div className="mdk-agent-conversations__footer">
+        <Button
+          variant="outline"
+          size="sm"
+          fullWidth
+          icon={<MessagePlusIcon size={16} />}
+          onClick={onCreate}
+        >
+          {AGENT_LABELS.newConversation}
+        </Button>
+      </div>
+    </div>
+  )
+}

package/src/components/icons.tsx

@@ -0,0 +1,189 @@
+/**
+ * The glyphs the Co-pilot needs that the devkit icon set does not carry.
+ *
+ * Built with the devkit's `createIcon` factory so they take the same `size` /
+ * `color` props and inherit `currentColor` like every other icon in the system.
+ */
+
+import { createIcon } from '@tetherto/mdk-react-devkit/primitives'
+
+/**
+ * The launcher glyph: a round speech bubble whose tail points to the
+ * bottom-right corner.
+ *
+ * Geometry fitted to the design's 22×22 `Chat` instance rather than eyeballed —
+ * the ring fills the box (center 11, r 10.2) and the tail is a wedge between two
+ * points on the arc, tipped at the corner. Drawn as a single arc-plus-wedge path
+ * so the stroke stays continuous through the join.
+ *
+ * Rendered at 48px against the Figma export this matches ~98% of pixels; the
+ * residue is the hollow Figma leaves between the bubble's underside and the
+ * tail, which is below one pixel at this size.
+ */
+export const ChatIcon = createIcon({
+  displayName: 'ChatIcon',
+  viewBox: '0 0 22 22',
+  defaultWidth: 22,
+  defaultHeight: 22,
+  path: ({ color }) => (
+    <path
+      fill="none"
+      stroke={color}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.9"
+      d="M19.83 16.1A10.2 10.2 0 1 0 14.15 20.7L21 21Z"
+    />
+  ),
+})
+
+export const SendIcon = createIcon({
+  displayName: 'SendIcon',
+  viewBox: '0 0 18 18',
+  defaultWidth: 18,
+  defaultHeight: 18,
+  path: ({ color }) => (
+    <path
+      stroke={color}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.6"
+      d="M16.5 1.5 8.25 9.75M16.5 1.5l-5.25 15-3-6.75-6.75-3 15-5.25Z"
+    />
+  ),
+})
+
+/**
+ * New conversation: a square-cornered message box with a center-bottom tail and
+ * a plus inside.
+ *
+ * Squared off, not rounded — the design's box runs the full 16px width with hard
+ * corners, and the tail drops from the middle of the bottom edge rather than
+ * from a corner.
+ */
+export const MessagePlusIcon = createIcon({
+  displayName: 'MessagePlusIcon',
+  viewBox: '0 0 16 16',
+  defaultWidth: 16,
+  defaultHeight: 16,
+  path: ({ color }) => (
+    <g stroke={color} fill="none" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.1">
+      <path d="M0.75 0.75H15.25V12.05H9.1L7.6 15.1L6.1 12.05H0.75Z" />
+      <path d="M7.6 4.2V9.2M5.1 6.7H10.1" />
+    </g>
+  ),
+})
+
+/**
+ * Conversations: two squares, each with a rule to its right — a list whose
+ * bullets are boxes, not the plain stack of lines this originally drew.
+ */
+export const ListLayoutIcon = createIcon({
+  displayName: 'ListLayoutIcon',
+  viewBox: '0 0 16 16',
+  defaultWidth: 16,
+  defaultHeight: 16,
+  path: ({ color }) => (
+    <g stroke={color} fill="none" strokeLinecap="square" strokeWidth="1.1">
+      <path d="M0.55 1.55H4.45V5.45H0.55Z" />
+      <path d="M0.55 10.55H4.45V14.45H0.55Z" />
+      <path d="M7.1 3.5H15.45M7.1 12.5H15.45" />
+    </g>
+  ),
+})
+
+export const CloseIcon = createIcon({
+  displayName: 'CloseIcon',
+  viewBox: '0 0 16 16',
+  defaultWidth: 16,
+  defaultHeight: 16,
+  path: ({ color }) => (
+    <path
+      stroke={color}
+      strokeLinecap="round"
+      strokeWidth="1.2"
+      d="M4.6 4.6 11.4 11.4M11.4 4.6 4.6 11.4"
+    />
+  ),
+})
+
+export const InfoIcon = createIcon({
+  displayName: 'InfoIcon',
+  viewBox: '0 0 12 12',
+  defaultWidth: 12,
+  defaultHeight: 12,
+  path: ({ color }) => (
+    <g stroke={color} fill="none" strokeLinecap="round" strokeWidth="1.1">
+      <circle cx="6" cy="6" r="5" />
+      <path d="M6 5.2v3.1M6 3.6h.005" />
+    </g>
+  ),
+})
+
+export const TrashIcon = createIcon({
+  displayName: 'TrashIcon',
+  viewBox: '0 0 16 16',
+  defaultWidth: 16,
+  defaultHeight: 16,
+  path: ({ color }) => (
+    <g stroke={color} fill="none" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.1">
+      <path d="M2.5 4.2h11M6.2 4.2V2.6h3.6v1.6" />
+      <path d="M3.9 4.2 4.6 13.4h6.8l0.7-9.2" />
+      <path d="M6.6 6.8v4M9.4 6.8v4" />
+    </g>
+  ),
+})
+
+export const BackIcon = createIcon({
+  displayName: 'BackIcon',
+  viewBox: '0 0 16 16',
+  defaultWidth: 16,
+  defaultHeight: 16,
+  path: ({ color }) => (
+    <path
+      stroke={color}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.4"
+      d="M10 3 5 8l5 5"
+    />
+  ),
+})
+
+/** The filled square a running turn is stopped with, matching the send button's box. */
+export const StopIcon = createIcon({
+  displayName: 'StopIcon',
+  viewBox: '0 0 18 18',
+  defaultWidth: 18,
+  defaultHeight: 18,
+  path: ({ color }) => <rect x="4" y="4" width="10" height="10" rx="1" fill={color} stroke="none" />,
+})
+
+export const TickIcon = createIcon({
+  displayName: 'TickIcon',
+  viewBox: '0 0 12 12',
+  defaultWidth: 12,
+  defaultHeight: 12,
+  path: ({ color }) => (
+    <path
+      stroke={color}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+      d="m2 6.4 2.6 2.6L10 3.5"
+    />
+  ),
+})
+
+export const WarningIcon = createIcon({
+  displayName: 'WarningIcon',
+  viewBox: '0 0 12 12',
+  defaultWidth: 12,
+  defaultHeight: 12,
+  path: ({ color }) => (
+    <g stroke={color} strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.3">
+      <path d="M6 1.5 11 10.5H1L6 1.5Z" />
+      <path d="M6 5v2.2M6 9h.005" />
+    </g>
+  ),
+})

package/src/components/launcher-fab.tsx

@@ -0,0 +1,16 @@
+import type { JSX } from 'react'
+
+import { AGENT_LABELS } from '../branding'
+import { ChatIcon } from './icons'
+
+export type LauncherFabProps = {
+  label?: string
+  onClick: VoidFunction
+}
+
+/** The collapsed state: a 48px round launcher in the bottom-right corner. */
+export const LauncherFab = ({ label = AGENT_LABELS.open, onClick }: LauncherFabProps): JSX.Element => (
+  <button type="button" className="mdk-agent-fab" aria-label={label} onClick={onClick}>
+    <ChatIcon size={22} />
+  </button>
+)

package/src/components/leaked-tool-call-notice.tsx

@@ -0,0 +1,29 @@
+import type { JSX } from 'react'
+
+import type { LeakedToolCall } from '../core/prose'
+
+export type LeakedToolCallNoticeProps = {
+  call: LeakedToolCall
+}
+
+/**
+ * Shown in place of an answer that is really a tool call the model failed to
+ * emit correctly.
+ *
+ * The agent's tool loop is prompt-based: the model is asked to reply with only
+ * `{"tool": …}`, and the producer classifies the reply as a tool call from its
+ * first character being `{`. A model that wraps the JSON in a ```json fence
+ * leads with a backtick, so the call is classified as prose and streamed to the
+ * operator verbatim. Rendering that raw is the most confusing failure in the
+ * stack; naming it is cheap and makes the retry obvious.
+ */
+export const LeakedToolCallNotice = ({ call }: LeakedToolCallNoticeProps): JSX.Element => (
+  <div className="mdk-agent-leaked" role="status">
+    <p className="mdk-agent-leaked__title">The model returned a malformed tool call.</p>
+    <p className="mdk-agent-leaked__body">
+      {`It tried to call `}
+      <code className="mdk-agent-leaked__tool">{call.tool}</code>
+      {` but wrapped the request in formatting, so it was never run. Ask again.`}
+    </p>
+  </div>
+)

package/src/components/markdown-link.tsx

@@ -0,0 +1,30 @@
+import type { ComponentPropsWithoutRef, JSX } from 'react'
+import type { ExtraProps } from 'react-markdown'
+
+export type MarkdownLinkProps = ComponentPropsWithoutRef<'a'> & ExtraProps
+
+/**
+ * A link inside an answer.
+ *
+ * Anything pointing away from the document opens in a new tab: the panel is docked
+ * over whatever page the operator is working on, and following a link in place
+ * would navigate the app out from under them mid-conversation. An in-document
+ * target — a GFM footnote reference, `#...` — has to stay in the panel to work at
+ * all, so it is left alone.
+ *
+ * `react-markdown` blocks `javascript:` hrefs in its default `urlTransform`, so
+ * this is about not losing the operator's place rather than about safety.
+ */
+export const MarkdownLink = ({ href, children, node, ...rest }: MarkdownLinkProps): JSX.Element => {
+  const isInDocument = href?.startsWith('#') ?? false
+
+  return (
+    <a
+      href={href}
+      {...(isInDocument ? {} : { target: '_blank', rel: 'noopener noreferrer' })}
+      {...rest}
+    >
+      {children}
+    </a>
+  )
+}

package/src/components/markdown-text.tsx

@@ -0,0 +1,58 @@
+import type { JSX } from 'react'
+import type { Components } from 'react-markdown'
+import { memo } from 'react'
+import Markdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+
+import { unwrapWholeAnswerFence } from '../core/markdown'
+import { CodeBlock } from './code-block'
+import { MarkdownLink } from './markdown-link'
+import { rehypeHighlightSubset } from './rehype-highlight-subset'
+
+// Module scope, not inline: a fresh array each render makes react-markdown
+// rebuild its processor for every streamed token.
+const REMARK_PLUGINS = [remarkGfm]
+const REHYPE_PLUGINS = [rehypeHighlightSubset]
+const COMPONENTS: Components = { a: MarkdownLink, pre: CodeBlock }
+
+export type MarkdownTextProps = {
+  text: string
+  /**
+   * A turn still streaming renders as plain text. A half-written fence parses as
+   * an unterminated code block, so markdown mid-stream flickers between layouts,
+   * and re-parsing the whole answer on every token is wasted work either way.
+   * Switch on when the turn finishes.
+   */
+  streaming?: boolean
+}
+
+/**
+ * Renders an assistant answer.
+ *
+ * Raw HTML is deliberately not enabled — `react-markdown` ignores it unless
+ * `rehype-raw` is added, which is what keeps untrusted model output from
+ * injecting markup. Do not add `rehype-raw` here.
+ *
+ * Memoized: a live turn re-renders the transcript, and reparsing every settled
+ * answer for each token of the current one is the panel's most expensive
+ * avoidable work.
+ */
+const MarkdownTextView = ({ text, streaming = false }: MarkdownTextProps): JSX.Element => {
+  if (streaming) {
+    return <div className="mdk-agent-markdown mdk-agent-markdown--streaming">{text}</div>
+  }
+
+  return (
+    <div className="mdk-agent-markdown">
+      <Markdown
+        remarkPlugins={REMARK_PLUGINS}
+        rehypePlugins={REHYPE_PLUGINS}
+        components={COMPONENTS}
+      >
+        {unwrapWholeAnswerFence(text)}
+      </Markdown>
+    </div>
+  )
+}
+
+export const MarkdownText = memo(MarkdownTextView)