@vibe-forge/client 2.0.0 → 3.0.0-alpha.0

package/src/components/knowledge-base/KnowledgeBaseView.tsx

@@ -1,23 +1,51 @@
 import './KnowledgeBaseView.scss'
 
-import { App, Segmented } from 'antd'
+import { App, Form } from 'antd'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import useSWR from 'swr'
 
-import type { EntitySummary, RuleSummary, SpecSummary } from '#~/api.js'
+import { createSkill, getApiErrorMessage } from '#~/api.js'
+import type { EntitySummary, RuleSummary, SkillSummary, SpecSummary } from '#~/api.js'
 import { PageShell } from '#~/components/layout/PageShell.js'
 import { useResponsiveLayout } from '#~/hooks/use-responsive-layout'
 import { useQueryParams } from '#~/hooks/useQueryParams.js'
+import { CreateSkillModal } from './components/CreateSkillModal.js'
+import type { CreateSkillFormValues } from './components/CreateSkillModal.js'
 import { EntitiesTab } from './components/EntitiesTab.js'
 import { FlowsTab } from './components/FlowsTab.js'
+import { KnowledgeContentControls } from './components/KnowledgeContentControls.js'
+import { KnowledgeMobilePanel } from './components/KnowledgeMobilePanel.js'
+import { KnowledgeSidebar } from './components/KnowledgeSidebar.js'
 import { RulesTab } from './components/RulesTab.js'
 import { SkillsTab } from './components/SkillsTab.js'
+import {
+  ALL_REGISTRIES,
+  ALL_SKILL_SOURCES,
+  isSkillHubInstallFilter,
+  isSkillHubSortKey
+} from './components/skill-hub-utils.js'
+import type { SkillHubInstallFilter, SkillHubSortKey } from './components/skill-hub-utils.js'
 
 interface KnowledgeQueryParams extends Record<string, string> {
   kbTab: string
+  skillInstall: string
+  skillMarketSearch: string
+  skillProjectSearch: string
+  skillRegistry: string
+  skillSort: string
+  skillSource: string
+  skillView: string
 }
 
