@standardagents/cli 0.10.1-next.bbd142a → 0.11.0-next.ab7e1ea

package/chat/src/components/Markdown.tsx

@@ -0,0 +1,222 @@
+'use client'
+
+import { useState, useCallback } from 'react'
+import ReactMarkdown from 'react-markdown'
+import ShikiHighlighter, { isInlineCode } from 'react-shiki'
+import type { Components } from 'react-markdown'
+import type { Element } from 'hast'
+
+// Copy icon component
+function CopyIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+    </svg>
+  )
+}
+
+function CheckIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+      <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+    </svg>
+  )
+}
+
+// Language aliases for common variations
+const langAlias: Record<string, string> = {
+  js: 'javascript',
+  ts: 'typescript',
+  tsx: 'tsx',
+  jsx: 'jsx',
+  sh: 'bash',
+  shell: 'bash',
+  zsh: 'bash',
+  yml: 'yaml',
+  py: 'python',
+  rb: 'ruby',
+  rs: 'rust',
+  go: 'go',
+  md: 'markdown',
+  mdx: 'mdx',
+  vue: 'vue',
+  svelte: 'svelte',
+  dockerfile: 'docker',
+  tf: 'hcl',
+  terraform: 'hcl',
+  cs: 'csharp',
+  'c#': 'csharp',
+  'c++': 'cpp',
+  kt: 'kotlin',
+  objc: 'objective-c',
+  'objective-c': 'objc',
+  pl: 'perl',
+  hs: 'haskell',
+  ex: 'elixir',
+  erl: 'erlang',
+  fs: 'fsharp',
+  'f#': 'fsharp',
+  ps1: 'powershell',
+  psm1: 'powershell',
+}
+
+interface CodeBlockProps {
+  className?: string
+  children?: React.ReactNode
+  node?: Element
+}
+
+function CodeBlock({ className, children, node, ...props }: CodeBlockProps) {
+  const [copied, setCopied] = useState(false)
+  const code = String(children).trim()
+  const match = className?.match(/language-(\w+)/)
+  let language = match ? match[1] : 'text'
+
+  // Apply language aliases
+  if (language in langAlias) {
+    language = langAlias[language]
+  }
+
+  const isInline = node ? isInlineCode(node) : !code.includes('\n')
+
+  const handleCopy = useCallback(async () => {
+    await navigator.clipboard.writeText(code)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }, [code])
+
+  if (isInline) {
+    return (
+      <code
+        className="px-1.5 py-0.5 rounded bg-[var(--code-bg)] text-[var(--text-primary)] text-sm font-mono"
+        {...props}
+      >
+        {children}
+      </code>
+    )
+  }
+
+  return (
+    <div className="relative group my-4 rounded-lg overflow-hidden bg-[var(--code-bg)]">
+      <button
+        onClick={handleCopy}
+        className="absolute top-2 right-2 px-2 py-1 rounded-md flex items-center gap-1 text-xs text-[var(--text-muted)] hover:text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] transition-all z-10"
+        title={copied ? 'Copied!' : 'Copy code'}
+      >
+        {copied ? (
+          <>
+            <CheckIcon className="w-3 h-3 text-emerald-500" />
+            <span className="text-emerald-500">Copied</span>
+          </>
+        ) : (
+          <>
+            <CopyIcon className="w-3 h-3" />
+            <span>Copy</span>
+          </>
+        )}
+      </button>
+      <ShikiHighlighter
+        language={language}
+        theme={{
+          light: 'github-light',
+          dark: 'github-dark',
+        }}
+        defaultColor="light-dark()"
+        langAlias={langAlias}
+        showLanguage={false}
+        addDefaultStyles={false}
+        className="text-sm p-4"
+        {...props}
+      >
+        {code}
+      </ShikiHighlighter>
+    </div>
+  )
+}
+
+// Custom components for react-markdown
+const components: Components = {
+  code: CodeBlock as Components['code'],
+  // Style other markdown elements
+  p: ({ children }) => (
+    <p className="mb-4 last:mb-0">{children}</p>
+  ),
+  ul: ({ children }) => (
+    <ul className="list-disc list-inside mb-4 space-y-1">{children}</ul>
+  ),
+  ol: ({ children }) => (
+    <ol className="list-decimal list-inside mb-4 space-y-1">{children}</ol>
+  ),
+  li: ({ children }) => (
+    <li className="text-[var(--text-primary)]">{children}</li>
+  ),
+  h1: ({ children }) => (
+    <h1 className="text-2xl font-bold mb-4 mt-6 first:mt-0 text-[var(--text-primary)]">{children}</h1>
+  ),
+  h2: ({ children }) => (
+    <h2 className="text-xl font-bold mb-3 mt-5 first:mt-0 text-[var(--text-primary)]">{children}</h2>
+  ),
+  h3: ({ children }) => (
+    <h3 className="text-lg font-bold mb-2 mt-4 first:mt-0 text-[var(--text-primary)]">{children}</h3>
+  ),
+  h4: ({ children }) => (
+    <h4 className="text-base font-bold mb-2 mt-3 first:mt-0 text-[var(--text-primary)]">{children}</h4>
+  ),
+  blockquote: ({ children }) => (
+    <blockquote className="border-l-4 border-[var(--border-secondary)] pl-4 my-4 text-[var(--text-secondary)] italic">
+      {children}
+    </blockquote>
+  ),
+  a: ({ href, children }) => (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="text-blue-500 hover:text-blue-400 underline"
+    >
+      {children}
+    </a>
+  ),
+  strong: ({ children }) => (
+    <strong className="font-semibold text-[var(--text-primary)]">{children}</strong>
+  ),
+  em: ({ children }) => (
+    <em className="italic">{children}</em>
+  ),
+  hr: () => (
+    <hr className="my-6 border-[var(--border-primary)]" />
+  ),
+  table: ({ children }) => (
+    <div className="overflow-x-auto my-4">
+      <table className="min-w-full border-collapse border border-[var(--border-primary)]">
+        {children}
+      </table>
+    </div>
+  ),
+  th: ({ children }) => (
+    <th className="border border-[var(--border-primary)] px-3 py-2 bg-[var(--bg-tertiary)] text-left font-semibold">
+      {children}
+    </th>
+  ),
+  td: ({ children }) => (
+    <td className="border border-[var(--border-primary)] px-3 py-2">
+      {children}
+    </td>
+  ),
+}
+
+interface MarkdownProps {
+  children: string
+  className?: string
+}
+
+export function Markdown({ children, className }: MarkdownProps) {
+  return (
+    <div className={className}>
+      <ReactMarkdown components={components}>
+        {children}
+      </ReactMarkdown>
+    </div>
+  )
+}

