Merge branch 'wip/rv-search' into feat/org-home-redesign

Author: waleedlatif1

apps/sim/app/o/[organizationId]/components/search-landing-history.tsx

@@ -1,11 +1,11 @@
 'use client'
 
-import { type ReactNode, useState } from 'react'
-import { Chip, cn, toast } from '@sim/emcn'
+import type { ReactNode } from 'react'
+import { Chip, cn } from '@sim/emcn'
 import { Clock } from '@sim/emcn/icons'
 import { inter } from '@/app/_styles/fonts/inter/inter'
+import { useSearchLandingHistory } from '@/app/o/[organizationId]/components/use-search-landing-history'
 import { SourceCard } from '@/app/workspace/[workspaceId]/home/components/message-content/components/source-card'
-import { useClearSearchHistory, useSearchHistory } from '@/hooks/queries/search-history'
 
 interface SearchLandingHistoryProps {
   organizationId: string
@@ -21,13 +21,8 @@ export function SearchLandingHistory({
   onSearch,
   children,
 }: SearchLandingHistoryProps) {
-  const history = useSearchHistory(organizationId)
-  const clear = useClearSearchHistory(organizationId, userId)
-  const [selection, setSelection] = useState<'sources' | 'queries' | null>(null)
-  const data = history.isError ? undefined : history.data
-  const sources = data?.sources.slice(0, 5) ?? []
-  const queries = data?.queries.slice(0, 5) ?? []
-  const selected = selection ?? (sources.length > 0 ? 'sources' : 'queries')
+  const { failed, retrying, retry, sources, queries, selected, setSelection, clear, isClearing } =
+    useSearchLandingHistory(organizationId, userId)
   return (
     <div className={cn('relative w-full min-w-0', inter.className)}>
       {children}
@@ -51,12 +46,7 @@ export function SearchLandingHistory({
                   Recent searches
                 </Chip>
               </div>
-              <Chip
-                disabled={clear.isPending}
-                onClick={() =>
-                  clear.mutate(undefined, { onError: (error) => toast.error(error.message) })
-                }
-              >
+              <Chip disabled={isClearing} onClick={clear}>
                 Clear history
               </Chip>
             </div>
@@ -102,10 +92,10 @@ export function SearchLandingHistory({
             </div>
           </section>
         )}
-        {history.isError && (
+        {failed && (
           <div className='mt-6 flex items-center gap-2 px-4 text-[var(--text-tertiary)] text-small'>
             Recent activity couldn’t load.
-            <Chip onClick={() => void history.refetch()} disabled={history.isFetching}>
+            <Chip onClick={retry} disabled={retrying}>
               Try again
             </Chip>
           </div>

apps/sim/app/o/[organizationId]/components/use-search-landing-history.ts

@@ -0,0 +1,26 @@
+import { useState } from 'react'
+import { toast } from '@sim/emcn'
+import { useClearSearchHistory, useSearchHistory } from '@/hooks/queries/search-history'
+
+const HISTORY_RECENT_LIMIT = 5
+
+/** The viewer's private recent activity under the Search field, and which list is showing. */
+export function useSearchLandingHistory(organizationId: string, userId: string) {
+  const history = useSearchHistory(organizationId)
+  const clearHistory = useClearSearchHistory(organizationId, userId)
+  const [selection, setSelection] = useState<'sources' | 'queries' | null>(null)
+  const data = history.isError ? undefined : history.data
+  const sources = data?.sources.slice(0, HISTORY_RECENT_LIMIT) ?? []
+  const queries = data?.queries.slice(0, HISTORY_RECENT_LIMIT) ?? []
+  return {
+    failed: history.isError,
+    retrying: history.isFetching,
+    retry: () => void history.refetch(),
+    sources,
+    queries,
+    selected: selection ?? (sources.length > 0 ? 'sources' : 'queries'),
+    setSelection,
+    isClearing: clearHistory.isPending,
+    clear: () => clearHistory.mutate(undefined, { onError: (error) => toast.error(error.message) }),
+  }
+}

apps/sim/app/o/[organizationId]/home/page.test.tsx

@@ -16,8 +16,8 @@ vi.mock('@/lib/mothership/chat/lifecycle', () => mothershipChatLifecycleMock)
 vi.mock('@/app/o/[organizationId]/integrations/integrations', () => ({
   OrganizationIntegrations: () => <div>Integrations</div>,
 }))
-vi.mock('@/app/o/[organizationId]/search/search', () => ({
-  OrganizationSearch: () => <div>Standalone Search</div>,
+vi.mock('@/platform/app/(shell)/search/_components/search-surface/search-surface', () => ({
+  OrganizationSearchSurface: () => <div>Standalone Search</div>,
 }))
 vi.mock('@/app/o/[organizationId]/components/organization-conversation', () => ({
   OrganizationConversation: ({ requestMode }: { requestMode?: string }) => (

apps/sim/app/o/[organizationId]/links/sim-link-shortcut.tsx

@@ -40,8 +40,8 @@ function useNestedSimLinkCreator(url: string, title: string): SimLinkCreator {
 }
 
 /** The first link that already opens `url`, and a copy of its address. */
-function useExistingSimLink(organizationId: string, url: string) {
-  const { data, isPending, isError } = useSimLinksForUrl(organizationId, url)
+export function useExistingSimLink(organizationId: string, url: string, enabled = true) {
+  const { data, isPending, isError } = useSimLinksForUrl(organizationId, url, enabled)
   const { copied, copy } = useCopyToClipboard({ resetMs: 1500 })
   const existing = data?.at(0)
   const copyExisting = async () => {

apps/sim/app/o/[organizationId]/search/chat/[chatId]/page.tsx

@@ -5,8 +5,8 @@ import { getSession } from '@/lib/auth'
 import { getAccessibleCopilotChatAuth } from '@/lib/mothership/chat/lifecycle'
 import { organizationRoutes, WORKSPACE_SETTINGS_PATH } from '@/lib/navigation/paths'
 import { getOrganizationSurfaceContext } from '@/lib/organizations/surface'
-import { OrganizationSearch } from '@/app/o/[organizationId]/search/search'
 import { HomeFallback } from '@/app/workspace/[workspaceId]/home/home-fallback'
+import { OrganizationSearchSurface } from '@/platform/app/(shell)/search/_components/search-surface/search-surface'
 
 export const metadata: Metadata = { title: 'Assistant Search' }
 
@@ -29,7 +29,7 @@ export default async function OrganizationSearchChatPage({
   if (chat.mode !== 'assistant') redirect(organizationRoutes(organizationId).chat(chatId))
   return (
     <Suspense fallback={<HomeFallback />}>
-      <OrganizationSearch userId={session.user.id} chatId={chatId} />
+      <OrganizationSearchSurface userId={session.user.id} chatId={chatId} />
     </Suspense>
   )
 }

apps/sim/app/o/[organizationId]/search/page.tsx

@@ -4,8 +4,8 @@ import { notFound, redirect } from 'next/navigation'
 import { getSession } from '@/lib/auth'
 import { WORKSPACE_SETTINGS_PATH } from '@/lib/navigation/paths'
 import { getOrganizationSurfaceContext } from '@/lib/organizations/surface'
-import { OrganizationSearch } from '@/app/o/[organizationId]/search/search'
 import { HomeFallback } from '@/app/workspace/[workspaceId]/home/home-fallback'
+import { OrganizationSearchSurface } from '@/platform/app/(shell)/search/_components/search-surface/search-surface'
 
 export const metadata: Metadata = { title: 'Search' }
 
@@ -22,7 +22,7 @@ export default async function OrganizationSearchPage({
   if (!context.searchAccess.memberScoped) redirect(WORKSPACE_SETTINGS_PATH)
   return (
     <Suspense fallback={<HomeFallback />}>
-      <OrganizationSearch userId={session.user.id} />
+      <OrganizationSearchSurface userId={session.user.id} />
     </Suspense>
   )
 }

apps/sim/app/o/[organizationId]/search/search-frame.tsx

@@ -0,0 +1,65 @@
+'use client'
+
+import { lazy, type ReactNode, Suspense } from 'react'
+import { cn } from '@sim/emcn'
+import type { OrganizationSearchState } from '@/app/o/[organizationId]/search/use-organization-search'
+import { RESOURCE_HEADER_CLASSES } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tab-controls'
+import { HomeFallback } from '@/app/workspace/[workspaceId]/home/home-fallback'
+
+const OrganizationConversation = lazy(() =>
+  import('@/app/o/[organizationId]/components/organization-conversation').then((module) => ({
+    default: module.OrganizationConversation,
+  }))
+)
+
+interface SearchFrameProps {
+  search: OrganizationSearchState
+  /** The view switch and New control, shown over both views. */
+  header: ReactNode
+  /** The Search view. It renders beside the conversation, never around it. */
+  children: ReactNode
+}
+
+/**
+ * Hosts the two views of Search. Assistant stays mounted and `inert` while Search shows, so a running
+ * answer keeps streaming and its draft survives a switch.
+ */
+export function SearchFrame({ search, header, children }: SearchFrameProps) {
+  const { activeMode } = search
+  return (
+    <div className='h-full min-h-0 min-w-0 bg-[var(--bg)] pt-[var(--workspace-content-title-bar-inset)]'>
+      <div className='flex h-full min-h-0 min-w-0 flex-col [--workspace-content-title-bar-inset:0px]'>
+        {search.assistantMounted && (
+          <div
+            inert={activeMode !== 'assistant'}
+            className={cn(
+              'min-h-0 min-w-0 flex-1 flex-col',
+              activeMode === 'assistant' ? 'flex' : 'hidden'
+            )}
+          >
+            <Suspense fallback={<HomeFallback header={header} />}>
+              <OrganizationConversation
+                key={search.conversationInstance}
+                requestMode='assistant'
+                chatId={search.chatId}
+                header={header}
+                active={activeMode === 'assistant'}
+                summaryRequest={search.pendingSummary}
+                onSummaryConsumed={search.consumeSummary}
+              />
+            </Suspense>
+          </div>
+        )}
+        {!activeMode && <HomeFallback />}
+        {activeMode === 'search' && (
+          <>
+            <div className={cn(RESOURCE_HEADER_CLASSES.layout, RESOURCE_HEADER_CLASSES.content)}>
+              {header}
+            </div>
+            <div className='flex min-h-0 min-w-0 flex-1 flex-col'>{children}</div>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}

apps/sim/app/o/[organizationId]/search/search-results-view.tsx

@@ -7,7 +7,6 @@ import {
   useScrollEdges,
 } from '@sim/emcn'
 import type { WorkspaceSearchFilters } from '@/lib/api/contracts/knowledge'
-import type { SearchResource } from '@/lib/mothership/generated/resources'
 import { OrganizationLanding } from '@/app/o/[organizationId]/components/organization-landing'
 import { PAGE_COLUMN_CLASS } from '@/app/o/[organizationId]/components/organization-page'
 import { useOrganizationContext } from '@/app/o/[organizationId]/providers/organization-provider'
@@ -21,16 +20,10 @@ interface SearchResultsViewProps {
   composer: ReactNode
   query: string
   onSummarize?: (message: string, filters: WorkspaceSearchFilters) => void
-  onSearchChange?: (search: SearchResource) => void
 }
 
 /** Standalone Search uses the original centered field and docked results layout. */
-export function SearchResultsView({
-  composer,
-  query,
-  onSummarize,
-  onSearchChange,
-}: SearchResultsViewProps) {
+export function SearchResultsView({ composer, query, onSummarize }: SearchResultsViewProps) {
   const { organization } = useOrganizationContext()
   const scope = { kind: 'organization' as const, organizationId: organization.id }
   const scrollContainerRef = useRef<HTMLDivElement>(null)
@@ -61,12 +54,7 @@ export function SearchResultsView({
             {/* The rows carry their own `px-2`; this gutter brings each row's mark under the
                 field's own search glyph, so results read as a column hanging from the field. */}
             <div ref={scrollContentRef} className={cn(PAGE_COLUMN_CLASS, 'px-8')}>
-              <KnowledgeSearchResults
-                scope={scope}
-                query={query}
-                onSummarize={onSummarize}
-                onSearchChange={onSearchChange}
-              />
+              <KnowledgeSearchResults scope={scope} query={query} onSummarize={onSummarize} />
             </div>
           </div>
         </>