@allbluecn/web-app 0.3.0

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

@@ -0,0 +1,524 @@
+// 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 } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
+import { Button } from '@/components/ui/button'
+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 { MarkdownEditor } from './markdown-editor'
+import { NotionDocEditor } from '@allbluecn/tiptap/notion-like'
+import { KnowledgeTagInput } from '@/components/knowledge/knowledge-tag-input'
+import { createLegalFn } from '@/server/serverFns/knowledge-public/legal/create'
+import { updateLegalFn } from '@/server/serverFns/knowledge-public/legal/update'
+import { getLegalDetailFn } from '@/server/serverFns/knowledge-public/legal/detail'
+import { createComplianceFn } from '@/server/serverFns/knowledge-public/compliance/create'
+import { updateComplianceFn } from '@/server/serverFns/knowledge-public/compliance/update'
+import { getComplianceDetailFn } from '@/server/serverFns/knowledge-public/compliance/detail'
+import { createDictionaryFn } from '@/server/serverFns/knowledge-public/dictionary/create'
+import { updateDictionaryFn } from '@/server/serverFns/knowledge-public/dictionary/update'
+import { getDictionaryDetailFn } from '@/server/serverFns/knowledge-public/dictionary/detail'
+import { useTranslation } from 'react-i18next'
+
+type KnowledgeType = 'legal' | 'compliance' | 'dictionary'
+
+const JURISDICTION_OPTIONS = [
+  { value: 'CN_NATIONAL', label: 'public.legal-form.jurisdiction-options.CN_NATIONAL' },
+  { value: 'CN_LOCAL', label: 'public.legal-form.jurisdiction-options.CN_LOCAL' },
+  { value: 'OVERSEAS', label: 'public.legal-form.jurisdiction-options.OVERSEAS' },
+]
+
+const INDUSTRY_OPTIONS = [
+  { value: '通用', label: 'public.legal-form.industry.通用' },
+  { value: '互联网', label: 'public.legal-form.industry.互联网' },
+  { value: '金融', label: 'public.legal-form.industry.金融' },
+  { value: '医疗', label: 'public.legal-form.industry.医疗' },
+  { value: '教育', label: 'public.legal-form.industry.教育' },
+  { value: '制造业', label: 'public.legal-form.industry.制造业' },
+  { value: '能源', label: 'public.legal-form.industry.能源' },
+  { value: '交通', label: 'public.legal-form.industry.交通' },
+  { value: '电商', label: 'public.legal-form.industry.电商' },
+  { value: '游戏', label: 'public.legal-form.industry.游戏' },
+]
+
+interface Props {
+  type: KnowledgeType
+  open: boolean
+  onOpenChange: (o: boolean) => void
+  editingId?: string
+  onSuccess?: () => void
+}
+
+export function KnowledgeFormDialog({ type, open, onOpenChange, editingId, onSuccess }: Props) {
+  const { t } = useTranslation('knowledge')
+  const isEdit = !!editingId
+
+  const detailQuery = useQuery({
+    queryKey: [`${type}-form-detail`, editingId],
+    queryFn: async (): Promise<Record<string, unknown>> => {
+      if (type === 'legal')
+        return (await getLegalDetailFn({ data: { id: editingId! } })) as unknown as Record<string, unknown>
+      if (type === 'compliance')
+        return (await getComplianceDetailFn({ data: { id: editingId! } })) as unknown as Record<string, unknown>
+      return (await getDictionaryDetailFn({ data: { id: editingId! } })) as unknown as Record<string, unknown>
+    },
+    enabled: open && isEdit,
+  })
+
+  const [title, setTitle] = useState('')
+  const [tags, setTags] = useState<string[]>([])
+  const [code, setCode] = useState('')
+  const [jurisdiction, setJurisdiction] = useState<'CN_NATIONAL' | 'CN_LOCAL' | 'OVERSEAS'>('CN_NATIONAL')
+  const [region, setRegion] = useState('')
+  const [country, setCountry] = useState('')
+  const [category, setCategory] = useState('')
+  const [issuingAuthority, setIssuingAuthority] = useState('')
+  const [effectiveDate, setEffectiveDate] = useState('')
+  const [summary, setSummary] = useState('')
+  const [content, setContent] = useState('')
+  const [sourceUrl, setSourceUrl] = useState('')
+  const [industry, setIndustry] = useState('通用')
+  const [regulatoryBody, setRegulatoryBody] = useState('')
+  const [requirements, setRequirements] = useState<{ title: string; detail: string }[]>([])
+  const [definition, setDefinition] = useState('')
+  const [aliases, setAliases] = useState<string[]>([])
+  const [examples, setExamples] = useState<string[]>([])
+  const [referenceUrl, setReferenceUrl] = useState('')
+  const [hydrated, setHydrated] = useState(!isEdit)
+  const [loading, setLoading] = useState(false)
+
+  useEffect(() => {
+    if (!open) return
+    setHydrated(!isEdit)
+    if (!isEdit) {
+      setTitle('')
+      setTags([])
+      setCode('')
+      setJurisdiction('CN_NATIONAL')
+      setRegion('')
+      setCountry('')
+      setCategory('')
+      setIssuingAuthority('')
+      setEffectiveDate('')
+      setSummary('')
+      setContent('')
+      setSourceUrl('')
+      setIndustry('通用')
+      setRegulatoryBody('')
+      setRequirements([])
+      setDefinition('')
+      setAliases([])
+      setExamples([])
+      setReferenceUrl('')
+    }
+  }, [open, isEdit])
+
+  useEffect(() => {
+    if (isEdit && detailQuery.data && !hydrated) {
+      const d = detailQuery.data
+      setTitle((d.title as string) ?? '')
+      setTags(Array.isArray(d.tags) ? (d.tags as string[]) : [])
+      if (type === 'legal') {
+        setCode((d.code as string) ?? '')
+        setJurisdiction((d.jurisdiction as typeof jurisdiction) ?? 'CN_NATIONAL')
+        setRegion((d.region as string) ?? '')
+        setCountry((d.country as string) ?? '')
+        setCategory((d.category as string) ?? '')
+        setIssuingAuthority((d.issuingAuthority as string) ?? '')
+        const ed = d.effectiveDate as Date | string | null | undefined
+        setEffectiveDate(ed ? new Date(ed).toISOString().slice(0, 10) : '')
+        setSummary((d.summary as string) ?? '')
+        setContent((d.content as string) ?? '')
+        setSourceUrl((d.sourceUrl as string) ?? '')
+      } else if (type === 'compliance') {
+        setCode((d.code as string) ?? '')
+        setIndustry((d.industry as string) ?? '通用')
+        setRegulatoryBody((d.regulatoryBody as string) ?? '')
+        setRegion((d.region as string) ?? '')
+        setSummary((d.summary as string) ?? '')
+        setContent((d.content as string) ?? '')
+        setRequirements(Array.isArray(d.requirements) ? (d.requirements as { title: string; detail: string }[]) : [])
+        setSourceUrl((d.sourceUrl as string) ?? '')
+      } else {
+        setIndustry((d.industry as string) ?? '通用')
+        setDefinition((d.definition as string) ?? '')
+        setAliases(Array.isArray(d.aliases) ? (d.aliases as string[]) : [])
+        setExamples(Array.isArray(d.examples) ? (d.examples as string[]) : [])
+        setReferenceUrl((d.referenceUrl as string) ?? '')
+      }
+      setHydrated(true)
+    }
+  }, [isEdit, detailQuery.data, hydrated, type])
+
+  const titleMap = {
+    legal: { create: t('public.legal-form.title.create'), edit: t('public.legal-form.title.edit') },
+    compliance: { create: t('public.compliance-form.title.create'), edit: t('public.compliance-form.title.edit') },
+    dictionary: { create: t('public.dictionary-form.title.create'), edit: t('public.dictionary-form.title.edit') },
+  } as const
+
+  async function submit() {
+    if (!title.trim()) {
+      toast.error(t('public.knowledge-form.name-required'))
+      return
+    }
+    setLoading(true)
+    try {
+      if (type === 'legal') {
+        if (editingId) {
+          await updateLegalFn({
+            data: {
+              id: editingId,
+              title: title.trim(),
+              code: code.trim() || undefined,
+              jurisdiction,
+              region: region.trim() || null,
+              country: country.trim() || null,
+              category: category.trim(),
+              issuingAuthority: issuingAuthority.trim() || null,
+              effectiveDate: effectiveDate ? new Date(effectiveDate) : null,
+              summary: summary.trim() || null,
+              content: content.trim() || null,
+              sourceUrl: sourceUrl.trim(),
+              tags,
+            },
+          })
+        } else {
+          await createLegalFn({
+            data: {
+              title: title.trim(),
+              code: code.trim() || undefined,
+              jurisdiction,
+              region: region.trim() || undefined,
+              country: country.trim() || undefined,
+              category: category.trim(),
+              issuingAuthority: issuingAuthority.trim() || undefined,
+              effectiveDate: effectiveDate ? new Date(effectiveDate) : null,
+              summary: summary.trim() || undefined,
+              content: content.trim() || undefined,
+              sourceUrl: sourceUrl.trim(),
+              tags,
+            },
+          })
+        }
+      } else if (type === 'compliance') {
+        if (editingId) {
+          await updateComplianceFn({
+            data: {
+              id: editingId,
+              title: title.trim(),
+              code: code.trim() || undefined,
+              industry,
+              regulatoryBody: regulatoryBody.trim() || null,
+              region: region.trim() || null,
+              summary: summary.trim() || null,
+              content: content.trim() || null,
+              requirements: requirements.filter((r) => r.title.trim()),
+              sourceUrl: sourceUrl.trim(),
+              tags,
+            },
+          })
+        } else {
+          await createComplianceFn({
+            data: {
+              title: title.trim(),
+              code: code.trim() || undefined,
+              industry,
+              regulatoryBody: regulatoryBody.trim() || undefined,
+              region: region.trim() || undefined,
+              summary: summary.trim() || undefined,
+              content: content.trim() || undefined,
+              requirements: requirements.filter((r) => r.title.trim()),
+              sourceUrl: sourceUrl.trim(),
+              tags,
+            },
+          })
+        }
+      } else {
+        if (editingId) {
+          await updateDictionaryFn({
+            data: {
+              id: editingId,
+              title: title.trim(),
+              industry,
+              definition: definition.trim() || null,
+              aliases,
+              examples,
+              referenceUrl: referenceUrl.trim(),
+              tags,
+            },
+          })
+        } else {
+          await createDictionaryFn({
+            data: {
+              title: title.trim(),
+              industry,
+              definition: definition.trim() || undefined,
+              aliases,
+              examples,
+              referenceUrl: referenceUrl.trim(),
+              tags,
+            },
+          })
+        }
+      }
+      toast.success(editingId ? t('public.knowledge-form.updated') : t('public.knowledge-form.created'))
+      onSuccess?.()
+      onOpenChange(false)
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : t('public.knowledge-form.save-failed'))
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const dialogTitle = editingId ? titleMap[type].edit : titleMap[type].create
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-h-[90vh] w-200 overflow-y-auto sm:max-w-110">
+        <DialogHeader>
+          <DialogTitle>{dialogTitle}</DialogTitle>
+        </DialogHeader>
+
+        {isEdit && !hydrated ? (
+          <p className="py-8 text-center text-sm text-muted-foreground">{t('public.legal-form.loading')}</p>
+        ) : (
+          <div className="space-y-3">
+            <div className="flex flex-col gap-1.5">
+              <label className="text-sm font-medium">{type === 'dictionary' ? t('public.dictionary-form.term-name') : t('public.knowledge-form.name')}</label>
+              <Input value={title} onChange={(e) => setTitle(e.target.value)} autoFocus />
+            </div>
+
+            {type === 'legal' && (
+              <>
+                <div className="grid grid-cols-2 gap-3">
+                  <div className="flex flex-col gap-1.5">
+                    <label className="text-sm font-medium">{t('public.legal-form.code')}</label>
+                    <Input value={code} onChange={(e) => setCode(e.target.value)} placeholder={t('public.legal-form.optional')} />
+                  </div>
+                  <div className="flex flex-col gap-1.5">
+                    <label className="text-sm font-medium">{t('public.legal-form.category')}</label>
+                    <Input value={category} onChange={(e) => setCategory(e.target.value)} placeholder={t('public.legal-form.category-placeholder')} />
+                  </div>
+                </div>
+                <div className="grid grid-cols-2 gap-3">
+                  <div className="flex flex-col gap-1.5">
+                    <label className="text-sm font-medium">{t('public.legal-form.jurisdiction')} *</label>
+                    <Select value={jurisdiction} onValueChange={(v) => setJurisdiction(v as typeof jurisdiction)}>
+                      <SelectTrigger>
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {JURISDICTION_OPTIONS.map((o) => (
+                          <SelectItem key={o.value} value={o.value}>
+                            {t(o.label)}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="flex flex-col gap-1.5">
+                    <label className="text-sm font-medium">{t('public.legal-form.effective-date')}</label>
+                    <Input type="date" value={effectiveDate} onChange={(e) => setEffectiveDate(e.target.value)} />
+                  </div>
+                </div>
+                {jurisdiction === 'CN_LOCAL' && (
+                  <div className="flex flex-col gap-1.5">
+                    <label className="text-sm font-medium">{t('public.legal-form.region')}</label>
+                    <Input value={region} onChange={(e) => setRegion(e.target.value)} placeholder={t('public.legal-form.region-placeholder')} />
+                  </div>
+                )}
+                {jurisdiction === 'OVERSEAS' && (
+                  <div className="flex flex-col gap-1.5">
+                    <label className="text-sm font-medium">{t('public.legal-form.country')}</label>
+                    <Input value={country} onChange={(e) => setCountry(e.target.value)} placeholder={t('public.legal-form.country-placeholder')} />
+                  </div>
+                )}
+                <div className="flex flex-col gap-1.5">
+                  <label className="text-sm font-medium">{t('public.legal-form.issuing-authority')}</label>
+                  <Input value={issuingAuthority} onChange={(e) => setIssuingAuthority(e.target.value)} placeholder={t('public.legal-form.authority-placeholder')} />
+                </div>
+                <div className="flex flex-col gap-1.5">
+                  <label className="text-sm font-medium">{t('public.legal-form.summary')}</label>
+                  <Textarea value={summary} onChange={(e) => setSummary(e.target.value)} rows={2} maxLength={1000} />
+                </div>
+                <div className="flex flex-col gap-1.5">
+                  <label className="text-sm font-medium">{t('public.legal-form.content')}</label>
+                  <div className="min-h-60 overflow-hidden rounded-md border">
+                    <NotionDocEditor content={content} onChange={(c) => setContent(c.html)} placeholder={t('public.legal-form.content-placeholder')} />
+                  </div>
+                </div>
+                <div className="flex flex-col gap-1.5">
+                  <label className="text-sm font-medium">{t('public.legal-form.source-url')}</label>
+                  <Input value={sourceUrl} onChange={(e) => setSourceUrl(e.target.value)} placeholder="https://..." />
+                </div>
+              </>
+            )}
+
+            {type === 'compliance' && (
+              <>
+                <div className="grid grid-cols-2 gap-3">
+                  <div className="flex flex-col gap-1.5">
+                    <label className="text-sm font-medium">{t('public.compliance-form.clause-number')}</label>
+                    <Input value={code} onChange={(e) => setCode(e.target.value)} placeholder={t('public.legal-form.optional')} />
+                  </div>
+                  <div className="flex flex-col gap-1.5">
+                    <label className="text-sm font-medium">{t('public.compliance-form.industry')} *</label>
+                    <Select value={industry} onValueChange={setIndustry}>
+                      <SelectTrigger>
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {INDUSTRY_OPTIONS.map((o) => (
+                          <SelectItem key={o.value} value={o.value}>
+                            {t(o.label)}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+                <div className="grid grid-cols-2 gap-3">
+                  <div className="flex flex-col gap-1.5">
+                    <label className="text-sm font-medium">{t('public.compliance-form.regulatory-body')}</label>
+                    <Input value={regulatoryBody} onChange={(e) => setRegulatoryBody(e.target.value)} />
+                  </div>
+                  <div className="flex flex-col gap-1.5">
+                    <label className="text-sm font-medium">{t('public.compliance-form.region')}</label>
+                    <Input value={region} onChange={(e) => setRegion(e.target.value)} />
+                  </div>
+                </div>
+                <div className="flex flex-col gap-1.5">
+                  <div className="flex items-center justify-between">
+                    <label className="text-sm font-medium">{t('public.compliance-form.requirements')}</label>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      onClick={() => setRequirements([...requirements, { title: '', detail: '' }])}
+                    >
+                      <Plus className="h-3.5 w-3.5" />
+                      {t('public.compliance-form.add-one')}
+                    </Button>
+                  </div>
+                  <div className="space-y-2">
+                    {requirements.map((r, i) => (
+                      <div key={i} className="flex gap-2">
+                        <div className="flex flex-1 flex-col gap-1">
+                          <Input
+                            value={r.title}
+                            onChange={(e) =>
+                              setRequirements(requirements.map((x, j) => (j === i ? { ...x, title: e.target.value } : x)))
+                            }
+                            placeholder={t('public.compliance-form.req-title')}
+                          />
+                          <Input
+                            value={r.detail}
+                            onChange={(e) =>
+                              setRequirements(requirements.map((x, j) => (j === i ? { ...x, detail: e.target.value } : x)))
+                            }
+                            placeholder={t('public.compliance-form.req-detail')}
+                          />
+                        </div>
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="icon"
+                          onClick={() => setRequirements(requirements.filter((_, j) => j !== i))}
+                        >
+                          <Trash2 className="h-4 w-4 text-muted-foreground" />
+                        </Button>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+                <div className="flex flex-col gap-1.5">
+                  <label className="text-sm font-medium">{t('public.legal-form.summary')}</label>
+                  <Textarea value={summary} onChange={(e) => setSummary(e.target.value)} rows={2} maxLength={1000} />
+                </div>
+                <div className="flex flex-col gap-1.5">
+                  <label className="text-sm font-medium">{t('public.legal-form.content')}</label>
+                  <div className="min-h-60 overflow-hidden rounded-md border">
+                    <NotionDocEditor content={content} onChange={(c) => setContent(c.html)} placeholder={t('public.legal-form.content-placeholder')} />
+                  </div>
+                </div>
+                <div className="flex flex-col gap-1.5">
+                  <label className="text-sm font-medium">{t('public.legal-form.source-url')}</label>
+                  <Input value={sourceUrl} onChange={(e) => setSourceUrl(e.target.value)} placeholder="https://..." />
+                </div>
+              </>
+            )}
+
+            {type === 'dictionary' && (
+              <>
+                <div className="flex flex-col gap-1.5">
+                  <label className="text-sm font-medium">{t('public.compliance-form.industry')} *</label>
+                  <Select value={industry} onValueChange={setIndustry}>
+                    <SelectTrigger>
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {INDUSTRY_OPTIONS.map((o) => (
+                        <SelectItem key={o.value} value={o.value}>
+                          {t(o.label)}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="flex flex-col gap-1.5">
+                  <label className="text-sm font-medium">{t('public.dictionary-form.definition')}</label>
+                  <MarkdownEditor value={definition} onChange={setDefinition} />
+                </div>
+                <div className="flex flex-col gap-1.5">
+                  <label className="text-sm font-medium">{t('public.dictionary-form.aliases')}</label>
+                  <KnowledgeTagInput tags={aliases} onChange={setAliases} />
+                </div>
+                <div className="flex flex-col gap-1.5">
+                  <label className="text-sm font-medium">{t('public.dictionary-form.examples')}</label>
+                  <KnowledgeTagInput tags={examples} onChange={setExamples} />
+                </div>
+                <div className="flex flex-col gap-1.5">
+                  <label className="text-sm font-medium">{t('public.dictionary-form.reference-url')}</label>
+                  <Input value={referenceUrl} onChange={(e) => setReferenceUrl(e.target.value)} placeholder="https://..." />
+                </div>
+              </>
+            )}
+
+            <div className="flex flex-col gap-1.5">
+              <label className="text-sm font-medium">{t('public.legal-form.tags')}</label>
+              <KnowledgeTagInput tags={tags} onChange={setTags} />
+            </div>
+          </div>
+        )}
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            {t('public.legal-form.cancel')}
+          </Button>
+          <Button onClick={submit} disabled={loading}>
+            {loading ? t('public.legal-form.saving') : t('public.legal-form.save')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/components/knowledge-public/knowledge-search-bar.tsx

@@ -0,0 +1,46 @@
+// 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 { Input } from '@/components/ui/input'
+import { Button } from '@/components/ui/button'
+import { Plus, Search } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+
+interface Props {
+  search: string
+  onSearchChange: (v: string) => void
+  onCreate?: () => void
+  createLabel?: string
+}
+
+export function KnowledgeSearchBar({ search, onSearchChange, onCreate, createLabel }: Props) {
+  const { t } = useTranslation('knowledge')
+  return (
+    <div className="mx-auto flex w-full max-w-2xl flex-col items-center gap-3">
+      <div className="relative w-full max-w-2xl mt-12">
+        <Search className="absolute left-6 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+        <Input value={search} onChange={(e) => onSearchChange(e.target.value)} placeholder={t('knowledgeSearch.placeholder')} className="pl-12 h-14 rounded-3xl bg-background/60 dark:border-primary/40" />
+      </div>
+      {onCreate && (
+        <Button onClick={onCreate} className="mt-4">
+          <Plus className="h-4 w-4" />
+          {createLabel ?? t('knowledgeSearch.new')}
+        </Button>
+      )}
+    </div>
+  )
+}