package/chat/src/components/MessageInput.tsx

@@ -0,0 +1,197 @@
+'use client'
+
+import { useState, useRef, useEffect, useCallback } from 'react'
+import { useThread } from '@standardagents/react'
+
+export function MessageInput() {
+  const [input, setInput] = useState('')
+  const [sending, setSending] = useState(false)
+  const {
+    loading,
+    sendMessage,
+    stopExecution,
+    addAttachment,
+    attachments,
+    removeAttachment,
+    getPreviewUrl,
+  } = useThread()
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const handleSubmit = useCallback(async (e: React.FormEvent) => {
+    e.preventDefault()
+    if ((!input.trim() && attachments.length === 0) || loading || sending) return
+
+    const message = input
+    setInput('')
+    setSending(true)
+
+    try {
+      // SDK's sendMessage automatically includes queued attachments and clears them
+      await sendMessage({ role: 'user', content: message })
+    } catch (error) {
+      console.error('Failed to send message:', error)
+      setInput(message)
+    } finally {
+      setSending(false)
+    }
+  }, [input, attachments.length, loading, sending, sendMessage])
+
+  const handleFileSelect = useCallback(async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files
+    if (!files || files.length === 0) return
+
+    // SDK handles base64 encoding, dimensions, and preview URLs
+    for (const file of Array.from(files)) {
+      await addAttachment(file)
+    }
+
+    // Reset file input and refocus textarea
+    if (fileInputRef.current) {
+      fileInputRef.current.value = ''
+    }
+    textareaRef.current?.focus()
+  }, [addAttachment])
+
+  // Auto-resize textarea
+  useEffect(() => {
+    const textarea = textareaRef.current
+    if (textarea) {
+      textarea.style.height = 'auto'
+      const newHeight = Math.min(Math.max(textarea.scrollHeight, 24), 200)
+      textarea.style.height = newHeight + 'px'
+    }
+  }, [input])
+
+  // Focus textarea when not loading
+  useEffect(() => {
+    if (!loading && !sending) {
+      textareaRef.current?.focus()
+    }
+  }, [loading, sending])
+
+  const isDisabled = loading || sending
+  const canSend = (input.trim() || attachments.length > 0) && !isDisabled
+
+  return (
+    <div className="bg-[var(--bg-tertiary)]/80 backdrop-blur-md rounded-2xl border border-[var(--border-primary)] shadow-lg shadow-black/10 overflow-hidden">
+      {/* Attachment drawer - extends from top of input */}
+      {attachments.length > 0 && (
+        <div className="px-3 pt-3 pb-2 border-b border-[var(--border-secondary)]">
+          <div className="flex flex-wrap gap-2">
+            {attachments.map((attachment) => {
+              // Try multiple ways to get preview URL
+              const previewUrl = getPreviewUrl(attachment) || (attachment as any).localPreviewUrl || (attachment as any).previewUrl
+              const isImage = attachment.mimeType?.startsWith('image/') || (attachment as any).type?.startsWith('image/')
+              return (
+                <div
+                  key={attachment.id}
+                  className="relative group"
+                >
+                  {isImage && previewUrl ? (
+                    <img
+                      src={previewUrl}
+                      alt={attachment.name}
+                      className="h-16 w-auto rounded-lg object-cover border border-[var(--border-secondary)]"
+                    />
+                  ) : (
+                    <div className="h-16 px-3 flex items-center gap-2 rounded-lg bg-[var(--bg-hover)] border border-[var(--border-secondary)]">
+                      <svg className="w-4 h-4 text-[var(--text-secondary)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
+                      </svg>
+                      <span className="text-xs text-[var(--text-secondary)] max-w-[100px] truncate">{attachment.name}</span>
+                    </div>
+                  )}
+                  <button
+                    type="button"
+                    onClick={() => removeAttachment(attachment.id)}
+                    className="absolute -top-1.5 -right-1.5 w-5 h-5 bg-[var(--bg-active)] hover:bg-[var(--bg-hover)] rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
+                  >
+                    <svg className="w-3 h-3 text-[var(--text-primary)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                  </button>
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      )}
+
+      {/* Input row */}
+      <form onSubmit={handleSubmit}>
+        <div className="flex items-center gap-2 px-2 py-1.5">
+          {/* Attachment button */}
+          <input
+            ref={fileInputRef}
+            type="file"
+            multiple
+            accept="image/*,.pdf,.txt,.md,.json,.csv"
+            onChange={handleFileSelect}
+            className="hidden"
+          />
+          <button
+            type="button"
+            onClick={() => fileInputRef.current?.click()}
+            disabled={isDisabled}
+            className="p-2 text-[var(--text-tertiary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-hover)] rounded-xl transition-colors disabled:opacity-50 disabled:cursor-not-allowed shrink-0"
+            title="Attach files"
+          >
+            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13" />
+            </svg>
+          </button>
+
+          {/* Textarea */}
+          <textarea
+            ref={textareaRef}
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault()
+                handleSubmit(e)
+              }
+            }}
+            placeholder="Message..."
+            rows={1}
+            disabled={isDisabled}
+            className="flex-1 bg-transparent resize-none text-[var(--text-primary)] placeholder-[var(--text-tertiary)] focus:outline-none disabled:opacity-50 text-[15px] leading-normal py-2.5 max-h-[200px] overflow-y-auto scrollbar-hide"
+            style={{ scrollbarWidth: 'none' }}
+          />
+
+          {/* Stop / Send button */}
+          {loading ? (
+            <button
+              type="button"
+              onClick={stopExecution}
+              className="p-2 text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-hover)] rounded-xl transition-colors shrink-0"
+              title="Stop generating"
+            >
+              <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                <rect x="6" y="6" width="12" height="12" rx="2" />
+              </svg>
+            </button>
+          ) : (
+            <button
+              type="submit"
+              disabled={!canSend}
+              className="p-2 rounded-xl bg-[var(--text-primary)] text-[var(--bg-primary)] hover:opacity-90 disabled:opacity-30 disabled:cursor-not-allowed transition-all duration-150 shrink-0"
+            >
+              {sending ? (
+                <svg className="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
+                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+                </svg>
+              ) : (
+                <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4.5 10.5L12 3m0 0l7.5 7.5M12 3v18" />
+                </svg>
+              )}
+            </button>
+          )}
+        </div>
+      </form>
+    </div>
+  )
+}