bingocode 1.0.2 → 1.0.3

package/desktop/src/components/markdown/MarkdownRenderer.tsx

@@ -0,0 +1,229 @@
+import { useMemo, useCallback } from 'react'
+import DOMPurify from 'dompurify'
+import { marked, type Tokens } from 'marked'
+import { CodeViewer } from '../chat/CodeViewer'
+import { MermaidRenderer } from '../chat/MermaidRenderer'
+
+type Props = {
+  content: string
+  variant?: 'default' | 'document'
+  className?: string
+}
+
+type CodeBlock = {
+  id: string
+  code: string
+  language: string | undefined
+}
+
+const MERMAID_LANGUAGE = 'mermaid'
+const PLAINTEXT_LANGUAGES = new Set(['', 'text', 'plaintext', 'plain'])
+const MERMAID_DIAGRAM_START = /^(graph|flowchart|sequenceDiagram|classDiagram|stateDiagram(?:-v2)?|erDiagram|journey|gantt|pie|gitGraph|mindmap|timeline|requirementDiagram|quadrantChart|xychart-beta|sankey-beta|block-beta|packet-beta|architecture|kanban)\b/i
+
+function normalizeCodeLanguage(language: string | undefined): string | undefined {
+  const normalized = language?.trim().split(/\s+/)[0]?.toLowerCase()
+  return normalized || undefined
+}
+
+function looksLikeMermaid(code: string): boolean {
+  const firstMeaningfulLine = code
+    .split('\n')
+    .map((line) => line.trim())
+    .find(Boolean)
+
+  return firstMeaningfulLine ? MERMAID_DIAGRAM_START.test(firstMeaningfulLine) : false
+}
+
+function shouldRenderAsMermaid(block: CodeBlock): boolean {
+  const normalizedLanguage = normalizeCodeLanguage(block.language)
+
+  if (normalizedLanguage === MERMAID_LANGUAGE) {
+    return true
+  }
+
+  if (!PLAINTEXT_LANGUAGES.has(normalizedLanguage ?? '')) {
+    return false
+  }
+
+  return looksLikeMermaid(block.code)
+}
+
+const renderer = new marked.Renderer()
+
+let pendingCodeBlocks: CodeBlock[] = []
+
+renderer.code = function ({ text, lang }: Tokens.Code) {
+  const id = `cb-${pendingCodeBlocks.length}`
+  pendingCodeBlocks.push({
+    id,
+    code: text,
+    language: normalizeCodeLanguage(lang || undefined),
+  })
+  return `<div data-codeblock-id="${id}"></div>`
+}
+
+marked.setOptions({
+  breaks: true,
+  gfm: true,
+})
+marked.use({ renderer })
+
+function enhanceMarkdownHtml(html: string): string {
+  const cleanHtml = DOMPurify.sanitize(html, {
+    ADD_TAGS: ['use'],
+    ADD_ATTR: ['xlink:href'],
+  })
+
+  if (typeof document === 'undefined') {
+    return cleanHtml
+  }
+
+  const container = document.createElement('div')
+  container.innerHTML = cleanHtml
+
+  container.querySelectorAll('table').forEach((table) => {
+    if (table.parentElement?.classList.contains('md-table-wrap')) return
+    const wrapper = document.createElement('div')
+    wrapper.className = 'md-table-wrap'
+    table.parentNode?.insertBefore(wrapper, table)
+    wrapper.appendChild(table)
+  })
+
+  container.querySelectorAll('a[href]').forEach((link) => {
+    link.setAttribute('target', '_blank')
+    link.setAttribute('rel', 'noreferrer noopener')
+  })
+
+  return container.innerHTML
+}
+
+function parseMarkdown(content: string): { html: string; codeBlocks: CodeBlock[] } {
+  pendingCodeBlocks = []
+  const html = marked.parse(content) as string
+  const codeBlocks = [...pendingCodeBlocks]
+  pendingCodeBlocks = []
+  return { html, codeBlocks }
+}
+
+const BASE_PROSE_CLASSES = `markdown-prose prose prose-sm max-w-none text-[var(--color-text-primary)]
+  prose-headings:text-[var(--color-text-primary)] prose-headings:font-semibold
+  prose-p:my-2 prose-p:leading-relaxed
+  prose-p:break-words
+  prose-code:text-[13px] prose-code:text-[var(--color-primary-fixed)] prose-code:font-[var(--font-mono)] prose-code:bg-[var(--color-surface-container-high)] prose-code:border prose-code:border-[var(--color-border)] prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded-md prose-code:before:hidden prose-code:after:hidden
+  prose-pre:!bg-transparent prose-pre:!p-0 prose-pre:!shadow-none
+  prose-a:text-[var(--color-text-accent)] prose-a:no-underline hover:prose-a:underline
+  prose-strong:text-[var(--color-text-primary)]
+  prose-ul:my-2 prose-ol:my-2
+  prose-li:my-0.5
+  prose-table:my-0 prose-table:w-full prose-table:table-auto prose-table:text-sm
+  prose-th:bg-[var(--color-surface-info)] prose-th:px-3 prose-th:py-2 prose-th:text-left prose-th:whitespace-normal prose-th:break-words prose-th:align-top prose-th:border-b prose-th:border-[var(--color-border)]
+  prose-td:px-3 prose-td:py-2 prose-td:border-b prose-td:border-[var(--color-border)] prose-td:whitespace-normal prose-td:break-words prose-td:align-top prose-td:bg-[var(--color-surface)]
+  [&_.md-table-wrap]:my-5 [&_.md-table-wrap]:overflow-x-auto [&_.md-table-wrap]:rounded-xl [&_.md-table-wrap]:border [&_.md-table-wrap]:border-[var(--color-border)] [&_.md-table-wrap]:bg-[var(--color-surface-container-lowest)]`
+
+const DOCUMENT_PROSE_CLASSES = `
+  prose-p:text-[15px] prose-p:leading-7
+  prose-headings:scroll-mt-6 prose-headings:tracking-[-0.01em]
+  prose-h1:mb-4 prose-h1:text-2xl prose-h1:font-semibold prose-h1:leading-tight
+  prose-h2:mt-8 prose-h2:mb-3 prose-h2:border-b prose-h2:border-[var(--color-border)] prose-h2:pb-2 prose-h2:text-xl prose-h2:font-semibold
+  prose-h3:mt-6 prose-h3:mb-2 prose-h3:text-base prose-h3:font-semibold
+  prose-h4:mt-5 prose-h4:mb-2 prose-h4:text-sm prose-h4:font-semibold
+  prose-blockquote:my-4 prose-blockquote:rounded-r-lg prose-blockquote:border-l-4 prose-blockquote:border-[var(--color-outline-variant)] prose-blockquote:bg-[var(--color-surface-container-low)] prose-blockquote:px-4 prose-blockquote:py-2 prose-blockquote:italic
+  prose-hr:my-6 prose-hr:border-[var(--color-border)]
+  prose-img:rounded-lg prose-img:border prose-img:border-[var(--color-border)]
+  prose-kbd:rounded prose-kbd:border prose-kbd:border-[var(--color-border)] prose-kbd:bg-[var(--color-surface-container-lowest)] prose-kbd:px-1.5 prose-kbd:py-0.5 prose-kbd:font-[var(--font-mono)] prose-kbd:text-[12px] prose-kbd:font-normal prose-kbd:text-[var(--color-text-secondary)] prose-kbd:shadow-none
+  prose-ul:pl-5 prose-ul:[&>li]:marker:text-[var(--color-text-tertiary)]
+  prose-ol:pl-5 prose-ol:[&>li]:marker:text-[var(--color-text-tertiary)]
+  prose-li:my-1.5
+  prose-table:my-0`
+
+function getProseClasses(variant: 'default' | 'document', className?: string) {
+  return [BASE_PROSE_CLASSES, variant === 'document' ? DOCUMENT_PROSE_CLASSES : '', className ?? '']
+    .filter(Boolean)
+    .join(' ')
+}
+
+export function MarkdownRenderer({ content, variant = 'default', className }: Props) {
+  const { html, codeBlocks } = useMemo(() => parseMarkdown(content), [content])
+  const proseClasses = useMemo(
+    () => getProseClasses(variant, className),
+    [variant, className],
+  )
+
+  const parts = useMemo(() => {
+    if (codeBlocks.length === 0) {
+      return [{ type: 'html' as const, content: html }]
+    }
+
+    const result: Array<{ type: 'html'; content: string } | { type: 'code'; block: CodeBlock }> = []
+    let remaining = html
+
+    for (const block of codeBlocks) {
+      const marker = `<div data-codeblock-id="${block.id}"></div>`
+      const idx = remaining.indexOf(marker)
+      if (idx === -1) continue
+
+      const before = remaining.slice(0, idx)
+      if (before) {
+        result.push({ type: 'html', content: before })
+      }
+      result.push({ type: 'code', block })
+      remaining = remaining.slice(idx + marker.length)
+    }
+
+    if (remaining) {
+      result.push({ type: 'html', content: remaining })
+    }
+
+    return result
+  }, [html, codeBlocks])
+
+  const handleClick = useCallback(async (event: React.MouseEvent<HTMLDivElement>) => {
+    const target = event.target as HTMLElement | null
+    const button = target?.closest<HTMLButtonElement>('[data-copy-code]')
+    if (!button) return
+
+    const text = button.getAttribute('data-copy-code')
+    if (!text) return
+
+    try {
+      await navigator.clipboard.writeText(text)
+      const original = button.textContent
+      button.textContent = 'Copied'
+      window.setTimeout(() => {
+        button.textContent = original
+      }, 1500)
+    } catch {
+      // Ignore clipboard errors
+    }
+  }, [])
+
+  if (codeBlocks.length === 0) {
+    const cleanHtml = enhanceMarkdownHtml(html)
+    return (
+      <div
+        className={proseClasses}
+        dangerouslySetInnerHTML={{ __html: cleanHtml }}
+        onClick={handleClick}
+      />
+    )
+  }
+
+  return (
+    <div className={proseClasses} onClick={handleClick}>
+      {parts.map((part, i) =>
+        part.type === 'html' ? (
+          <div key={i} dangerouslySetInnerHTML={{ __html: enhanceMarkdownHtml(part.content) }} />
+        ) : shouldRenderAsMermaid(part.block) ? (
+          <MermaidRenderer key={part.block.id} code={part.block.code} />
+        ) : (
+          <div key={part.block.id} className="my-4">
+            <CodeViewer
+              code={part.block.code}
+              language={part.block.language}
+            />
+          </div>
+        )
+      )}
+    </div>
+  )
+}