+const toSkillViewMode = (value: string): 'project' | 'market' => value === 'market' ? 'market' : 'project'
+const toSkillHubInstallFilter = (value: string): SkillHubInstallFilter => (
+  isSkillHubInstallFilter(value) ? value : 'all'
+)
+const toSkillHubSortKey = (value: string): SkillHubSortKey => (
+  isSkillHubSortKey(value) ? value : 'default'
+)
+
 export function KnowledgeBaseView() {
   const { t } = useTranslation()
   const { message } = App.useApp()
@@ -37,6 +65,10 @@ export function KnowledgeBaseView() {
     isLoading: isRulesLoading,
     mutate: mutateRules
   } = useSWR<{ rules: RuleSummary[] }>('/api/ai/rules')
+  const {
+    data: skillsRes,
+    mutate: mutateSkills
+  } = useSWR<{ skills: SkillSummary[] }>('/api/ai/skills')
 
   const specs = specsRes?.specs ?? []
   const entities = entitiesRes?.entities ?? []
@@ -47,13 +79,71 @@ export function KnowledgeBaseView() {
   const [entityQuery, setEntityQuery] = React.useState('')
   const [entityTagFilter, setEntityTagFilter] = React.useState<string[]>([])
   const [ruleQuery, setRuleQuery] = React.useState('')
+  const [isKnowledgeSidebarCollapsed, setKnowledgeSidebarCollapsed] = React.useState(false)
+  const [isMobileKnowledgePanelOpen, setMobileKnowledgePanelOpen] = React.useState(false)
+  const [createSkillOpen, setCreateSkillOpen] = React.useState(false)
+  const [savingSkill, setSavingSkill] = React.useState(false)
+  const [createSkillForm] = Form.useForm<CreateSkillFormValues>()
 
   const { values, update } = useQueryParams<KnowledgeQueryParams>({
-    keys: ['kbTab'],
+    keys: [
+      'kbTab',
+      'skillView',
+      'skillProjectSearch',
+      'skillMarketSearch',
+      'skillRegistry',
+      'skillSource',
+      'skillInstall',
+      'skillSort'
+    ],
     defaults: {
-      kbTab: 'skills'
+      kbTab: 'skills',
+      skillView: 'project',
+      skillProjectSearch: '',
+      skillMarketSearch: '',
+      skillRegistry: ALL_REGISTRIES,
+      skillSource: ALL_SKILL_SOURCES,
+      skillInstall: 'all',
+      skillSort: 'default'
+    },
+    omit: {
+      skillView: value => value === 'project',
+      skillProjectSearch: value => value === '',
+      skillMarketSearch: value => value === '',
+      skillRegistry: value => value === ALL_REGISTRIES,
+      skillSource: value => value === ALL_SKILL_SOURCES,
+      skillInstall: value => value === 'all',
+      skillSort: value => value === 'default'
     }
   })
+  const skillViewMode = toSkillViewMode(values.skillView)
+  const skillInstallFilter = toSkillHubInstallFilter(values.skillInstall)
+  const skillSortKey = toSkillHubSortKey(values.skillSort)
+  const skillProjectQuery = values.skillProjectSearch
+  const skillMarketQuery = values.skillMarketSearch
+  const skillRegistry = values.skillRegistry || ALL_REGISTRIES
+  const skillSourceFilter = values.skillSource || ALL_SKILL_SOURCES
+  const updateSkillProjectQuery = React.useCallback((value: string) => {
+    update({ skillProjectSearch: value })
+  }, [update])
+  const updateSkillViewMode = React.useCallback((value: 'project' | 'market') => {
+    update({ skillView: value })
+  }, [update])
+  const updateSkillMarketQuery = React.useCallback((value: string) => {
+    update({ skillMarketSearch: value })
+  }, [update])
+  const updateSkillRegistry = React.useCallback((value: string) => {
+    update({ skillRegistry: value })
+  }, [update])
+  const updateSkillSourceFilter = React.useCallback((value: string) => {
+    update({ skillSource: value })
+  }, [update])
+  const updateSkillInstallFilter = React.useCallback((value: SkillHubInstallFilter) => {
+    update({ skillInstall: value })
+  }, [update])
+  const updateSkillSortKey = React.useCallback((value: SkillHubSortKey) => {
+    update({ skillSort: value })
+  }, [update])
 
   const specTagOptions = React.useMemo(() => {
     const tags = new Set<string>()
@@ -112,7 +202,7 @@ export function KnowledgeBaseView() {
   }, [ruleQuery, rules])
 
   const handleRefresh = async () => {
-    await Promise.all([mutateSpecs(), mutateEntities(), mutateRules()])
+    await Promise.all([mutateSpecs(), mutateEntities(), mutateRules(), mutateSkills()])
     void message.success(t('knowledge.actions.refreshed'))
   }
 
@@ -133,11 +223,28 @@ export function KnowledgeBaseView() {
   }
 
   const handleCreateSkill = () => {
-    message.info(t('knowledge.skills.createHint'))
+    createSkillForm.resetFields()
+    setCreateSkillOpen(true)
   }
 
-  const handleImportSkill = () => {
-    message.info(t('knowledge.skills.importHint'))
+  const handleSaveSkill = async () => {
+    const values = await createSkillForm.validateFields()
+    setSavingSkill(true)
+    try {
+      await createSkill({
+        name: values.name,
+        description: values.description,
+        body: values.body
+      })
+      setCreateSkillOpen(false)
+      createSkillForm.resetFields()
+      await mutateSkills()
+      void message.success(t('knowledge.skills.createSuccess'))
+    } catch (error) {
+      void message.error(getApiErrorMessage(error, t('knowledge.skills.createFailed')))
+    } finally {
+      setSavingSkill(false)
+    }
   }
 
   const handleCreateRule = () => {
@@ -148,7 +255,26 @@ export function KnowledgeBaseView() {
     message.info(t('knowledge.rules.importHint'))
   }
 
+  const isCompactView = isCompactLayout || isTouchInteraction
+  const getContentControls = (onCreate: () => void) =>
+    isCompactView
+      ? (
+        <KnowledgeContentControls
+          onCreate={onCreate}
+          onExpandSidebar={() => setMobileKnowledgePanelOpen(true)}
+        />
+      )
+      : isKnowledgeSidebarCollapsed
+      ? (
+        <KnowledgeContentControls
+          onCreate={onCreate}
+          onExpandSidebar={() => setKnowledgeSidebarCollapsed(false)}
+        />
+      )
+      : undefined
+
   const skillCount = React.useMemo(() => {
+    if (skillsRes?.skills != null) return skillsRes.skills.length
     const names = new Set<string>()
     specs.forEach(spec => {
       spec.skills?.forEach(skill => names.add(skill))
@@ -157,7 +283,7 @@ export function KnowledgeBaseView() {
       entity.skills?.forEach(skill => names.add(skill))
     })
     return names.size
-  }, [entities, specs])
+  }, [entities, skillsRes?.skills, specs])
 
   const sections = [
     {
@@ -168,9 +294,22 @@ export function KnowledgeBaseView() {
       count: skillCount,
       content: (
         <SkillsTab
+          installFilter={skillInstallFilter}
+          leading={getContentControls(handleCreateSkill)}
+          marketQuery={skillMarketQuery}
+          projectQuery={skillProjectQuery}
+          registry={skillRegistry}
+          sortKey={skillSortKey}
+          sourceFilter={skillSourceFilter}
+          viewMode={skillViewMode}
           onRefresh={handleRefresh}
           onCreate={handleCreateSkill}
-          onImport={handleImportSkill}
+          onInstallFilterChange={updateSkillInstallFilter}
+          onMarketQueryChange={updateSkillMarketQuery}
+          onRegistryChange={updateSkillRegistry}
+          onSortChange={updateSkillSortKey}
+          onSourceFilterChange={updateSkillSourceFilter}
+          onViewModeChange={updateSkillViewMode}
         />
       )
     },
@@ -184,7 +323,9 @@ export function KnowledgeBaseView() {
         <EntitiesTab
           entities={entities}
           filteredEntities={filteredEntities}
+          hideContentSearch={isCompactView}
           isLoading={isEntitiesLoading}
+          leading={getContentControls(handleCreateEntity)}
           query={entityQuery}
           tagOptions={entityTagOptions}
           tagFilter={entityTagFilter}
@@ -206,7 +347,9 @@ export function KnowledgeBaseView() {
         <FlowsTab
           specs={specs}
           filteredSpecs={filteredSpecs}
+          hideContentSearch={isCompactView}
           isLoading={isSpecsLoading}
+          leading={getContentControls(handleCreateSpec)}
           query={specQuery}
           tagOptions={specTagOptions}
           tagFilter={specTagFilter}
@@ -228,7 +371,9 @@ export function KnowledgeBaseView() {
         <RulesTab
           rules={rules}
           filteredRules={filteredRules}
+          hideContentSearch={isCompactView}
           isLoading={isRulesLoading}
+          leading={getContentControls(handleCreateRule)}
           query={ruleQuery}
           onRefresh={handleRefresh}
           onQueryChange={setRuleQuery}
@@ -245,7 +390,72 @@ export function KnowledgeBaseView() {
     () => sections.find(section => section.key === activeSectionKey) ?? sections[0],
     [activeSectionKey, sections]
   )
-  const isCompactView = isCompactLayout || isTouchInteraction
+  const activeSearchValue = activeSectionKey === 'skills'
+    ? skillProjectQuery
+    : activeSectionKey === 'entities'
+    ? entityQuery
+    : activeSectionKey === 'flows'
+    ? specQuery
+    : activeSectionKey === 'rules'
+    ? ruleQuery
+    : ''
+  const activeSearchPlaceholder = activeSectionKey === 'skills'
+    ? t('knowledge.skills.searchProject')
+    : t('knowledge.filters.searchActive')
+  const showMobileSearch = !(activeSectionKey === 'skills' && skillViewMode === 'market')
+
+  React.useEffect(() => {
+    if (!isCompactView) {
+      setMobileKnowledgePanelOpen(false)
+    }
+  }, [isCompactView])
+
+  const handleActiveSearchChange = (value: string) => {
+    if (activeSectionKey === 'skills') {
+      updateSkillProjectQuery(value)
+      return
+    }
+    if (activeSectionKey === 'entities') {
+      setEntityQuery(value)
+      return
+    }
+    if (activeSectionKey === 'flows') {
+      setSpecQuery(value)
+      return
+    }
+    if (activeSectionKey === 'rules') {
+      setRuleQuery(value)
+    }
+  }
+
+  const handleSidebarCreate = () => {
+    if (isCompactView) {
+      setMobileKnowledgePanelOpen(false)
+    }
+
+    if (activeSectionKey === 'skills') {
+      handleCreateSkill()
+      return
+    }
+    if (activeSectionKey === 'entities') {
+      handleCreateEntity()
+      return
+    }
+    if (activeSectionKey === 'flows') {
+      handleCreateSpec()
+      return
+    }
+    if (activeSectionKey === 'rules') {
+      handleCreateRule()
+    }
+  }
+
+  const handleSelectSection = (key: string) => {
+    update({ kbTab: key })
+    if (isCompactView) {
+      setMobileKnowledgePanelOpen(false)
+    }
+  }
 
   React.useEffect(() => {
     if (values.kbTab !== activeSectionKey) {
@@ -260,47 +470,43 @@ export function KnowledgeBaseView() {
     >
       {isCompactView
         ? (
-          <div className='knowledge-base-view__mobile-switcher-shell'>
-            <Segmented
-              block
-              className='knowledge-base-view__mobile-switcher'
-              value={activeSectionKey}
-              onChange={(value) => update({ kbTab: value as string })}
-              options={sections.map((section) => ({
-                label: `${section.label} ${section.count}`,
-                value: section.key
-              }))}
-            />
-          </div>
+          <KnowledgeMobilePanel
+            activeKey={activeSectionKey}
+            open={isMobileKnowledgePanelOpen}
+            searchPlaceholder={activeSearchPlaceholder}
+            searchValue={activeSearchValue}
+            sections={sections}
+            showSearch={showMobileSearch}
+            onClose={() => setMobileKnowledgePanelOpen(false)}
+            onCreate={handleSidebarCreate}
+            onSearchChange={handleActiveSearchChange}
+            onSelect={handleSelectSection}
+          />
         )
         : (
-          <div className='knowledge-base-view__left'>
-            <div className='knowledge-base-view__sidebar'>
-              <div className='knowledge-base-view__nav-list'>
-                {sections.map((section) => (
-                  <button
-                    key={section.key}
-                    type='button'
-                    className={`knowledge-base-view__nav-item ${section.key === activeSectionKey ? 'is-active' : ''}`}
-                    onClick={() => update({ kbTab: section.key })}
-                  >
-                    <span className='material-symbols-rounded knowledge-base-view__nav-icon'>{section.icon}</span>
-                    <span className='knowledge-base-view__nav-main'>
-                      <span className='knowledge-base-view__nav-row'>
-                        <span className='knowledge-base-view__nav-label'>{section.label}</span>
-                        <span className='knowledge-base-view__nav-count'>{section.count}</span>
-                      </span>
-                      <span className='knowledge-base-view__nav-desc'>{section.description}</span>
-                    </span>
-                  </button>
-                ))}
-              </div>
-            </div>
-          </div>
+          <KnowledgeSidebar
+            activeKey={activeSectionKey}
+            collapsed={isKnowledgeSidebarCollapsed}
+            isCompact={isCompactView}
+            searchPlaceholder={activeSearchPlaceholder}
+            searchValue={activeSearchValue}
+            sections={sections}
+            onCreate={handleSidebarCreate}
+            onSearchChange={handleActiveSearchChange}
+            onSelect={handleSelectSection}
+            onToggleCollapsed={() => setKnowledgeSidebarCollapsed(prev => !prev)}
+          />
         )}
       <div className='knowledge-base-view__right'>
         <div className='knowledge-base-view__right-body'>{activeSection?.content}</div>
       </div>
+      <CreateSkillModal
+        open={createSkillOpen}
+        saving={savingSkill}
+        form={createSkillForm}
+        onSave={() => void handleSaveSkill()}
+        onClose={() => setCreateSkillOpen(false)}
+      />
     </PageShell>
   )
 }

package/src/components/knowledge-base/components/@hooks/use-skills-cli-modal-controller.ts

@@ -0,0 +1,157 @@
+import React from 'react'
+
+import { Form } from 'antd'
+import type { MessageInstance } from 'antd/es/message/interface'
+import type { TFunction } from 'i18next'
+
+import type { SkillHubItem } from '#~/api.js'
+import { getApiErrorMessage, installSkillsCliItem, searchSkillsCli } from '#~/api.js'
+import type { SkillsCliFormValues } from '../SkillsCliModal'
+
+const SKILLS_CLI_INITIAL_LIMIT = 100
+const SKILLS_CLI_LIMIT_STEP = 100
+const SKILLS_CLI_MAX_LIMIT = 500
+
+const trimOptionalString = (value: string | undefined) => {
+  const normalizedValue = value?.trim()
+  return normalizedValue == null || normalizedValue === '' ? undefined : normalizedValue
+}
+
+export const useSkillsCliModalController = (params: {
+  message: MessageInstance
+  mutateSkills: () => Promise<unknown>
+  t: TFunction
+}) => {
+  const [open, setOpen] = React.useState(false)
+  const [searching, setSearching] = React.useState(false)
+  const [loadingMore, setLoadingMore] = React.useState(false)
+  const [installingId, setInstallingId] = React.useState<string | null>(null)
+  const [items, setItems] = React.useState<SkillHubItem[]>([])
+  const [error, setError] = React.useState<string | null>(null)
+  const [hasMore, setHasMore] = React.useState(false)
+  const [hasSearched, setHasSearched] = React.useState(false)
+  const [limit, setLimit] = React.useState(SKILLS_CLI_INITIAL_LIMIT)
+  const [resetKey, setResetKey] = React.useState('')
+  const [form] = Form.useForm<SkillsCliFormValues>()
+
+  const resolveRequest = React.useCallback(async () => {
+    try {
+      await form.validateFields(['source'])
+    } catch {
+      return undefined
+    }
+
+    const values = form.getFieldsValue()
+    const source = values.source.trim()
+    return {
+      source,
+      query: trimOptionalString(values.query),
+      registry: trimOptionalString(values.registry)
+    }
+  }, [form])
+
+  const runSearch = React.useCallback(async (nextLimit: number) => {
+    const request = await resolveRequest()
+    if (request == null) return false
+
+    const result = await searchSkillsCli({
+      limit: nextLimit,
+      source: request.source,
+      ...(request.query != null ? { query: request.query } : {}),
+      ...(request.registry != null ? { registry: request.registry } : {})
+    })
+
+    setHasSearched(true)
+    setLimit(nextLimit)
+    setItems(result.items)
+    setError(result.error ?? null)
+    setHasMore(result.hasMore === true && nextLimit < SKILLS_CLI_MAX_LIMIT)
+    setResetKey([request.source, request.query ?? '', request.registry ?? '', String(nextLimit)].join('\0'))
+    return true
+  }, [resolveRequest])
+
+  const handleSearch = React.useCallback(async () => {
+    setSearching(true)
+    setLoadingMore(false)
+    try {
+      await runSearch(SKILLS_CLI_INITIAL_LIMIT)
+    } catch (error) {
+      void params.message.error(getApiErrorMessage(error, params.t('knowledge.skills.skillsCliSearchFailed')))
+    } finally {
+      setSearching(false)
+    }
+  }, [params, runSearch])
+
+  const handleLoadMore = React.useCallback(async () => {
+    const nextLimit = Math.min(limit + SKILLS_CLI_LIMIT_STEP, SKILLS_CLI_MAX_LIMIT)
+    if (nextLimit === limit) return
+
+    setLoadingMore(true)
+    try {
+      await runSearch(nextLimit)
+    } catch (error) {
+      void params.message.error(getApiErrorMessage(error, params.t('knowledge.skills.skillsCliSearchFailed')))
+    } finally {
+      setLoadingMore(false)
+    }
+  }, [limit, params, runSearch])
+
+  const handleInstall = React.useCallback(async (item: SkillHubItem) => {
+    const request = await resolveRequest()
+    if (request == null) return
+
+    setInstallingId(item.id)
+    try {
+      await installSkillsCliItem({
+        source: request.source,
+        skill: item.installRef ?? item.name,
+        force: item.installed,
+        ...(request.registry != null ? { registry: request.registry } : {})
+      })
+      await params.mutateSkills()
+      try {
+        await runSearch(limit)
+      } catch {
+        // Keep the install success state even if refreshing the source list fails afterwards.
+      }
+      void params.message.success(params.t('knowledge.skills.installSuccess'))
+    } catch (error) {
+      void params.message.error(getApiErrorMessage(error, params.t('knowledge.skills.installFailed')))
+    } finally {
+      setInstallingId(null)
+    }
+  }, [limit, params, resolveRequest, runSearch])
+
+  const handleClose = React.useCallback(() => {
+    setOpen(false)
+    setSearching(false)
+    setLoadingMore(false)
+    setInstallingId(null)
+    setItems([])
+    setError(null)
+    setHasMore(false)
+    setHasSearched(false)
+    setLimit(SKILLS_CLI_INITIAL_LIMIT)
+    setResetKey('')
+    form.resetFields()
+  }, [form])
+
+  return {
+    form,
+    hasMore,
+    hasSearched,
+    installingId,
+    items,
+    limit,
+    loadingMore,
+    open,
+    resetKey,
+    searching,
+    searchError: error,
+    setOpen,
+    handleClose,
+    handleInstall,
+    handleLoadMore,
+    handleSearch
+  }
+}

package/src/components/knowledge-base/components/@hooks/use-skills-tab-actions.ts

@@ -0,0 +1,63 @@
+import React from 'react'
+
+import type { MessageInstance } from 'antd/es/message/interface'
+import type { TFunction } from 'i18next'
+
+import type { SkillHubItem } from '#~/api.js'
+import { getApiErrorMessage, importSkillArchive, installSkillHubItem } from '#~/api.js'
+
+export const useSkillsTabActions = (params: {
+  marketMutate: () => Promise<unknown>
+  message: MessageInstance
+  mutateConfig: () => Promise<unknown>
+  mutateSkills: () => Promise<unknown>
+  onRefresh: () => void | Promise<void>
+  t: TFunction
+}) => {
+  const importInputRef = React.useRef<HTMLInputElement | null>(null)
+  const [installingId, setInstallingId] = React.useState<string | null>(null)
+  const [importing, setImporting] = React.useState(false)
+
+  const handleRefresh = React.useCallback(async () => {
+    await Promise.all([params.mutateSkills(), params.marketMutate(), params.mutateConfig(), params.onRefresh()])
+  }, [params])
+
+  const handleInstall = React.useCallback(async (item: SkillHubItem) => {
+    setInstallingId(item.id)
+    try {
+      await installSkillHubItem({
+        registry: item.registry,
+        plugin: item.installRef ?? item.name,
+        force: item.installed
+      })
+      await Promise.all([params.marketMutate(), params.mutateSkills()])
+      void params.message.success(params.t('knowledge.skills.installSuccess'))
+    } catch (error) {
+      void params.message.error(getApiErrorMessage(error, params.t('knowledge.skills.installFailed')))
+    } finally {
+      setInstallingId(null)
+    }
+  }, [params])
+
+  const handleImportArchive = React.useCallback(async (file: File) => {
+    setImporting(true)
+    try {
+      const result = await importSkillArchive(file)
+      await Promise.all([params.mutateSkills(), params.onRefresh()])
+      void params.message.success(params.t('knowledge.skills.importSuccess', { count: result.fileCount }))
+    } catch (error) {
+      void params.message.error(getApiErrorMessage(error, params.t('knowledge.skills.importFailed')))
+    } finally {
+      setImporting(false)
+    }
+  }, [params])
+
+  return {
+    importInputRef,
+    importing,
+    installingId,
+    handleImportArchive,
+    handleInstall,
+    handleRefresh
+  }
+}

package/src/components/knowledge-base/components/ActionButton.scss

@@ -1,9 +1,35 @@
-.knowledge-base-view__action-button {
+.ant-btn.knowledge-base-view__action-button {
   display: inline-flex;
   align-items: center;
+  justify-content: center;
   gap: 6px;
-  height: 28px;
-  padding: 0 10px;
-  border-radius: 6px;
+  height: 28px !important;
+  min-height: 28px !important;
+  padding: 0 10px !important;
+  border-radius: 6px !important;
   font-size: 12px;
+  line-height: 1;
+}
+
+.ant-btn.knowledge-base-view__action-button--icon-only {
+  width: 28px !important;
+  min-width: 28px !important;
+  max-width: 28px !important;
+  aspect-ratio: 1 / 1;
+  padding: 0 !important;
+}
+
+.knowledge-base-view__action-button--icon-only .ant-btn-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+
+.knowledge-base-view__action-button--icon-only .material-symbols-rounded {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  line-height: 1;
 }