@allbluecn/web-app 0.3.0

package/src/components/chat/chat-thread-page.tsx

@@ -0,0 +1,165 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { useParams } from '@tanstack/react-router'
+import { useEffect, useRef, useState } from 'react'
+import { useChat, fetchServerSentEvents, type UIMessage } from '@tanstack/ai-react'
+import AIConversation from '@/components/chat/ai-conversation'
+import type { Message } from '@/components/chat/ai-conversation'
+import type { Citation } from '@/components/chat/ai-citations'
+import AIPromptInput from '@/components/chat/ai-prompt-input'
+import { InterruptApproval } from '@/components/chat/interrupt-approval'
+import { useSelectedModel } from '@/components/ai/use-selected-model'
+import { useKnowledgeBases } from '@/components/ai/use-knowledge-bases'
+import { useSession } from '@/lib/auth/auth-client'
+import { AlertCircle } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Link } from '@tanstack/react-router'
+import { useTranslation } from 'react-i18next'
+
+type ChatThreadPageProps = {
+  initialMessages?: UIMessage[]
+}
+
+export function ChatThreadPage({ initialMessages }: ChatThreadPageProps) {
+  const { t } = useTranslation('chat')
+  const { threadId } = useParams({ from: '/_nav/chat/$threadId' })
+  const { data: session } = useSession()
+  const hasAiKey = session?.user?.hasAiKey
+  const [selectedModel, setSelectedModel] = useSelectedModel()
+  const knowledgeBases = useKnowledgeBases()
+  const [input, setInput] = useState('')
+  const [webSearchEnabled, setWebSearchEnabled] = useState(false)
+  const [latestCitations, setLatestCitations] = useState<Citation[] | undefined>(undefined)
+  const citationsMapRef = useRef<Record<string, Citation[]>>({})
+  const waitingRef = useRef(false)
+  const loadingRef = useRef(false)
+
+  const { messages, sendMessage, isLoading, error, clear, addToolApprovalResponse } = useChat({
+    threadId,
+    initialMessages: initialMessages ?? [],
+    connection: fetchServerSentEvents('/api/chat'),
+    body: { systemPrompts: [t('systemPrompt')], webSearchEnabled, model: selectedModel },
+    onCustomEvent: (eventType, data) => {
+      if (eventType === 'citations') {
+        setLatestCitations(data as Citation[])
+      }
+    },
+  })
+
+  useEffect(() => {
+    if (error) {
+      setLatestCitations(undefined)
+      waitingRef.current = false
+    }
+  }, [error])
+
+  useEffect(() => {
+    if (loadingRef.current && !isLoading && messages.length > 0) {
+      waitingRef.current = false
+      if (!error && latestCitations && messages[messages.length - 1]?.role === 'assistant') {
+        citationsMapRef.current[messages[messages.length - 1].id] = latestCitations
+      }
+    }
+    loadingRef.current = isLoading
+  }, [isLoading, messages, error, latestCitations])
+
+  const aiMessages: Message[] = messages
+    .map((msg, idx) => ({
+      id: msg.id,
+      role: msg.role as 'user' | 'assistant',
+      content: msg.parts.map((p: any) => (p.type === 'text' ? p.content : '')).join(''),
+      timestamp: msg.createdAt,
+      citations: msg.role === 'assistant'
+        ? (idx === messages.length - 1 ? latestCitations : (citationsMapRef.current[msg.id] ?? undefined))
+        : undefined,
+      thinking: msg.parts
+        .filter((p: any): p is { type: 'thinking'; content: string } => p.type === 'thinking')
+        .map((p) => p.content)
+        .join('\n') || undefined,
+    }))
+    .filter(m => m.role !== 'assistant' || (m.content.trim() && !error))
+
+  const isThinking = waitingRef.current || (isLoading && (
+    aiMessages.length === 0 ||
+    aiMessages[aiMessages.length - 1]?.role === 'user' ||
+    !aiMessages[aiMessages.length - 1]?.content?.trim()
+  ))
+
+  useEffect(() => {
+    if (!isThinking) return
+    if (error) { waitingRef.current = false; return }
+    const last = aiMessages[aiMessages.length - 1]
+    if (last?.role === 'assistant' && last.content?.trim()) {
+      waitingRef.current = false
+    }
+  }, [aiMessages, isThinking, error])
+
+  return (
+    <div className="flex flex-col h-full">
+      {!hasAiKey && (
+        <div className="shrink-0 mx-6 mt-3 flex items-center gap-2 rounded-lg border border-amber-200 bg-amber-50 p-3 dark:border-amber-900 dark:bg-amber-950">
+          <AlertCircle className="size-4 shrink-0 text-amber-600 dark:text-amber-400" />
+          <p className="flex-1 text-xs text-amber-700 dark:text-amber-300">
+            {t('aiKeyRequired')}
+          </p>
+            <Button asChild size="sm" variant="outline" className="shrink-0 h-7 text-xs">
+              <Link to="/settings/ai">{t('goToSettings')}</Link>
+            </Button>
+        </div>
+      )}
+
+        <AIConversation
+          className="min-h-0 flex-1 border-0 rounded-none shadow-none"
+          messages={aiMessages}
+          isThinking={isThinking}
+          isStreaming={isLoading}
+          maxHeight="100%"
+          error={error?.message || null}
+        />
+
+        <div className="shrink-0 px-4">
+          <InterruptApproval
+            messages={messages}
+            respond={addToolApprovalResponse}
+          />
+        </div>
+
+        <div className="shrink-0 p-4">
+        <div className="mx-auto w-full max-w-4xl xl:max-w-3xl 2xl:max-w-2xl">
+          <AIPromptInput
+            input={input}
+            onInputChange={setInput}
+            webSearchEnabled={webSearchEnabled}
+            onWebSearchToggle={setWebSearchEnabled}
+            selectedModel={selectedModel}
+            onModelChange={setSelectedModel}
+            onSend={async (val) => {
+              setLatestCitations(undefined)
+              waitingRef.current = true
+              void sendMessage(val)
+              setInput('')
+            }}
+            isLoading={isLoading}
+            disabled={!hasAiKey}
+            knowledgeBases={knowledgeBases}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/chat/interrupt-approval.tsx

@@ -0,0 +1,122 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import type { ToolCallPart } from "@tanstack/ai"
+import type { UseChatReturn } from "@tanstack/ai-react"
+import { AlertTriangle, Check, X } from "lucide-react"
+import { useTranslation } from "react-i18next"
+import { Button } from "@/components/ui/button"
+
+type ApprovalPart = {
+  id: string
+  name: string
+  arguments: string
+  state: "approval-requested"
+  approval?: { id: string; needsApproval: boolean; approved?: boolean }
+}
+
+type AddToolApprovalResponse = Parameters<
+  NonNullable<UseChatReturn["addToolApprovalResponse"]>
+>[0]
+
+function isApprovalPart(p: unknown): p is ApprovalPart {
+  if (typeof p !== "object" || p === null) return false
+  const part = p as Record<string, unknown>
+  return (
+    part.type === "tool-call" &&
+    typeof part.id === "string" &&
+    typeof part.name === "string" &&
+    typeof part.arguments === "string" &&
+    part.state === "approval-requested"
+  )
+}
+
+export function InterruptApproval({
+  messages,
+  respond,
+}: {
+  messages: NonNullable<UseChatReturn["messages"]>
+  respond: (response: AddToolApprovalResponse) => Promise<void>
+}) {
+  const pendingApprovals = messages.flatMap((msg) =>
+    (msg.parts || []).filter(isApprovalPart),
+  ) as ApprovalPart[]
+  const { t } = useTranslation('chat')
+
+  if (pendingApprovals.length === 0) return null
+
+  return (
+    <div className="space-y-2 mb-2">
+      {pendingApprovals.map((interrupt) => {
+        const approvalId = interrupt.approval?.id ?? interrupt.id
+        let displayArgs: string | null = null
+        try {
+          displayArgs = JSON.stringify(JSON.parse(interrupt.arguments), null, 2)
+        } catch {
+          displayArgs = interrupt.arguments
+        }
+
+        return (
+          <div
+            key={interrupt.id}
+            className="flex items-start gap-3 rounded-lg border border-amber-200 bg-amber-50 p-3 dark:border-amber-900 dark:bg-amber-950"
+          >
+            <AlertTriangle className="size-5 shrink-0 mt-0.5 text-amber-600 dark:text-amber-400" />
+            <div className="flex-1 min-w-0">
+              <p className="font-medium text-amber-900 dark:text-amber-100">
+                {t('interrupt.title')}
+              </p>
+              <p className="text-sm text-amber-700 dark:text-amber-300 mt-1">
+                {t('interrupt.descriptionStart')}{" "}
+                <code className="px-1 py-0.5 text-xs rounded bg-amber-200/50 dark:bg-amber-800/50">
+                  {interrupt.name}
+                </code>{" "}
+                {t('interrupt.descriptionEnd')}
+              </p>
+              {displayArgs && (
+                <pre className="mt-2 text-xs bg-white dark:bg-slate-900 p-2 rounded border border-amber-200 dark:border-amber-800 overflow-x-auto max-w-full">
+                  {displayArgs}
+                </pre>
+              )}
+              <div className="flex gap-2 mt-3">
+                <Button
+                  size="sm"
+                  onClick={() =>
+                    respond({ id: approvalId, approved: true })
+                  }
+                >
+                  <Check className="size-4 mr-1" />
+                  {t('interrupt.approve')}
+                </Button>
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() =>
+                    respond({ id: approvalId, approved: false })
+                  }
+                >
+                  <X className="size-4 mr-1" />
+                  {t('interrupt.reject')}
+                </Button>
+              </div>
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}

package/src/components/command-palette.tsx

@@ -0,0 +1,172 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { useState, useSyncExternalStore } from "react"
+import { useTheme } from "next-themes"
+import { useHotkey, useHotkeySequences } from "@tanstack/react-hotkeys"
+import type { HotkeySequence } from "@tanstack/hotkeys"
+import { useTranslation } from "react-i18next"
+import {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandShortcut,
+} from "@/components/ui/command"
+import { CreatePRDDialog } from "@allbluecn/plugins-core/prd/components/dialog/create-prd-dialog"
+import { useCommands, type ResolvedCommand } from "@/hooks/use-commands"
+import {
+  commandPaletteStore,
+  setCommandPaletteOpen,
+  toggleCommandPalette,
+} from "@/lib/commands/command-palette-state"
+import {
+  Sparkles,
+  BotMessageSquare,
+  Bot,
+  Lightbulb,
+  ClipboardList,
+  FileText,
+  PenTool,
+  FlaskConical,
+  Bug,
+  CircleCheckBig,
+  Speech,
+  Database,
+  Package,
+  ShoppingCart,
+  Building2,
+  Settings,
+  Users,
+  Earth,
+} from "lucide-react"
+import type { LucideIcon } from "lucide-react"
+
+const PALETTE_ICON_MAP: Record<string, LucideIcon> = {
+  sparkles: Sparkles,
+  message: BotMessageSquare,
+  bot: Bot,
+  lightbulb: Lightbulb,
+  clipboardList: ClipboardList,
+  file: FileText,
+  penTool: PenTool,
+  flaskConical: FlaskConical,
+  bug: Bug,
+  circleCheckBig: CircleCheckBig,
+  speech: Speech,
+  database: Database,
+  package: Package,
+  cart: ShoppingCart,
+  building2: Building2,
+  settings: Settings,
+  users: Users,
+  earth: Earth,
+}
+
+export function CommandPalette() {
+  const { t } = useTranslation("common")
+  const { theme, setTheme } = useTheme()
+  const [prdDialogOpen, setPrdDialogOpen] = useState(false)
+
+  const open = useSyncExternalStore(
+    commandPaletteStore.subscribe,
+    commandPaletteStore.getSnapshot,
+    () => false,
+  )
+
+  const { commands, execute } = useCommands({
+    onAction: (id) => {
+      if (id === "create-prd") {
+        setCommandPaletteOpen(false)
+        setPrdDialogOpen(true)
+      }
+    },
+  })
+
+  const handleClose = () => setCommandPaletteOpen(false)
+
+  const run = (cmd: ResolvedCommand) => {
+    handleClose()
+    execute(cmd)
+  }
+
+  useHotkey("Mod+K", toggleCommandPalette, { ignoreInputs: false })
+
+  useHotkey("Mod+Shift+L", () => setTheme(theme === "dark" ? "light" : "dark"), {
+    ignoreInputs: false,
+  })
+
+  useHotkeySequences(
+    commands
+      .filter((c) => c.shortcut && c.shortcut.length >= 2)
+      .map((c) => ({
+        sequence: c.shortcut as HotkeySequence,
+        callback: () => run(c),
+        options: { enabled: !open },
+      })),
+  )
+
+  const navCommands = commands.filter((c) => c.group === "navigation")
+  const actionCommands = commands.filter((c) => c.group === "action")
+
+  const renderItem = (cmd: ResolvedCommand) => {
+    const Icon = cmd.icon ? PALETTE_ICON_MAP[cmd.icon] : undefined
+    return (
+      <CommandItem
+        key={cmd.id}
+        value={[cmd.title, ...(cmd.keywords ?? [])].join(" ")}
+        onSelect={() => run(cmd)}
+      >
+        {Icon && <Icon className="size-4 shrink-0" />}
+        <span className="truncate">{cmd.title}</span>
+        {cmd.shortcut && (
+          <CommandShortcut>{cmd.shortcut.join(" → ")}</CommandShortcut>
+        )}
+      </CommandItem>
+    )
+  }
+
+  return (
+    <>
+      <CommandDialog
+        open={open}
+        onOpenChange={(next) =>
+          next ? toggleCommandPalette() : handleClose()
+        }
+        title={t("command.searchPlaceholder")}
+        description={t("command.searchPlaceholder")}
+      >
+        <Command className="rounded-xl!">
+          <CommandInput placeholder={t("command.searchPlaceholder")} />
+          <CommandList className="max-h-100">
+            <CommandEmpty>{t("command.empty")}</CommandEmpty>
+            <CommandGroup heading={t("command.groupNavigation")}>
+              {navCommands.map(renderItem)}
+            </CommandGroup>
+            <CommandGroup heading={t("command.groupAction")}>
+              {actionCommands.map(renderItem)}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </CommandDialog>
+      <CreatePRDDialog open={prdDialogOpen} onOpenChange={setPrdDialogOpen} />
+    </>
+  )
+}

package/src/components/design/artboard-grid.tsx

@@ -0,0 +1,64 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { Link } from "@tanstack/react-router"
+import { Card, CardContent } from "@/components/ui/card"
+
+interface ArtboardGridProps {
+  projectId: string
+  artboards: {
+    id: string
+    name: string
+    pageName: string | null
+    width: number
+    height: number
+    pngPath: string
+    layerCount: number | null
+    sortOrder: number
+  }[]
+}
+
+export function ArtboardGrid({ projectId, artboards }: ArtboardGridProps) {
+  return (
+    <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
+      {artboards.map((ab) => (
+        <Link
+          key={ab.id}
+          to="/design/$projectId/$artboardId"
+          params={{ projectId, artboardId: ab.id }}
+        >
+          <Card className="group overflow-hidden hover:shadow-md transition-shadow">
+            <div className="aspect-[16/10] bg-muted flex items-center justify-center overflow-hidden">
+              <img
+                src={`/design-files/${projectId}/${ab.id}/preview.png`}
+                alt={ab.name}
+                className="w-full h-full object-contain p-2"
+              />
+            </div>
+            <CardContent className="p-3">
+              <h3 className="font-medium text-sm truncate">{ab.name}</h3>
+              <p className="text-xs text-muted-foreground mt-1">
+                {ab.width} × {ab.height}
+                {ab.pageName && ` · ${ab.pageName}`}
+              </p>
+            </CardContent>
+          </Card>
+        </Link>
+      ))}
+    </div>
+  )
+}

package/src/components/design/project-card.tsx

@@ -0,0 +1,64 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { Link } from "@tanstack/react-router"
+import { useTranslation } from "react-i18next"
+import { Card, CardContent } from "@/components/ui/card"
+
+interface ProjectCardProps {
+  project: {
+    id: string
+    name: string
+    sketchName: string | null
+    version: number
+    createdAt: Date
+    updatedAt: Date
+    _count: { artboards: number }
+    artboards: { pngPath: string; width: number; height: number }[]
+  }
+}
+
+export function ProjectCard({ project }: ProjectCardProps) {
+  const { t } = useTranslation('design')
+  const firstArtboard = project.artboards[0]
+  const thumbnailUrl = firstArtboard
+    ? `/design-files/${project.id}/${firstArtboard.pngPath.split("/").slice(-2, -1)[0]}/preview.png`
+    : null
+
+  return (
+    <Link
+      to="/design/$projectId"
+      params={{ projectId: project.id }}
+    >
+      <Card className="group overflow-hidden hover:shadow-md transition-shadow">
+        <div className="aspect-video bg-muted flex items-center justify-center overflow-hidden">
+          {thumbnailUrl ? (
+            <img src={thumbnailUrl} alt={project.name} className="w-full h-full object-cover" />
+          ) : (
+            <span className="text-muted-foreground text-sm">No preview</span>
+          )}
+        </div>
+        <CardContent className="p-3">
+          <h3 className="font-medium text-sm truncate">{project.name}</h3>
+          <p className="text-xs text-muted-foreground mt-1">
+            {t('projectCard.artboardCount', { count: project._count.artboards, version: project.version })}
+          </p>
+        </CardContent>
+      </Card>
+    </Link>
+  )
+}