free-coding-models 0.5.28 → 0.5.30

package/web/src/components/playground/PlaygroundChat.jsx

@@ -0,0 +1,527 @@
+/**
+ * @file web/src/components/playground/PlaygroundChat.jsx
+ * @description The SINGLE shared playground chat core used by all three
+ *   playgrounds in the web app:
+ *     1. PlaygroundView       (full-screen modal, multi-turn)     — variant="full"
+ *     2. RouterView           ("Test Router" section)             — variant="mini"
+ *     3. ExpandedDetailRow    ("Mini Playground" column)          — variant="mini"
+ *
+ * 📖 Why this exists: the three playgrounds used to each ship their own copy
+ * 📖 of the input/transcript/SSE-parsing/metadata code, which drifted apart —
+ * 📖 ExpandedDetailRow showed NO metadata at all, RouterView showed a partial
+ * 📖 badge, and PlaygroundView read body fields (x_routed_via / x_latency_ms)
+ * 📖 that the daemon never actually emits, so its chips were dead code. This
+ * 📖 component is the single source of truth: identical look + identical
+ * 📖 metadata on every surface.
+ *
+ * 📖 Metadata contract (the thing the user asked to harmonize):
+ * 📖   • Under every USER bubble → the addressed model (`provider/model`),
+ * 📖     or the router's Primary pick when routing through `fcm`.
+ * 📖   • Under every ASSISTANT bubble →
+ * 📖       `provider/model · 1234ms · 42 tok · 34.1 t/s`
+ * 📖     The served model is read from the response header `x-fcm-router-model`
+ * 📖     (forwarded by the daemon for `fcm`); for direct routing the served
+ * 📖     model is simply the requested model. Latency is measured client-side
+ * 📖     (send → stream end); tokens come from the final chunk's `usage`;
+ * 📖     TPS = tokens / (latencyMs / 1000).
+ *
+ * 📖 All traffic goes through `/api/playground/chat` (the proxy in server.js)
+ * 📖 so the browser never touches providers directly (no CORS, no exposed keys).
+ *
+ * @functions
+ *   → PlaygroundChat — self-contained chat core (input + transcript + meta)
+ *   → parseModelKey  — split "provider/modelId" into { provider, model }
+ *   → extractErrorMessage — normalize OpenAI-style error payloads to a string
+ *   → renderAssistantText  — render triple-backtick code blocks without a dep
+ */
+import {
+  useState, useRef, useCallback, useEffect, useImperativeHandle, forwardRef,
+} from 'react'
+import {
+  IconSend, IconX, IconCopy, IconCheck, IconBolt, IconClock,
+  IconAlertTriangle, IconRefresh, IconLoader,
+} from '@tabler/icons-react'
+import styles from './PlaygroundChat.module.css'
+
+/**
+ * Split a "provider/modelId" key into its parts. Returns { provider, model }.
+ * Tolerant: "fcm" → { provider: 'fcm', model: '' }; "a/b/c" → provider='a', model='b/c'.
+ * @param {string|null|undefined} key
+ * @returns {{provider:string, model:string}|null}
+ */
+function parseModelKey(key) {
+  if (!key) return null
+  const idx = key.indexOf('/')
+  if (idx <= 0) return { provider: key, model: '' }
+  return { provider: key.slice(0, idx), model: key.slice(idx + 1) }
+}
+
+/**
+ * 📖 Normalize an OpenAI-style error body to a plain string. Both shapes are
+ * 📖 accepted: `{ error: "msg" }` (custom) and `{ error: { message, type, code } }`
+ * 📖 (the OpenAI wire format). Returning a string is critical because React
+ * 📖 throws if a non-string sneaks into JSX.
+ * @param {unknown} errBody
+ * @returns {string|null}
+ */
+function extractErrorMessage(errBody) {
+  if (!errBody || typeof errBody !== 'object') {
+    return typeof errBody === 'string' ? errBody : null
+  }
+  if (typeof errBody.error === 'string') return errBody.error
+  if (errBody.error && typeof errBody.error === 'object' && typeof errBody.error.message === 'string') {
+    return errBody.error.message
+  }
+  if (typeof errBody.message === 'string') return errBody.message
+  return null
+}
+
+/**
+ * 📖 Render assistant text with triple-backtick code blocks rendered as <pre>.
+ * 📖 No markdown dependency — keeps the dashboard zero-dep. Shared by every
+ * 📖 playground so code looks identical everywhere.
+ * @param {string} text
+ * @returns {React.ReactNode}
+ */
+function renderAssistantText(text) {
+  if (!text) return null
+  const parts = text.split(/(```[\s\S]*?```)/g)
+  return parts.map((part, idx) => {
+    const codeMatch = part.match(/^```([a-zA-Z0-9_-]+)?\n?([\s\S]*?)```$/)
+    if (codeMatch) {
+      return (
+        <pre key={idx} className={styles.codeBlock}>
+          <code>{codeMatch[2].replace(/\n$/, '')}</code>
+        </pre>
+      )
+    }
+    return <span key={idx}>{part}</span>
+  })
+}
+
+/** Round to one decimal, returns '—' for non-finite numbers. */
+function round1(n) {
+  return Number.isFinite(n) ? (Math.round(n * 10) / 10).toFixed(1) : '—'
+}
+
+/**
+ * Shared playground chat core. See file header.
+ *
+ * @param {Object} props
+ * @param {string} props.model — 'fcm' (auto-router) or 'providerKey/modelId' (direct).
+ * @param {boolean} [props.disabled=false] — disable the input + send button (e.g. daemon down).
+ * @param {'full'|'mini'} [props.variant='mini'] — density/size of the UI.
+ * @param {boolean} [props.stream=true] — request SSE streaming vs. one-shot JSON.
+ * @param {string} [props.placeholder] — input placeholder.
+ * @param {string} [props.targetLabel] — override the "addressed model" label shown under the
+ *   user bubble. The RouterView passes its Primary pick here so the user sees which model the
+ *   priority-first router will try first. When omitted, the addressed model is derived from `model`.
+ * @param {string[]} [props.suggestions] — clickable chips in the empty state.
+ * @param {string} [props.emptyTitle] — empty-state title.
+ * @param {string} [props.emptyHint] — empty-state hint line.
+ * @param {React.ReactNode} [props.emptyIcon] — empty-state icon.
+ * @param {React.ReactNode} [props.children] — optional extra node rendered above the transcript
+ *   (used by PlaygroundView to host its daemon-start panel / pre-prompt hint).
+ * @param {(summary:{count:number,totalTokens:number,lastMeta?:object}) => void} [props.onTurnComplete]
+ *   — fired after every turn so hosts can update their own chrome (token counters, etc.).
+ * @param {React.Ref} ref — imperative handle exposing { clear(), focus(), getMessages() }.
+ */
+const PlaygroundChat = forwardRef(function PlaygroundChat({
+  model,
+  disabled = false,
+  variant = 'mini',
+  stream = true,
+  placeholder,
+  targetLabel,
+  suggestions = [],
+  emptyTitle,
+  emptyHint,
+  emptyIcon,
+  children,
+  onTurnComplete,
+}, ref) {
+  // 📖 Each message: { id, role, content, target?, meta?, error?, aborted?, pending? }
+  // 📖 meta = { provider, model, latencyMs, tokens, tps }
+  const [messages, setMessages] = useState([])
+  const [input, setInput] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [copiedIdx, setCopiedIdx] = useState(null)
+  const abortRef = useRef(null)
+  const inputRef = useRef(null)
+  const transcriptRef = useRef(null)
+  // 📖 Ref mirror of `messages` so the imperative handle (below) can read the
+  // 📖 live transcript without being recreated on every message change.
+  const messagesRef = useRef([])
+
+  useImperativeHandle(ref, () => ({
+    /** Stop any in-flight stream and clear the transcript. */
+    clear: () => {
+      if (abortRef.current) { abortRef.current.abort(); abortRef.current = null }
+      setLoading(false)
+      setMessages([])
+    },
+    focus: () => inputRef.current?.focus(),
+    // 📖 `getMessages` is a stable ref read, so the handle never has to be
+    // 📖 recreated when messages change.
+    getMessages: () => messagesRef.current,
+  }), [])
+
+  // 📖 Keep the ref mirror in sync with the state transcript.
+  useEffect(() => { messagesRef.current = messages }, [messages])
+
+  // 📖 Notify the host after a turn SETTLES (token counters etc.). Gated on
+  // 📖 the last message being finalized (meta / error / aborted) so it doesn't
+  // 📖 fire on every streamed token — only once per completed exchange.
+  useEffect(() => {
+    if (typeof onTurnComplete !== 'function') return
+    const last = messages[messages.length - 1]
+    if (!last || last.pending) return // still streaming
+    const settled = last.role === 'assistant' && (!!last.meta || last.error || last.aborted)
+    if (!settled) return
+    const totalTokens = messages.reduce((sum, m) => sum + (m.meta?.tokens || 0), 0)
+    onTurnComplete({ count: messages.length, totalTokens, lastMeta: last.meta })
+  }, [messages, onTurnComplete])
+
+  // 📖 Auto-scroll the transcript to the bottom as content streams in.
+  useEffect(() => {
+    const el = transcriptRef.current
+    if (el) el.scrollTop = el.scrollHeight
+  }, [messages, loading])
+
+  const stop = useCallback(() => {
+    if (abortRef.current) { abortRef.current.abort(); abortRef.current = null }
+    setLoading(false)
+  }, [])
+
+  const sendMessage = useCallback(async (overrideText) => {
+    const text = (typeof overrideText === 'string' ? overrideText : input).trim()
+    if (!text || loading || disabled) return
+
+    setInput('')
+
+    // 📖 Build the addressed-model label for the USER bubble.
+    const targetKey = targetLabel || (model === 'fcm' ? 'fcm' : model)
+
+    const userMsg = { id: `u-${Date.now()}`, role: 'user', content: text, ts: Date.now(), target: targetKey }
+    const assistantId = `a-${Date.now()}`
+    const assistantMsg = { id: assistantId, role: 'assistant', content: '', pending: true }
+    const transcript = [...messages, userMsg]
+    setMessages([...transcript, assistantMsg])
+    setLoading(true)
+
+    const controller = new AbortController()
+    abortRef.current = controller
+    const startedAt = Date.now()
+
+    // 📖 Patch helpers: update the in-flight assistant bubble in place.
+    const patchAssistant = (patch) => setMessages((prev) => prev.map((m) => (
+      m.id === assistantId ? { ...m, ...patch } : m
+    )))
+
+    // 📖 Served-model resolution. The daemon (fcm route) forwards the real
+    // 📖 served model through the `x-fcm-router-model` response header; for
+    // 📖 direct routing there is no such header, so the served model is the
+    // 📖 requested one. We resolve the header lazily once we have the resp.
+    let servedKey = null
+    const resolveServed = (resp) => {
+      const headerKey = resp.headers.get('x-fcm-router-model')
+      servedKey = headerKey || (model !== 'fcm' ? model : null)
+      return parseModelKey(servedKey) || { provider: model, model: '' }
+    }
+
+    const body = {
+      model: model || 'fcm',
+      messages: transcript.map(({ role, content }) => ({ role, content })),
+      stream,
+      temperature: 0.7,
+    }
+
+    try {
+      const resp = await fetch('/api/playground/chat', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+        signal: controller.signal,
+      })
+
+      if (!resp.ok) {
+        const errBody = await resp.json().catch(() => null)
+        const errMsg = extractErrorMessage(errBody) || `Request failed (${resp.status})`
+        patchAssistant({ pending: false, error: errMsg })
+        return
+      }
+
+      if (stream) {
+        // ── SSE streaming path ─────────────────────────────────────────
+        const reader = resp.body?.getReader()
+        if (!reader) throw new Error('No stream reader available')
+        const decoder = new TextDecoder()
+        let buffer = ''
+        let acc = ''
+        let served = resolveServed(resp)
+        let tokens = 0
+        let servedKnown = !!servedKey
+
+        while (true) {
+          const { value, done } = await reader.read()
+          if (done) break
+          buffer += decoder.decode(value, { stream: true })
+          // 📖 Split on blank-line SSE boundaries; keep the trailing partial.
+          const events = buffer.split(/\n\n/)
+          buffer = events.pop() || ''
+          for (const event of events) {
+            const lines = event.split(/\n/)
+            for (const line of lines) {
+              if (!line.startsWith('data:')) continue
+              const payload = line.slice(5).trim()
+              if (payload === '[DONE]') continue
+              try {
+                const json = JSON.parse(payload)
+                const delta = json?.choices?.[0]?.delta?.content
+                if (typeof delta === 'string' && delta) {
+                  acc += delta
+                  patchAssistant({ content: acc, pending: false })
+                }
+                // 📖 Tokens: the final chunk carries usage. Prefer completion
+                // 📖 tokens (matches what was generated) over total.
+                const usage = json?.usage
+                if (usage) {
+                  if (typeof usage.completion_tokens === 'number') tokens = usage.completion_tokens
+                  else if (typeof usage.total_tokens === 'number') tokens = usage.total_tokens
+                }
+                // 📖 Some daemons/proxies also forward the served model in the
+                // 📖 body — accept it as a fallback to the header.
+                if (!servedKnown && json?.x_routed_via) {
+                  served = { provider: json.x_routed_via, model: json.x_routed_model || '' }
+                  servedKnown = true
+                }
+              } catch {
+                // 📖 Ignore non-JSON keep-alive frames.
+              }
+            }
+          }
+        }
+
+        const latencyMs = Date.now() - startedAt
+        const tps = tokens > 0 && latencyMs > 0 ? tokens / (latencyMs / 1000) : null
+        patchAssistant({
+          pending: false,
+          meta: {
+            provider: served.provider,
+            model: served.model,
+            latencyMs,
+            tokens,
+            tps,
+          },
+        })
+      } else {
+        // ── One-shot JSON path ─────────────────────────────────────────
+        const json = await resp.json().catch(() => null)
+        const content = json?.choices?.[0]?.message?.content || ''
+        const usage = json?.usage || {}
+        const tokens = typeof usage.completion_tokens === 'number'
+          ? usage.completion_tokens
+          : (usage.total_tokens || 0)
+        const served = resolveServed(resp)
+        const latencyMs = Date.now() - startedAt
+        const tps = tokens > 0 && latencyMs > 0 ? tokens / (latencyMs / 1000) : null
+        patchAssistant({
+          pending: false,
+          content,
+          meta: {
+            provider: served.provider,
+            model: served.model,
+            latencyMs,
+            tokens,
+            tps,
+          },
+        })
+      }
+
+    } catch (err) {
+      if (err?.name === 'AbortError') {
+        patchAssistant({ pending: false, aborted: true })
+      } else {
+        patchAssistant({ pending: false, error: err?.message || String(err) })
+      }
+    } finally {
+      setLoading(false)
+      abortRef.current = null
+    }
+  }, [input, loading, disabled, messages, model, stream, targetLabel, onTurnComplete])
+
+  const handleKeyDown = useCallback((e) => {
+    // 📖 Enter sends, Shift+Enter inserts a newline (full variant only).
+    if (e.key === 'Enter' && !e.shiftKey && variant === 'full') {
+      e.preventDefault()
+      void sendMessage()
+    } else if (e.key === 'Enter' && variant === 'mini') {
+      e.preventDefault()
+      void sendMessage()
+    }
+  }, [sendMessage, variant])
+
+  const copyMessage = useCallback(async (idx, content) => {
+    try {
+      await navigator.clipboard.writeText(content || '')
+      setCopiedIdx(idx)
+      setTimeout(() => setCopiedIdx(null), 1500)
+    } catch {}
+  }, [])
+
+  // 📖 Tiny auto-grow for the textarea so 'full' expands with long prompts.
+  const handleInputChange = useCallback((e) => {
+    setInput(e.target.value)
+    if (variant === 'full') {
+      const el = e.target
+      el.style.height = 'auto'
+      el.style.height = `${Math.min(el.scrollHeight, 180)}px`
+    }
+  }, [variant])
+
+  const variantClass = variant === 'full' ? styles.full : styles.mini
+
+  return (
+    <div className={`${styles.root} ${variantClass}`}>
+      {children}
+
+      <div className={styles.transcript} ref={transcriptRef}>
+        {messages.length === 0 ? (
+          <div className={styles.empty}>
+            {emptyIcon && <div className={styles.emptyIcon}>{emptyIcon}</div>}
+            {emptyTitle && <div className={styles.emptyTitle}>{emptyTitle}</div>}
+            {emptyHint && <div className={styles.emptyHint}>{emptyHint}</div>}
+            {suggestions.length > 0 && (
+              <div className={styles.suggestions}>
+                {suggestions.map((s) => (
+                  <button key={s} className={styles.chip} onClick={() => void sendMessage(s)} type="button">
+                    {s}
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+        ) : (
+          messages.map((m, idx) => (
+            <div key={m.id || idx} className={`${styles.message} ${styles[m.role] || ''}`}>
+              <div className={styles.bubbleRow}>
+                <span className={styles.role}>{m.role}</span>
+                {m.role === 'assistant' && m.content && (
+                  <button
+                    className={styles.copyBtn}
+                    onClick={() => copyMessage(idx, m.content)}
+                    title="Copy reply"
+                    type="button"
+                  >
+                    {copiedIdx === idx ? <IconCheck size={11} /> : <IconCopy size={11} />}
+                  </button>
+                )}
+              </div>
+
+              <div className={styles.bubble}>
+                {m.role === 'assistant' ? (
+                  <>
+                    {m.content ? renderAssistantText(m.content) : null}
+                    {loading && idx === messages.length - 1 && m.pending && !m.aborted && (
+                      <span className={styles.cursor} />
+                    )}
+                    {!m.content && m.pending && <span className={styles.typing}>…</span>}
+                  </>
+                ) : (
+                  m.content
+                )}
+              </div>
+
+              {/* ── Metadata row under the USER bubble: addressed model ── */}
+              {m.role === 'user' && m.target && (
+                <div className={styles.meta}>
+                  <span className={`${styles.metaChip} ${styles.target}`} title="Addressed model">
+                    <IconBolt size={11} />
+                    {m.target}
+                  </span>
+                </div>
+              )}
+
+              {/* ── Metadata row under the ASSISTANT bubble: served model + ms + tok + t/s ── */}
+              {m.role === 'assistant' && !m.pending && m.meta && (
+                <div className={styles.meta}>
+                  {m.meta.provider && (
+                    <span className={`${styles.metaChip} ${styles.modelChip}`} title="Model that served this reply">
+                      <IconBolt size={11} />
+                      {m.meta.provider}{m.meta.model ? `/${m.meta.model}` : ''}
+                    </span>
+                  )}
+                  {m.meta.latencyMs != null && (
+                    <span className={`${styles.metaChip} ${styles.latencyChip}`} title="Response time (send → end)">
+                      <IconClock size={11} />
+                      {Math.round(m.meta.latencyMs)}ms
+                    </span>
+                  )}
+                  {m.meta.tokens > 0 && (
+                    <span className={styles.metaChip} title="Completion tokens">
+                      {m.meta.tokens} tok
+                    </span>
+                  )}
+                  {m.meta.tps != null && m.meta.tps > 0 && (
+                    <span className={`${styles.metaChip} ${styles.tpsChip}`} title="Tokens per second">
+                      <IconRefresh size={11} />
+                      {round1(m.meta.tps)} t/s
+                    </span>
+                  )}
+                </div>
+              )}
+
+              {m.role === 'assistant' && m.error && (
+                <div className={styles.meta}>
+                  <span className={`${styles.metaChip} ${styles.errorChip}`} title="Error">
+                    <IconAlertTriangle size={11} />
+                    {m.error}
+                  </span>
+                </div>
+              )}
+              {m.role === 'assistant' && m.aborted && !m.error && (
+                <div className={styles.meta}>
+                  <span className={styles.metaChip}>stopped</span>
+                </div>
+              )}
+            </div>
+          ))
+        )}
+      </div>
+
+      <div className={styles.inputBar}>
+        <textarea
+          ref={inputRef}
+          className={styles.input}
+          placeholder={placeholder || (variant === 'full'
+            ? 'Ask anything. Enter to send, Shift+Enter for a newline.'
+            : 'Send a message…')}
+          value={input}
+          onChange={handleInputChange}
+          onKeyDown={handleKeyDown}
+          disabled={disabled}
+          rows={1}
+        />
+        {loading ? (
+          <button className={styles.stopBtn} onClick={stop} title="Stop generating" type="button">
+            <IconLoader size={14} className={styles.spin} />
+            {variant === 'full' ? 'Stop' : ''}
+          </button>
+        ) : (
+          <button
+            className={styles.sendBtn}
+            onClick={() => void sendMessage()}
+            disabled={disabled || !input.trim()}
+            title="Send"
+            type="button"
+          >
+            <IconSend size={14} />
+            {variant === 'full' ? 'Send' : ''}
+          </button>
+        )}
+      </div>
+    </div>
+  )
+})
+
+export default PlaygroundChat