@allbluecn/web-app 0.3.0

package/src/components/knowledge/knowledge-tree-item.tsx

@@ -0,0 +1,342 @@
+// 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, useRef } from 'react'
+import { ChevronDown, ChevronRight, FileText, Grid3X3, Home, MoreHorizontal, Network, Plus, Table, Trash2, FilePenLine, Check, X } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { Input } from '@/components/ui/input'
+import { Button } from '@/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuSeparator,
+} from '@/components/ui/dropdown-menu'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { createDocumentFn, deleteDocumentFn, updateDocumentFn } from '@/server/serverFns/knowledge'
+import { useTranslation } from 'react-i18next'
+
+const MAX_DEPTH = 19
+
+export interface TreeNode {
+  id: string
+  parentId: string | null
+  title: string
+  type: string
+  icon: string | null
+  isHomepage: boolean
+  sortOrder: number
+  createdAt?: string | Date
+}
+
+interface KnowledgeTreeItemProps {
+  node: TreeNode
+  depth: number
+  hasChildren: boolean
+  activeDocId: string | null
+  isHomePage: boolean
+  kbId: string
+  onSelect: (docId: string) => void
+  onHome: () => void
+  onRefresh: () => void
+  onDocRenamed?: (docId: string) => void
+  expanded: boolean
+  onToggleExpand: () => void
+}
+
+const TYPE_DEFAULTS: Record<string, string> = {
+  doc: 'untitledDoc',
+  mindmap: 'untitledMindmap',
+  sheet: 'untitledSheet',
+  table: 'untitledTable',
+}
+
+const TYPE_ICONS: Record<string, React.ComponentType<{ className?: string }>> = {
+  doc: FileText,
+  mindmap: Network,
+  sheet: Table,
+  table: Grid3X3,
+}
+
+const DOC_TYPE_OPTIONS = [
+  { type: 'doc' as const, label: 'treeType.doc', icon: FileText },
+  { type: 'mindmap' as const, label: 'treeType.mindmap', icon: Network },
+  { type: 'sheet' as const, label: 'treeType.sheet', icon: Table, disabled: true },
+  { type: 'table' as const, label: 'treeType.table', icon: Grid3X3, disabled: true },
+]
+
+export function KnowledgeTreeItem({
+  node, depth, hasChildren, activeDocId, isHomePage, kbId,
+  onSelect, onHome, onRefresh, onDocRenamed, expanded, onToggleExpand,
+}: KnowledgeTreeItemProps) {
+  const { t } = useTranslation('knowledge')
+  const [editing, setEditing] = useState(false)
+  const [editTitle, setEditTitle] = useState(node.title)
+  const [deleting, setDeleting] = useState(false)
+  const [deleteOpen, setDeleteOpen] = useState(false)
+  const [deleteConfirm, setDeleteConfirm] = useState('')
+  const [openMenu, setOpenMenu] = useState<'create' | 'more' | null>(null)
+  const [creatingChild, setCreatingChild] = useState(false)
+  const [childType, setChildType] = useState<string>('doc')
+  const [childTitle, setChildTitle] = useState('')
+  const childInputRef = useRef<HTMLInputElement>(null)
+
+  const finishEditing = () => {
+    setEditing(false)
+    setOpenMenu(null)
+  }
+
+  const handleRename = async () => {
+    if (!editTitle.trim() || editTitle === node.title) { finishEditing(); return }
+    try {
+      await updateDocumentFn({ data: { id: node.id, title: editTitle.trim() } })
+      onRefresh()
+      onDocRenamed?.(node.id)
+    } catch (e) {
+      console.error('Rename failed:', e)
+    }
+    finishEditing()
+  }
+
+  const handleDelete = async () => {
+    if (node.isHomepage || deleteConfirm !== node.title) return
+    setDeleting(true)
+    try {
+      await deleteDocumentFn({ data: { id: node.id } })
+      setDeleteOpen(false)
+      setDeleteConfirm('')
+      onRefresh()
+    } catch (e) {
+      console.error('Delete failed:', e)
+    }
+    setDeleting(false)
+  }
+
+  const handleStartCreateChild = (type: string) => {
+    setCreatingChild(true)
+    setChildType(type)
+    setChildTitle(t(TYPE_DEFAULTS[type] || 'untitledDoc'))
+    if (!expanded) onToggleExpand()
+    setTimeout(() => childInputRef.current?.focus(), 50)
+  }
+
+  const handleConfirmCreateChild = async () => {
+    if (!childTitle.trim()) { setCreatingChild(false); return }
+    try {
+      const doc = await createDocumentFn({
+        data: { kbId, parentId: node.id, title: childTitle.trim(), type: childType as 'doc' | 'mindmap' | 'sheet' | 'table' },
+      })
+      onRefresh()
+      onSelect(doc.id)
+    } catch (e) {
+      console.error('Create child failed:', e)
+    }
+    setCreatingChild(false)
+  }
+
+  const isActive = node.isHomepage ? isHomePage : node.id === activeDocId
+  const Icon = TYPE_ICONS[node.type] || FileText
+
+  return (
+    <div>
+      <div
+        className={cn(
+          'group/row flex items-center gap-1 my-0.5 px-2 py-1.5 text-sm rounded-md cursor-pointer',
+          isActive ? 'bg-accent text-accent-foreground' : 'hover:bg-accent/50',
+        )}
+        style={{ paddingLeft: `${depth * 16 + 8}px` }}
+        onClick={() => {
+          if (node.isHomepage) onHome()
+          else onSelect(node.id)
+        }}
+      >
+        {hasChildren ? (
+          <button
+            className="size-4 flex items-center justify-center shrink-0 rounded hover:bg-muted"
+            onClick={(e) => { e.stopPropagation(); onToggleExpand() }}
+          >
+            {expanded ? <ChevronDown className="size-3" /> : <ChevronRight className="size-3" />}
+          </button>
+        ) : (
+          <span className="size-4 shrink-0" />
+        )}
+
+        {node.isHomepage ? (
+          <Home className="size-4 shrink-0 text-muted-foreground" />
+        ) : (
+          <Icon className="size-4 shrink-0 text-muted-foreground" />
+        )}
+
+        {editing ? (
+          <Input
+            value={editTitle}
+            onChange={(e) => setEditTitle(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') handleRename()
+              if (e.key === 'Escape') { finishEditing(); return }
+            }}
+            className="h-6 text-sm flex-1"
+            autoFocus
+            onFocus={(e) => e.target.select()}
+            onClick={(e) => e.stopPropagation()}
+          />
+        ) : (
+          <span className="truncate flex-1">{node.title}</span>
+        )}
+
+        {editing ? (
+          <div className="ml-auto flex items-center gap-0.5">
+            <Button variant="ghost" size="icon" className="size-6" onClick={(e) => { e.stopPropagation(); handleRename() }}>
+              <Check className="size-3.5" />
+            </Button>
+            <Button variant="ghost" size="icon" className="size-6" onClick={(e) => { e.stopPropagation(); finishEditing() }}>
+              <X className="size-3.5" />
+            </Button>
+          </div>
+        ) : (
+        <div className={cn('ml-auto flex items-center gap-1 transition-opacity', openMenu !== null ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none group-hover/row:opacity-100 group-hover/row:pointer-events-auto')}>
+          {depth >= MAX_DEPTH ? (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <span className="inline-flex items-center justify-center size-6 rounded hover:bg-muted cursor-not-allowed opacity-50" onClick={(e) => e.stopPropagation()}>
+                  <Plus className="size-3.5" />
+                </span>
+              </TooltipTrigger>
+              <TooltipContent side="right">{t('knowledgeTree.depthLimit')}</TooltipContent>
+            </Tooltip>
+          ) : (
+            <DropdownMenu open={openMenu === 'create'} onOpenChange={(open) => setOpenMenu(open ? 'create' : null)}>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <DropdownMenuTrigger asChild>
+                    <Button variant="ghost" size="icon" className="size-6 outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:border-transparent" onClick={(e) => e.stopPropagation()}>
+                      <Plus className="size-3.5" />
+                    </Button>
+                  </DropdownMenuTrigger>
+                </TooltipTrigger>
+                <TooltipContent side="top">{t('toolbar.createDoc')}</TooltipContent>
+              </Tooltip>
+              <DropdownMenuContent side="right" align="start" className="w-40" onCloseAutoFocus={(e) => e.preventDefault()}>
+                {DOC_TYPE_OPTIONS.map((opt) => (
+                  <DropdownMenuItem
+                    key={opt.type}
+                    disabled={opt.disabled}
+                      onClick={(e) => { e.stopPropagation(); handleStartCreateChild(opt.type) }}
+                  >
+                    <opt.icon className="size-3.5 mr-2" />
+                    {t(opt.label)}
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )}
+
+          {!node.isHomepage && (
+            <DropdownMenu open={openMenu === 'more'} onOpenChange={(open) => setOpenMenu(open ? 'more' : null)}>
+              <DropdownMenuTrigger asChild>
+                <Button variant="ghost" size="icon" className="size-6 outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:border-transparent data-[state=open]:outline-none data-[state=open]:ring-0" onClick={(e) => e.stopPropagation()}>
+                  <MoreHorizontal className="size-3.5" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="w-36" onCloseAutoFocus={(e) => e.preventDefault()}>
+                <DropdownMenuItem onClick={(e) => { e.stopPropagation(); setEditing(true); setEditTitle(node.title) }}>
+                  <FilePenLine className="size-3.5 mr-1.5" />
+                  {t('knowledgeTree.rename')}
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem
+                  className="text-destructive"
+                  onClick={(e) => { e.stopPropagation(); setDeleteOpen(true) }}
+                >
+                  <Trash2 className="size-3.5 mr-1.5" />
+                  {t('knowledgeTree.delete')}
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )}
+        </div>
+        )}
+      </div>
+
+      {/* Inline child creation */}
+      {creatingChild && expanded && (
+        <div
+          className="flex items-center gap-1 px-2 py-1.5 mx-1 rounded-md"
+          style={{ paddingLeft: `${(depth + 1) * 16 + 8}px` }}
+        >
+          <span className="size-4 shrink-0" />
+          <Input
+            ref={childInputRef}
+            value={childTitle}
+            onChange={(e) => setChildTitle(e.target.value)}
+            onBlur={handleConfirmCreateChild}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') handleConfirmCreateChild()
+              if (e.key === 'Escape') setCreatingChild(false)
+            }}
+            onFocus={(e) => e.target.select()}
+            className="h-6 text-sm flex-1"
+          />
+        </div>
+      )}
+
+      <Dialog open={deleteOpen} onOpenChange={(open) => { setDeleteOpen(open); if (!open) setDeleteConfirm('') }}>
+        <DialogContent className="sm:max-w-sm">
+          <DialogHeader>
+            <DialogTitle>{t('knowledgeTree.deleteDoc')}</DialogTitle>
+            <DialogDescription>
+              {t('knowledgeTree.deleteConfirm', { name: node.title })}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="py-2">
+            <Input
+              value={deleteConfirm}
+              onChange={(e) => setDeleteConfirm(e.target.value)}
+              placeholder={t('knowledgeTree.deletePlaceholder')}
+              onKeyDown={(e) => { if (e.key === 'Enter') handleDelete() }}
+            />
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => { setDeleteOpen(false); setDeleteConfirm('') }}>
+              {t('knowledgeTree.cancel')}
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={handleDelete}
+              disabled={deleting || deleteConfirm !== node.title}
+            >
+              {deleting ? t('knowledgeTree.deleting') : t('knowledgeTree.confirmDelete')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}

package/src/components/knowledge/knowledge-tree.tsx

@@ -0,0 +1,235 @@
+// 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 { useEffect, useState, useCallback, useRef } from 'react'
+import {
+  Plus, FileText, Table, Grid3X3, Network,
+} from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { KnowledgeTreeItem, TreeNode } from './knowledge-tree-item'
+import { createDocumentFn, listDocumentsFn } from '@/server/serverFns/knowledge'
+import { useTranslation } from 'react-i18next'
+
+interface KnowledgeTreeProps {
+  kbId: string
+  activeDocId: string | null
+  isHomePage: boolean
+  onSelect: (docId: string) => void
+  onHome: () => void
+  treeRefreshKey?: number
+  onDocRenamed?: (docId: string) => void
+}
+
+const DOC_TYPE_OPTIONS = [
+  { type: 'doc' as const, label: 'treeType.doc', icon: FileText },
+  { type: 'mindmap' as const, label: 'treeType.mindmap', icon: Network },
+  { type: 'sheet' as const, label: 'treeType.sheet', icon: Table, disabled: true },
+  { type: 'table' as const, label: 'treeType.table', icon: Grid3X3, disabled: true },
+]
+
+const TYPE_DEFAULTS: Record<string, string> = {
+  doc: 'untitledDoc',
+  mindmap: 'untitledMindmap',
+  sheet: 'untitledSheet',
+  table: 'untitledTable',
+}
+
+function flattenTree(
+  nodes: TreeNode[],
+  expandedIds: Set<string>,
+): { node: TreeNode; depth: number; hasChildren: boolean }[] {
+  const result: { node: TreeNode; depth: number; hasChildren: boolean }[] = []
+  const childrenMap = new Map<string | null, TreeNode[]>()
+  const parentIds = new Set<string>()
+
+  for (const n of nodes) {
+    const key = n.parentId || '__root__'
+    if (!childrenMap.has(key)) childrenMap.set(key, [])
+    childrenMap.get(key)!.push(n)
+    if (n.parentId) parentIds.add(n.parentId)
+  }
+  for (const arr of childrenMap.values()) arr.sort((a, b) => {
+    if (a.isHomepage) return -1
+    if (b.isHomepage) return 1
+    return new Date(a.createdAt || 0).getTime() - new Date(b.createdAt || 0).getTime()
+  })
+
+  function traverse(parentId: string | null, depth: number) {
+    const key = parentId || '__root__'
+    const children = childrenMap.get(key) || []
+    for (const child of children) {
+      const hasCh = parentIds.has(child.id)
+      result.push({ node: child, depth, hasChildren: hasCh })
+      if (hasCh && expandedIds.has(child.id)) {
+        traverse(child.id, depth + 1)
+      }
+    }
+  }
+
+  traverse(null, 0)
+  return result
+}
+
+export function KnowledgeTree({
+  kbId, activeDocId, isHomePage, onSelect, onHome, treeRefreshKey, onDocRenamed,
+}: KnowledgeTreeProps) {
+  const { t } = useTranslation('knowledge')
+  const [documents, setDocuments] = useState<TreeNode[]>([])
+  const [loading, setLoading] = useState(true)
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set())
+  const [creatingType, setCreatingType] = useState<string | null>(null)
+  const [creatingTitle, setCreatingTitle] = useState('')
+  const creatingInputRef = useRef<HTMLInputElement>(null)
+
+  const fetchDocuments = useCallback(async () => {
+    try {
+      const docs = await listDocumentsFn({ data: { kbId } })
+      setDocuments(docs as TreeNode[])
+    } catch (e) {
+      console.error('Failed to fetch documents:', e)
+    } finally {
+      setLoading(false)
+    }
+  }, [kbId])
+
+  useEffect(() => {
+    fetchDocuments()
+  }, [fetchDocuments])
+
+  useEffect(() => {
+    if (treeRefreshKey !== undefined && treeRefreshKey > 0) {
+      fetchDocuments()
+    }
+  }, [treeRefreshKey, fetchDocuments])
+
+  useEffect(() => {
+    if (creatingType && creatingInputRef.current) {
+      const timer = setTimeout(() => creatingInputRef.current?.focus(), 50)
+      return () => clearTimeout(timer)
+    }
+  }, [creatingType])
+
+  const toggleExpand = useCallback((id: string) => {
+    setExpandedIds((prev) => {
+      const next = new Set(prev)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
+  }, [])
+
+  const flatNodes = flattenTree(documents, expandedIds)
+
+  const handleStartCreate = (type: string) => {
+    setCreatingType(type)
+    setCreatingTitle(t(TYPE_DEFAULTS[type] || 'untitledDoc'))
+  }
+
+  const handleConfirmCreate = async () => {
+    if (!creatingType || !creatingTitle.trim()) { setCreatingType(null); return }
+    try {
+      const doc = await createDocumentFn({
+        data: { kbId, title: creatingTitle.trim(), type: creatingType as 'doc' | 'mindmap' | 'sheet' | 'table' },
+      })
+      await fetchDocuments()
+      onSelect(doc.id)
+    } catch (e) {
+      console.error('Create failed:', e)
+    }
+    setCreatingType(null)
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex items-center justify-between px-3 py-3 border-b">
+        <span className="text-xs font-medium text-muted-foreground leading-5">{t('knowledgeTree.title')}</span>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="icon" className="size-6">
+              <Plus className="size-3.5" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent side="right" align="start" className="w-40 " onCloseAutoFocus={(e) => e.preventDefault()}>
+            {DOC_TYPE_OPTIONS.map((opt) => (
+              <DropdownMenuItem
+                key={opt.type}
+                disabled={opt.disabled}
+                onClick={() => handleStartCreate(opt.type)}
+              >
+                <opt.icon className="size-3.5 mr-2" />
+                {t(opt.label)}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      <div className="flex-1 overflow-auto py-1.5">
+        {loading ? (
+          <p className="text-sm text-muted-foreground text-center mt-8">{t('knowledgeTree.loading')}</p>
+        ) : (
+          <>
+            {creatingType && (
+              <div className="flex items-center gap-1 px-2 py-1.5 mx-1">
+                <span className="size-4 shrink-0" />
+                <Input
+                  ref={creatingInputRef}
+                  value={creatingTitle}
+                  onChange={(e) => setCreatingTitle(e.target.value)}
+                  onBlur={handleConfirmCreate}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') handleConfirmCreate()
+                    if (e.key === 'Escape') setCreatingType(null)
+                  }}
+                  onFocus={(e) => e.target.select()}
+                  className="h-6 text-sm flex-1"
+                />
+              </div>
+            )}
+            {flatNodes.length === 0 && (
+              <p className="text-sm text-muted-foreground text-center mt-8">{t('knowledgeTree.empty')}</p>
+            )}
+            {flatNodes.map(({ node, depth, hasChildren }) => (
+              <KnowledgeTreeItem
+                key={node.id}
+                node={node}
+                depth={depth}
+                hasChildren={hasChildren}
+                activeDocId={activeDocId}
+                isHomePage={isHomePage}
+                kbId={kbId}
+                onSelect={onSelect}
+                onHome={onHome}
+                onRefresh={fetchDocuments}
+                onDocRenamed={onDocRenamed}
+                expanded={expandedIds.has(node.id)}
+                onToggleExpand={() => toggleExpand(node.id)}
+              />
+            ))}
+          </>
+        )}
+      </div>
+    </div >
+  )
+}

package/src/components/knowledge/schemas/knowledge-form.ts

@@ -0,0 +1,26 @@
+// 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 { z } from "zod"
+
+export const knowledgeFormSchema = z.object({
+  name: z.string().min(1),
+  description: z.string(),
+  icon: z.string().default("notebook"),
+})
+
+export type KnowledgeFormValues = z.infer<typeof knowledgeFormSchema>