package/desktop/src/components/settings/ClaudeOfficialLogin.tsx

@@ -0,0 +1,107 @@
+// desktop/src/components/settings/ClaudeOfficialLogin.tsx
+//
+// 显示当前 Claude Official OAuth 登录状态,提供 Login / Logout 按钮。
+// 点击 Login 调 Tauri shell.open 打开浏览器走 OAuth flow;浏览器回 callback
+// 到 haha server 后,store 的 polling 自动刷新 UI 展示"已登录"。
+
+import { useEffect } from 'react'
+import { open as shellOpen } from '@tauri-apps/plugin-shell'
+import { useHahaOAuthStore } from '../../stores/hahaOAuthStore'
+import { useTranslation } from '../../i18n'
+
+export function ClaudeOfficialLogin() {
+  const t = useTranslation()
+  const {
+    status,
+    isLoading,
+    error,
+    fetchStatus,
+    login,
+    logout,
+    startPolling,
+    stopPolling,
+  } = useHahaOAuthStore()
+
+  useEffect(() => {
+    fetchStatus()
+    return () => stopPolling()
+  }, [fetchStatus, stopPolling])
+
+  const handleLogin = async () => {
+    try {
+      const { authorizeUrl } = await login()
+      try {
+        await shellOpen(authorizeUrl)
+        startPolling()
+      } catch (err) {
+        console.error('[ClaudeOfficialLogin] shellOpen failed:', err)
+        useHahaOAuthStore.setState({
+          error: t('settings.claudeOfficialLogin.openBrowserFailed'),
+        })
+      }
+    } catch {
+      // store.login() errors are already captured into store.error
+    }
+  }
+
+  if (status === null) {
+    if (error) {
+      return (
+        <div className="text-xs text-[var(--color-error)]">
+          {t('settings.claudeOfficialLogin.errorPrefix')}{error}
+        </div>
+      )
+    }
+    return (
+      <div className="text-xs text-[var(--color-text-tertiary)]">
+        {t('common.loading')}
+      </div>
+    )
+  }
+
+  if (status.loggedIn) {
+    const subTypeLabel = status.subscriptionType
+      ? status.subscriptionType.toUpperCase()
+      : t('settings.claudeOfficialLogin.subTypeUnknown')
+    return (
+      <div className="flex items-center gap-3 text-sm">
+        <span className="text-[var(--color-success)]">
+          ✓ {t('settings.claudeOfficialLogin.loggedInPrefix')} {subTypeLabel})
+        </span>
+        <button
+          type="button"
+          onClick={logout}
+          disabled={isLoading}
+          className="px-3 py-1 text-xs rounded-md border border-[var(--color-border-separator)] bg-[var(--color-surface)] hover:bg-[var(--color-surface-hover)] disabled:opacity-50 transition-colors"
+        >
+          {isLoading
+            ? t('settings.claudeOfficialLogin.logoutProcessing')
+            : t('settings.claudeOfficialLogin.logoutButton')}
+        </button>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="text-sm text-[var(--color-text-secondary)]">
+        {t('settings.claudeOfficialLogin.intro')}
+      </div>
+      <button
+        type="button"
+        onClick={handleLogin}
+        disabled={isLoading}
+        className="self-start rounded-md bg-[image:var(--gradient-btn-primary)] px-4 py-2 text-sm text-[var(--color-btn-primary-fg)] shadow-[var(--shadow-button-primary)] hover:brightness-105 disabled:opacity-50 transition-opacity"
+      >
+        {isLoading
+          ? t('settings.claudeOfficialLogin.loginStarting')
+          : t('settings.claudeOfficialLogin.loginButton')}
+      </button>
+      {error && (
+        <div className="text-xs text-[var(--color-error)]">
+          {t('settings.claudeOfficialLogin.errorPrefix')}{error}
+        </div>
+      )}
+    </div>
+  )
+}

