@allbluecn/web-app 0.12.0 → 0.12.3

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

@@ -15,9 +15,9 @@
 // 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, useEffect, useRef } from 'react'
+import { useState, useEffect, useRef, useMemo, useCallback } from 'react'
 import { useNavigate } from '@tanstack/react-router'
-import { Settings, Globe, Lock, Trash2, RefreshCw, Columns2, Minimize2, ArrowLeftRight, Maximize2, FileText, Grid3X3, Network, Table, PanelLeftOpen, PanelLeftClose, Plus, Check, ListIndentIncrease, ListIndentDecrease, Pencil } from 'lucide-react'
+import { Settings, Globe, Lock, Trash2, RefreshCw, Columns2, Minimize2, ArrowLeftRight, Maximize2, FileText, Grid3X3, Network, Table, PanelLeftOpen, PanelLeftClose, Plus, Check, ListIndentIncrease, ListIndentDecrease, Pencil, Sparkles } from 'lucide-react'
 import { Input } from '@/components/ui/input'
 import { Badge } from '@/components/ui/badge'
 import {
@@ -68,13 +68,15 @@ import { useEditorWidth } from './editor/editor-width-context'
 import type { EditorWidth } from './editor/editor-width-context'
 import { deleteKnowledgeFn, updateKnowledgeFn } from '@/server/serverFns/knowledge'
 import { reindexKnowledgeBaseFn } from '@/server/serverFns/knowledge-index'
-import { toast } from '@/components/ui/sonner'
+import { toast } from '@/components/ui/toast'
 import { KnowledgeFormDialog } from '@/components/knowledge/dialog/knowledge-form-dialog'
 import { cn } from '@/lib/utils'
 import { Checkbox } from '@/components/ui/checkbox'
 import { Link as LinkIcon } from 'lucide-react'
 import { listKbProjectsFn, setKbProjectsFn } from '@/server/serverFns/knowledge'
 import { listProjectsBriefFn } from '@/server/serverFns/project'
+import { startHandoffWithContext } from '@/lib/ai/chat-handoff'
+import AISuggestedPrompts from '@/components/hextaui/ai-suggested-prompts'
 import { m } from "@/paraglide/messages.js";
 
 interface KbData {
@@ -218,6 +220,20 @@ export function KnowledgeToolbar({ kb, onUpdate, breadcrumb, docType, treeCollap
     setReindexing(false)
   }
 
+  const handleAskAiSelect = useCallback((prompt: { title: string; prompt: string }) => {
+    startHandoffWithContext(
+      prompt.prompt,
+      { board: 'knowledge', entityId: kb.id },
+    )
+    void navigate({ to: '/harness' })
+  }, [kb.id, navigate])
+
+  const knowledgePrompts = useMemo(() => [
+    { id: 'kb-summarize', title: m.knowledge_askAi_summarize(), prompt: `请用中文总结知识库"${kb.name}"的主要内容`, category: m.knowledge_askAi_cat_summary() },
+    { id: 'kb-search', title: m.knowledge_askAi_search(), prompt: `请帮我查找知识库"${kb.name}"中与当前文档相关的资料`, category: m.knowledge_askAi_cat_search() },
+    { id: 'kb-graph', title: m.knowledge_askAi_graph(), prompt: `请根据知识库"${kb.name}"的内容生成一份知识图谱摘要`, category: m.knowledge_askAi_cat_graph() },
+  ], [kb])
+
   return (
     <div className="flex items-center gap-4 px-4 py-2 border-b bg-background shrink-0">
       <Button variant="ghost" size="icon" className="size-7 shrink-0" onClick={onToggleTree}>
@@ -238,13 +254,9 @@ export function KnowledgeToolbar({ kb, onUpdate, breadcrumb, docType, treeCollap
               }
           }}>
             <Tooltip>
-              <PopoverTrigger asChild>
-                <TooltipTrigger asChild>
-                  <Button variant="ghost" size="icon" className="size-7 shrink-0">
+              <PopoverTrigger render={<TooltipTrigger render={<Button variant="ghost" size="icon" className="size-7 shrink-0" />} />}>
                     <Plus className="size-4" />
-                  </Button>
-                </TooltipTrigger>
-              </PopoverTrigger>
+                  </PopoverTrigger>
               <TooltipContent side="right">{m.knowledge_toolbar_createDoc()}</TooltipContent>
             </Tooltip>
             <PopoverContent
@@ -470,17 +482,13 @@ export function KnowledgeToolbar({ kb, onUpdate, breadcrumb, docType, treeCollap
 
       {localVisibility === 'general' && (
         <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              variant="ghost"
+          <TooltipTrigger render={<Button variant="ghost"
               size="sm"
               className="h-7 gap-1.5 px-2.5 text-xs font-normal hover:bg-muted rounded-md shrink-0"
-              disabled
-            >
+              disabled />}>
               <LinkIcon className="size-3.5 text-muted-foreground" />
               {m.knowledge_toolbar_linkProjects()}
-            </Button>
-          </TooltipTrigger>
+            </TooltipTrigger>
           <TooltipContent>
             <p>{m.knowledge_toolbar_generalLinkDisabled()}</p>
           </TooltipContent>
@@ -489,30 +497,39 @@ export function KnowledgeToolbar({ kb, onUpdate, breadcrumb, docType, treeCollap
 
       {localVisibility === 'private' && (
         <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              variant="ghost"
+          <TooltipTrigger render={<Button variant="ghost"
               size="sm"
               className="h-7 gap-1.5 px-2.5 text-xs font-normal hover:bg-muted rounded-md shrink-0"
-              disabled
-            >
+              disabled />}>
               <LinkIcon className="size-3.5 text-muted-foreground" />
               {m.knowledge_toolbar_linkProjects()}
-            </Button>
-          </TooltipTrigger>
+            </TooltipTrigger>
           <TooltipContent>
             <p>{m.knowledge_toolbar_privateLinkDisabled()}</p>
           </TooltipContent>
         </Tooltip>
       )}
 
+      <Popover>
+        <PopoverTrigger render={<Button variant="ghost" size="icon" className="size-8 shrink-0" aria-label={m.knowledge_askAi_button()} />}>
+            <Sparkles className="size-4" />
+          </PopoverTrigger>
+        <PopoverContent className="w-96 p-3" align="end" side="bottom" sideOffset={4}>
+          <AISuggestedPrompts
+            categories={[m.knowledge_askAi_cat_all(), m.knowledge_askAi_cat_summary(), m.knowledge_askAi_cat_search(), m.knowledge_askAi_cat_graph()]}
+            onSelect={handleAskAiSelect}
+            prompts={knowledgePrompts}
+            showCategories
+            showSearch={false}
+          />
+        </PopoverContent>
+      </Popover>
+
       <div className="ml-auto">
         <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="ghost" size="icon" className="size-8">
+          <DropdownMenuTrigger render={<Button variant="ghost" size="icon" className="size-8" />}>
               <Settings className="size-4" />
-            </Button>
-          </DropdownMenuTrigger>
+            </DropdownMenuTrigger>
           <DropdownMenuContent align="end" className="w-48 space-y-1">
             <DropdownMenuItem onSelect={(e) => { e.preventDefault(); setEditOpen(true) }}>
               <Pencil className="size-3.5 mr-2" />

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

@@ -148,16 +148,18 @@ export function KnowledgeTreeItem({
 
   const handleConfirmCreateChild = async () => {
     if (!childTitle.trim()) { setCreatingChild(false); return }
+    const title = childTitle.trim()
+    const type = childType
+    setCreatingChild(false)
     try {
       const doc = await createDocumentFn({
-        data: { kbId, parentId: node.id, title: childTitle.trim(), type: childType as 'doc' | 'mindmap' | 'sheet' | 'table' },
+        data: { kbId, parentId: node.id, title, type: type as 'doc' | 'mindmap' | 'sheet' | 'table' },
       })
       onRefresh()
       onSelect(doc.id)
     } catch (e) {
       console.error('Create child failed:', e instanceof Error ? e.message : String(e))
     }
-    setCreatingChild(false)
   }
 
   const isActive = node.isHomepage ? isHomePage : node.id === activeDocId
@@ -223,26 +225,20 @@ export function KnowledgeTreeItem({
         <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()}>
+              <TooltipTrigger render={<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>
+                </TooltipTrigger>
               <TooltipContent side="right">{m.knowledge_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()}>
+                <TooltipTrigger render={<DropdownMenuTrigger render={<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>
+                    </TooltipTrigger>
                 <TooltipContent side="top">{m.knowledge_toolbar_createDoc()}</TooltipContent>
               </Tooltip>
-              <DropdownMenuContent side="right" align="start" className="w-40" onCloseAutoFocus={(e) => e.preventDefault()}>
+              <DropdownMenuContent side="right" align="start" className="w-40" finalFocus={false}>
                 {DOC_TYPE_OPTIONS.map((opt) => (
                   <DropdownMenuItem
                     key={opt.type}
@@ -259,12 +255,10 @@ export function KnowledgeTreeItem({
 
           {!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()}>
+              <DropdownMenuTrigger render={<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()}>
+                </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="w-36" finalFocus={false}>
                 <DropdownMenuItem onClick={(e) => { e.stopPropagation(); setEditing(true); setEditTitle(node.title) }}>
                   <FilePenLine className="size-3.5 mr-1.5" />
                   {m.knowledge_knowledgeTree_rename()}

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

@@ -147,16 +147,18 @@ export function KnowledgeTree({
 
   const handleConfirmCreate = async () => {
     if (!creatingType || !creatingTitle.trim()) { setCreatingType(null); return }
+    const type = creatingType
+    const title = creatingTitle.trim()
+    setCreatingType(null)
     try {
       const doc = await createDocumentFn({
-        data: { kbId, title: creatingTitle.trim(), type: creatingType as 'doc' | 'mindmap' | 'sheet' | 'table' },
+        data: { kbId, title, type: type as 'doc' | 'mindmap' | 'sheet' | 'table' },
       })
       await fetchDocuments()
       onSelect(doc.id)
     } catch (e) {
       console.error('Create failed:', e instanceof Error ? e.message : String(e))
     }
-    setCreatingType(null)
   }
 
   return (
@@ -164,12 +166,10 @@ export function KnowledgeTree({
       <div className="flex items-center justify-between px-3 py-3 border-b">
         <span className="text-xs font-medium text-muted-foreground leading-5">{m.knowledge_knowledgeTree_title()}</span>
         <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="ghost" size="icon" className="size-6">
+          <DropdownMenuTrigger render={<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()}>
+            </DropdownMenuTrigger>
+          <DropdownMenuContent side="right" align="start" className="w-40 " finalFocus={false}>
             {DOC_TYPE_OPTIONS.map((opt) => (
               <DropdownMenuItem
                 key={opt.type}

package/src/components/knowledge-public/bookmark-card.tsx

@@ -172,10 +172,8 @@ function Summary({ text }: { text: string }) {
     return <p ref={ref} className="mt-2 line-clamp-2 text-sm text-muted-foreground">{text}</p>
   }
   return (
-    <HoverCard openDelay={200} closeDelay={150}>
-      <HoverCardTrigger asChild>
-        <p ref={ref} className="mt-2 line-clamp-2 cursor-help text-sm text-muted-foreground">{text}</p>
-      </HoverCardTrigger>
+    <HoverCard>
+      <HoverCardTrigger delay={200} closeDelay={150} render={<p ref={ref} className="mt-2 line-clamp-2 cursor-help text-sm text-muted-foreground" />}>{text}</HoverCardTrigger>
       <HoverCardContent className="max-h-60 w-80 overflow-auto text-sm leading-relaxed">{text}</HoverCardContent>
     </HoverCard>
   )
@@ -194,9 +192,7 @@ function IconButton({
 }) {
   return (
     <Tooltip>
-      <TooltipTrigger asChild>
-        <button
-          type="button"
+      <TooltipTrigger render={<button type="button"
           onClick={(e) => {
             e.stopPropagation()
             onClick()
@@ -204,11 +200,9 @@ function IconButton({
           className={cn(
             'inline-flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground',
             className,
-          )}
-        >
+          )} />}>
           {children}
-        </button>
-      </TooltipTrigger>
+        </TooltipTrigger>
       <TooltipContent>{tooltip}</TooltipContent>
     </Tooltip>
   )

package/src/components/knowledge-public/bookmark-form-dialog.tsx

@@ -27,7 +27,7 @@ import { updateBookmarkFn } from '@/server/serverFns/knowledge-public/bookmarks/
 import { listBookmarkCategoriesFn, createBookmarkCategoryFn } from '@/server/serverFns/knowledge-public/bookmarks/categories'
 import { deleteBookmarkFn } from '@/server/serverFns/knowledge-public/bookmarks/delete'
 import { Trash2, Check, X } from 'lucide-react'
-import { toast } from '@/components/ui/sonner'
+import { toast } from '@/components/ui/toast'
 import { m } from "@/paraglide/messages.js";
 
 export interface BookmarkEditTarget {
@@ -187,7 +187,7 @@ export function BookmarkFormDialog({
               </div>
             ) : (
               <div className="flex gap-2">
-                <Select value={categoryId} onValueChange={setCategoryId}>
+                <Select value={categoryId} onValueChange={(v) => setCategoryId(v ?? "")}>
                   <SelectTrigger className="flex-1">
                     <SelectValue placeholder={m.knowledge_bookmarks_detail_selectCategory()} />
                   </SelectTrigger>

package/src/components/knowledge-public/knowledge-form-dialog.tsx

@@ -23,7 +23,7 @@ import { Input } from '@/components/ui/input'
 import { Textarea } from '@/components/ui/textarea'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { Plus, Trash2 } from 'lucide-react'
-import { toast } from '@/components/ui/sonner'
+import { toast } from '@/components/ui/toast'
 import { MarkdownEditor } from './markdown-editor'
 import { NotionDocEditor } from '@/components/tiptap/notion-like'
 import { KnowledgeTagInput } from '@/components/knowledge/knowledge-tag-input'
@@ -381,7 +381,7 @@ export function KnowledgeFormDialog({ type, open, onOpenChange, editingId, onSuc
                   </div>
                   <div className="flex flex-col gap-1.5">
                     <label className="text-sm font-medium">{m['knowledge_public_compliance-form_industry']()} *</label>
-                    <Select value={industry} onValueChange={setIndustry}>
+                    <Select value={industry} onValueChange={(v) => setIndustry(v ?? "")}>
                       <SelectTrigger>
                         <SelectValue />
                       </SelectTrigger>
@@ -470,7 +470,7 @@ export function KnowledgeFormDialog({ type, open, onOpenChange, editingId, onSuc
               <>
                 <div className="flex flex-col gap-1.5">
                   <label className="text-sm font-medium">{m['knowledge_public_compliance-form_industry']()} *</label>
-                  <Select value={industry} onValueChange={setIndustry}>
+                  <Select value={industry} onValueChange={(v) => setIndustry(v ?? "")}>
                     <SelectTrigger>
                       <SelectValue />
                     </SelectTrigger>

package/src/components/knowledge-public/legal-compliance-editor.tsx

@@ -265,8 +265,7 @@ export function LegalComplianceEditor({ type, editingId }: Props) {
         saveHandlers={saveHandlers}
         backButton={
           <Tooltip>
-            <TooltipTrigger asChild>
-              <button onClick={async () => {
+            <TooltipTrigger render={<button onClick={async () => {
                 const defaultTitle = type === 'legal' ? m['knowledge_public_untitled-legal']() : m['knowledge_public_untitled-compliance']()
                 if (record.title === defaultTitle && !record.content) {
                   try {
@@ -278,10 +277,9 @@ export function LegalComplianceEditor({ type, editingId }: Props) {
                   qc.invalidateQueries({ queryKey: [`${type}-detail`] })
                   navigate({ to: detailPath, params: { id: editingId! } })
                 }
-              }} className="inline-flex items-center text-foreground hover:text-muted-foreground transition-colors">
+              }} className="inline-flex items-center text-foreground hover:text-muted-foreground transition-colors" />}>
                 <ArrowLeft className="size-8" />
-              </button>
-            </TooltipTrigger>
+              </TooltipTrigger>
             <TooltipContent>{m['knowledge_public_legal-compliance_back-to-preview']()}</TooltipContent>
           </Tooltip>
         }

package/src/components/knowledge-public/sharers-avatar-group.tsx

@@ -63,15 +63,11 @@ export function SharersAvatarGroup({
       </AvatarGroup>
       {rest > 0 && (
         <Tooltip>
-          <TooltipTrigger asChild>
-            <div
-              className={cn(
+          <TooltipTrigger render={<div className={cn(
                 'flex h-6 w-6 items-center justify-center rounded-full bg-muted text-[10px] font-medium ring-2 ring-background cursor-default',
-              )}
-            >
+              )} />}>
               +{rest}
-            </div>
-          </TooltipTrigger>
+            </TooltipTrigger>
           <TooltipContent>{m.knowledge_sharers_count({ count: sharers.length })}</TooltipContent>
         </Tooltip>
       )}

package/src/components/layout/sidebar-03/__tests__/user-menu-anonymous.test.tsx

@@ -17,7 +17,7 @@ vi.mock('@/components/ui/sidebar', () => ({
   ),
   useSidebar: () => ({ isMobile: false }),
 }))
-vi.mock('sonner', () => ({ toast: { success: vi.fn(), error: vi.fn() } }))
+vi.mock('@/components/ui/toast', () => ({ toast: { success: vi.fn(), error: vi.fn() } }))
 vi.mock('@/server/serverFns/auth/session', () => ({ logoutRemoteFn: vi.fn() }))
 vi.mock('@/components/shared-kit', () => ({
   UserAvatar: ({ name }: { name?: string }) => <div data-testid="avatar">{name}</div>,

package/src/components/layout/sidebar-03/app-sidebar.tsx

@@ -29,11 +29,9 @@ import { NotificationsBell } from "@/components/layout/sidebar-03/nav-notificati
 import { NavAnyHub } from "@/components/layout/sidebar-03/nav-anyhub";
 import { NavKnowledge } from "@/components/layout/sidebar-03/nav-knowledge";
 import { NavWorkspace } from "@/components/layout/sidebar-03/nav-workspace";
-import { LogoIcon } from "@/components/shared-kit/logos/logo-icon";
 import { UserMenu } from "@/components/layout/sidebar-03/user-menu";
 import { ThemeToggle } from "@/components/shared-kit/theme/theme-toggle";
 import { AnimatedThemeToggler } from '@/components/magicui/animated-theme-toggler'
-import { Badge } from "@/components/ui/badge"
 import { workspaceRoutes } from "@/config/sidebar-routes";
 import type { Route } from "@/config/sidebar-routes";
 import { SidebarSearchTrigger } from "@/components/layout/sidebar-03/nav-search-trigger"
@@ -55,7 +53,18 @@ export function DashboardSidebar() {
       >
         {isCollapsed ? (
           <div className="flex flex-col items-center gap-2">
-             <LogoIcon className="h-6 w-6" />
+            <div className="flex flex-col items-center gap-2">
+              <img
+                src="/logo/allblue-logo-dark.svg"
+                alt="AllBlue"
+                className="h-6 w-6 dark:hidden"
+              />
+              <img
+                src="/logo/allblue-logo-light.svg"
+                alt="AllBlue"
+                className="hidden h-6 w-6 dark:block"
+              />
+            </div>
             <div className="flex flex-col-reverse items-center gap-1">
               <NotificationsBell />
               <SidebarTrigger />
@@ -64,13 +73,16 @@ export function DashboardSidebar() {
         ) : (
           <>
             <a href="#" className="flex items-center gap-2">
-              <LogoIcon className="h-5 w-5" />
-              <div className="flex items-center gap-2">
-                <span className="font-semibold text-black dark:text-white">
-                  AllBlue
-                </span>
-                {/* <Badge className="h-4 text-[10px] relative -top-4 -left-9 ">v0</Badge> */}
-              </div>
+              <img
+                src="/logo/allblue-logo-text-dark.svg"
+                alt="AllBlue"
+                className="h-5 dark:hidden"
+              />
+              <img
+                src="/logo/allblue-logo-text-light.svg"
+                alt="AllBlue"
+                className="hidden h-5 dark:block"
+              />
             </a>
             <div className="flex items-center gap-2">
               <NotificationsBell />

package/src/components/layout/sidebar-03/nav-anyhub.tsx

@@ -68,11 +68,9 @@ export function NavAnyHub() {
     return (
       <SidebarMenu className="flex gap-1.5">
         <SidebarMenuItem>
-            <SidebarMenuButton asChild isActive={isActive} tooltip={m.common_sidebar_anyHub_title()}>
-            <Link to="/apps/anyhub" className="flex items-center justify-center rounded-lg p-1">
+            <SidebarMenuButton render={<Link to="/apps/anyhub" className="flex items-center justify-center rounded-lg p-1" />} isActive={isActive} tooltip={m.common_sidebar_anyHub_title()}>
               <Blocks className="size-4" />
-            </Link>
-          </SidebarMenuButton>
+            </SidebarMenuButton>
         </SidebarMenuItem>
       </SidebarMenu>
     )
@@ -89,18 +87,12 @@ export function NavAnyHub() {
       <SidebarMenu>
         <SidebarMenuItem>
           <div className="relative">
-            <SidebarMenuButton
-              asChild
-              isActive={isActive}
-              className={cn(
+            <SidebarMenuButton render={<Link to="/apps/anyhub" className="flex w-full items-center" />} isActive={isActive} className={cn(
                 "flex w-full items-center rounded-lg px-2 pr-9"
-              )}
-            >
-              <Link to="/apps/anyhub" className="flex w-full items-center">
+              )}>
                 <Blocks className="size-4" />
                 <span className="ml-2 flex-1 text-sm font-medium">{m.common_sidebar_anyHub_title()}</span>
-              </Link>
-            </SidebarMenuButton>
+              </SidebarMenuButton>
 
             {hasPinned && (
               <span
@@ -125,20 +117,14 @@ export function NavAnyHub() {
           <SidebarMenuSub className="my-1 ml-3.5">
             {pinnedApps.map((app) => (
               <SidebarMenuSubItem key={app.id}>
-                <SidebarMenuSubButton
-                  asChild
-                  isActive={pathname === `/apps/anyhub/${app.id}`}
-                  className="flex items-center rounded-md px-4 py-1.5 text-sm font-medium"
-                >
-                  <Link to="/apps/anyhub/$id" params={{ id: app.id }}>
+                <SidebarMenuSubButton render={<Link to="/apps/anyhub/$id" params={{ id: app.id }} />} isActive={pathname === `/apps/anyhub/${app.id}`} className="flex items-center rounded-md px-4 py-1.5 text-sm font-medium">
                     {app.iconUrl ? (
                       <img src={app.iconUrl} alt="" className="size-4 mr-2" />
                     ) : (
                       <div className="size-4 mr-2 rounded bg-primary/10" />
                     )}
                     <span className="text-sm">{app.displayName}</span>
-                  </Link>
-                </SidebarMenuSubButton>
+                  </SidebarMenuSubButton>
               </SidebarMenuSubItem>
             ))}
           </SidebarMenuSub>

package/src/components/layout/sidebar-03/nav-knowledge.tsx

@@ -177,9 +177,7 @@ function UnpinButton({ kb }: { kb: KnowledgeItem }) {
       onClick={handleClick}
     >
       <Tooltip>
-        <TooltipTrigger asChild>
-          <PinOff className="size-3.5" />
-        </TooltipTrigger>
+        <TooltipTrigger render={<PinOff className="size-3.5" />}></TooltipTrigger>
         <TooltipContent>{m.sidebar_knowledge_unpin()}</TooltipContent>
       </Tooltip>
     </button>
@@ -207,21 +205,12 @@ function KnowledgeBaseLinks({ pathname }: { pathname: string }) {
         const itemActive = pathname.startsWith(`/knowledge/${item.id}`);
         return (
           <SidebarMenuItem key={item.id} className="group/kb relative">
-            <SidebarMenuButton
-              asChild
-              tooltip={item.name}
-              isActive={itemActive}
-              className="flex w-full items-center rounded-lg px-2"
-            >
-              <Link
-                to={"/knowledge/$kbId" as any}
+            <SidebarMenuButton render={<Link to={"/knowledge/$kbId" as any}
                 params={{ kbId: item.id } as any}
-                className="flex w-full items-center"
-              >
+                className="flex w-full items-center" />} tooltip={item.name} isActive={itemActive} className="flex w-full items-center rounded-lg px-2">
                 <Icon className="size-4 mr-2 shrink-0" />
                 <span className="text-sm font-medium truncate">{item.name}</span>
-              </Link>
-            </SidebarMenuButton>
+              </SidebarMenuButton>
             <UnpinButton kb={item} />
           </SidebarMenuItem>
         );
@@ -261,16 +250,12 @@ export function NavKnowledge() {
         <div className="flex h-8 items-center justify-between px-2 mb-1">
           <span className="text-xs font-medium text-sidebar-foreground/70">{m.common_sidebar_knowledge_title()}</span>
           <Tooltip>
-            <TooltipTrigger asChild>
-              <button
-                type="button"
+            <TooltipTrigger render={<button type="button"
                 aria-label={m.common_sidebar_knowledge_create()}
                 onClick={() => setCreateOpen(true)}
-                className="flex size-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2"
-              >
+                className="flex size-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2" />}>
                 <BadgePlus className="size-4 ml-1" />
-              </button>
-            </TooltipTrigger>
+              </TooltipTrigger>
             <TooltipContent side="right">
               <p>{m.common_sidebar_knowledge_create()}</p>
             </TooltipContent>
@@ -286,24 +271,16 @@ export function NavKnowledge() {
         <SidebarMenu>
           <SidebarMenuItem>
             <div className="relative">
-              <SidebarMenuButton
-                asChild
-                tooltip={m.common_sidebar_knowledge_title()}
-                isActive={active}
-                className={cn(
+              <SidebarMenuButton render={<Link to={("/knowledge" as any)}
+                  className="flex w-full items-center" />} tooltip={m.common_sidebar_knowledge_title()} isActive={active} className={cn(
                   "flex w-full items-center rounded-lg px-2 pr-9",
                   isCollapsed && "justify-center"
-                )}
-              >
-                <Link to={("/knowledge" as any)}
-                  className="flex w-full items-center"
-                >
+                )}>
                   <BookOpenText className="size-4" />
                   {!isCollapsed && (
                     <span className="ml-2 text-sm font-medium">{m.common_sidebar_knowledge_general()}</span>
                   )}
-                </Link>
-              </SidebarMenuButton>
+                </SidebarMenuButton>
 
               {!isCollapsed && (
                 <span
@@ -331,10 +308,8 @@ export function NavKnowledge() {
                 const subActive = pathname === route.link;
                 return (
                   <SidebarMenuSubItem key={route.id} className="h-auto">
-                    <SidebarMenuSubButton asChild isActive={subActive}>
-                      <Link to={route.link}
-                        className="flex items-center rounded-md w-50 py-1.5 text-sm font-medium"
-                      >
+                    <SidebarMenuSubButton render={<Link to={route.link}
+                        className="flex items-center rounded-md w-50 py-1.5 text-sm font-medium" />} isActive={subActive}>
  <Icon className="size-4 mr-2" />
                           {route.title()}
                           {route.badge && (
@@ -342,8 +317,7 @@ export function NavKnowledge() {
                                   <AnimatedGradientText speed={2} colorFrom="#0760FF" colorTo="#3E83FF">{route.badge()}</AnimatedGradientText>
                                 </Badge>
                               )}
-                      </Link>
-                    </SidebarMenuSubButton>
+                      </SidebarMenuSubButton>
                   </SidebarMenuSubItem>
                 );
               })}