fix(kb): fix kb navigation URLs

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/document-loading.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { Plus, Search } from 'lucide-react'
+import { useParams } from 'next/navigation'
 import { Button } from '@/components/ui/button'
 import { useSidebarStore } from '@/stores/sidebar/store'
 import { KnowledgeHeader } from '../../../components/knowledge-header/knowledge-header'
@@ -18,19 +19,21 @@ export function DocumentLoading({
   documentName,
 }: DocumentLoadingProps) {
   const { mode, isExpanded } = useSidebarStore()
+  const params = useParams()
+  const workspaceId = params?.workspaceId as string
   const isSidebarCollapsed =
     mode === 'expanded' ? !isExpanded : mode === 'collapsed' || mode === 'hover'
 
   const breadcrumbs = [
     {
       id: 'knowledge-root',
       label: 'Knowledge',
-      href: '/knowledge',
+      href: `/workspace/${workspaceId}/knowledge`,
     },
     {
       id: `knowledge-base-${knowledgeBaseId}`,
       label: knowledgeBaseName,
-      href: `/knowledge/${knowledgeBaseId}`,
+      href: `/workspace/${workspaceId}/knowledge/${knowledgeBaseId}`,
     },
     {
       id: `document-${knowledgeBaseId}-${documentName}`,

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx

@@ -12,6 +12,7 @@ import {
   Trash2,
   X,
 } from 'lucide-react'
+import { useParams } from 'next/navigation'
 import { Button } from '@/components/ui/button'
 import { Checkbox } from '@/components/ui/checkbox'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
@@ -54,6 +55,7 @@ export function Document({
 }: DocumentProps) {
   const { mode, isExpanded } = useSidebarStore()
   const { getCachedKnowledgeBase, getCachedDocuments } = useKnowledgeStore()
+  const { workspaceId } = useParams()
 
   const isSidebarCollapsed =
     mode === 'expanded' ? !isExpanded : mode === 'collapsed' || mode === 'hover'
@@ -170,10 +172,10 @@ export function Document({
   const effectiveDocumentName = document?.filename || documentName || 'Document'
 
   const breadcrumbs = [
-    { label: 'Knowledge', href: '/knowledge' },
+    { label: 'Knowledge', href: `/workspace/${workspaceId}/knowledge` },
     {
       label: effectiveKnowledgeBaseName,
-      href: `/knowledge/${knowledgeBaseId}`,
+      href: `/workspace/${workspaceId}/knowledge/${knowledgeBaseId}`,
     },
     { label: effectiveDocumentName },
   ]
@@ -360,10 +362,10 @@ export function Document({
 
   if (combinedError && !isLoadingChunks) {
     const errorBreadcrumbs = [
-      { label: 'Knowledge', href: '/knowledge' },
+      { label: 'Knowledge', href: `/workspace/${workspaceId}/knowledge` },
       {
         label: effectiveKnowledgeBaseName,
-        href: `/knowledge/${knowledgeBaseId}`,
+        href: `/workspace/${workspaceId}/knowledge/${knowledgeBaseId}`,
       },
       { label: 'Error' },
     ]

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx

@@ -743,7 +743,7 @@ export function KnowledgeBase({
     {
       id: 'knowledge-root',
       label: 'Knowledge',
-      href: '/knowledge',
+      href: `/workspace/${workspaceId}/knowledge`,
     },
     {
       id: `knowledge-base-${id}`,
@@ -762,7 +762,7 @@ export function KnowledgeBase({
       {
         id: 'knowledge-root',
         label: 'Knowledge',
-        href: '/knowledge',
+        href: `/workspace/${workspaceId}/knowledge`,
       },
       {
         id: 'error',

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/knowledge-base-loading/knowledge-base-loading.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { Search } from 'lucide-react'
+import { useParams } from 'next/navigation'
 import { Button } from '@/components/ui/button'
 import { useSidebarStore } from '@/stores/sidebar/store'
 import { KnowledgeHeader } from '../../../components/knowledge-header/knowledge-header'
@@ -12,14 +13,16 @@ interface KnowledgeBaseLoadingProps {
 
 export function KnowledgeBaseLoading({ knowledgeBaseName }: KnowledgeBaseLoadingProps) {
   const { mode, isExpanded } = useSidebarStore()
+  const params = useParams()
+  const workspaceId = params?.workspaceId as string
   const isSidebarCollapsed =
     mode === 'expanded' ? !isExpanded : mode === 'collapsed' || mode === 'hover'
 
   const breadcrumbs = [
     {
       id: 'knowledge-root',
       label: 'Knowledge',
-      href: '/knowledge',
+      href: `/workspace/${workspaceId}/knowledge`,
     },
     {
       id: 'knowledge-base-loading',

apps/sim/app/workspace/[workspaceId]/knowledge/components/base-overview/base-overview.tsx

@@ -3,6 +3,7 @@
 import { useState } from 'react'
 import { Check, Copy, LibraryBig } from 'lucide-react'
 import Link from 'next/link'
+import { useParams } from 'next/navigation'
 
 interface BaseOverviewProps {
   id?: string
@@ -13,12 +14,14 @@ interface BaseOverviewProps {
 
 export function BaseOverview({ id, title, docCount, description }: BaseOverviewProps) {
   const [isCopied, setIsCopied] = useState(false)
+  const params = useParams()
+  const workspaceId = params?.workspaceId as string
 
   // Create URL with knowledge base name as query parameter
-  const params = new URLSearchParams({
+  const searchParams = new URLSearchParams({
     kbName: title,
   })
-  const href = `/knowledge/${id || title.toLowerCase().replace(/\s+/g, '-')}?${params.toString()}`
+  const href = `/workspace/${workspaceId}/knowledge/${id || title.toLowerCase().replace(/\s+/g, '-')}?${searchParams.toString()}`
 
   const handleCopy = async (e: React.MouseEvent) => {
     e.preventDefault()