package/desktop/src/components/shared/Button.tsx

@@ -0,0 +1,63 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react'
+
+type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'ghost'
+
+type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  variant?: ButtonVariant
+  size?: 'sm' | 'md' | 'lg'
+  loading?: boolean
+  icon?: ReactNode
+}
+
+const variantStyles: Record<ButtonVariant, string> = {
+  primary:
+    'bg-[image:var(--gradient-btn-primary)] text-[var(--color-btn-primary-fg)] shadow-[var(--shadow-button-primary)] hover:bg-[image:var(--gradient-btn-primary-hover)] hover:brightness-105 active:translate-y-[1px]',
+  secondary:
+    'bg-[var(--color-surface)] text-[var(--color-text-primary)] border border-[var(--color-border)] hover:bg-[var(--color-surface-hover)]',
+  danger:
+    'bg-[var(--color-error)] text-white hover:opacity-90',
+  ghost:
+    'bg-transparent text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)]',
+}
+
+const sizeStyles = {
+  sm: 'px-2 py-1 text-xs',
+  md: 'px-4 py-2 text-sm',
+  lg: 'px-5 py-2.5 text-sm',
+}
+
+export function Button({
+  variant = 'primary',
+  size = 'md',
+  loading = false,
+  icon,
+  disabled,
+  children,
+  className = '',
+  ...props
+}: ButtonProps) {
+  return (
+    <button
+      disabled={disabled || loading}
+      className={`
+        inline-flex items-center justify-center gap-1.5 rounded-[var(--radius-md)]
+        font-medium transition-colors duration-150 cursor-pointer
+        disabled:opacity-50 disabled:cursor-not-allowed
+        ${variantStyles[variant]} ${sizeStyles[size]} ${className}
+      `}
+      {...props}
+    >
+      {loading ? <Spinner /> : icon}
+      {children}
+    </button>
+  )
+}
+
+function Spinner() {
+  return (
+    <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24" fill="none">
+      <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>
+  )
+}

package/desktop/src/components/shared/CopyButton.tsx

@@ -0,0 +1,58 @@
+import { useEffect, useState } from 'react'
+import { copyTextToClipboard } from '../chat/clipboard'
+
+type Props = {
+  text: string
+  label?: string
+  copiedLabel?: string
+  displayLabel?: string
+  displayCopiedLabel?: string
+  className?: string
+}
+
+export function CopyButton({
+  text,
+  label = 'Copy',
+  copiedLabel = 'Copied',
+  displayLabel,
+  displayCopiedLabel,
+  className = '',
+}: Props) {
+  const [copied, setCopied] = useState(false)
+
+  useEffect(() => {
+    if (!copied) return
+    const timer = window.setTimeout(() => setCopied(false), 1500)
+    return () => window.clearTimeout(timer)
+  }, [copied])
+
+  const handleCopy = async () => {
+    try {
+      const ok = await copyTextToClipboard(text)
+      if (!ok) {
+        setCopied(false)
+        return
+      }
+      setCopied(true)
+    } catch {
+      setCopied(false)
+    }
+  }
+
+  const currentLabel = copied ? copiedLabel : label
+  const buttonText = copied
+    ? (displayCopiedLabel ?? copiedLabel)
+    : (displayLabel ?? label)
+
+  return (
+    <button
+      type="button"
+      onClick={handleCopy}
+      className={className}
+      aria-label={currentLabel}
+      title={currentLabel}
+    >
+      {buttonText}
+    </button>
+  )
+}