More cleanup

Author: wujessica

src/interfaces/coral_web/src/components/Agents/Layout.tsx

@@ -3,7 +3,7 @@ import React, { Children, PropsWithChildren } from 'react';
 
 import { AgentsSidePanel } from '@/components/Agents/AgentsSidePanel';
 import { MobileHeader } from '@/components/Agents/MobileHeader';
-import { ConfigurationDrawer } from '@/components/Conversation/ConfigurationDrawer';
+import { SettingsDrawer } from '@/components/Settings/SettingsDrawer';
 import { PageHead } from '@/components/Shared/PageHead';
 import { cn } from '@/utils/cn';
 
@@ -57,7 +57,7 @@ export const Layout: React.FC<Props> = ({ title = 'Chat', children }) => {
           >
             {mainElement}
           </section>
-          <ConfigurationDrawer />
+          <SettingsDrawer />
         </div>
       </div>
     </>

src/interfaces/coral_web/src/components/Settings/FilesTab.tsx

@@ -26,7 +26,7 @@ export const FilesTab: React.FC<{ className?: string }> = ({ className = '' }) =
   } = useFilesStore();
   const { isFileInputQueuedToFocus, focusFileInput } = useFocusFileInput();
   const { files } = useFilesInConversation();
-  const { enableDefaultFileLoaderTool } = useDefaultFileLoaderTool();
+  const { enableDefaultFileLoaderTool, disableDefaultFileLoaderTool } = useDefaultFileLoaderTool();
 
   useEffect(() => {
     if (isFileInputQueuedToFocus) {
@@ -77,7 +77,12 @@ export const FilesTab: React.FC<{ className?: string }> = ({ className = '' }) =
       newFileIds = [...(fileIds ?? []), fileId];
     }
 
-    enableDefaultFileLoaderTool();
+    if (newFileIds.length === 0) {
+      disableDefaultFileLoaderTool();
+    } else {
+      enableDefaultFileLoaderTool();
+    }
+
     setParams({ fileIds: newFileIds });
   };
 

src/interfaces/coral_web/src/components/Settings/SettingsDrawer.tsx

@@ -1,5 +1,5 @@
 import { Transition } from '@headlessui/react';
-import React, { createElement, useMemo, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 
 import { IconButton } from '@/components/IconButton';
 import { FilesTab } from '@/components/Settings/FilesTab';
@@ -14,12 +14,6 @@ import { cn } from '@/utils';
 // TODO(@wujessica): grab these from the agents api
 const REQUIRED_TOOLS: string[] = [];
 
-type Tab = {
-  name: string;
-  component: React.FC;
-  props?: Record<string, unknown>;
-};
-
 /**
  * @description Renders the settings drawer of the main content.
  * It opens up on top of the citation panel/the main content.
@@ -38,18 +32,18 @@ export const SettingsDrawer: React.FC = () => {
   } = useCitationsStore();
   const { files } = useFilesInConversation();
 
-  const tabs = useMemo<Tab[]>(() => {
+  const tabs = useMemo(() => {
     return files.length > 0 && conversationId
       ? [
-          { name: 'Tools', component: ToolsTab, props: { requiredTools: REQUIRED_TOOLS } },
-          { name: 'Files', component: FilesTab },
-          { name: 'Settings', component: SettingsTab },
+          { name: 'Tools', component: <ToolsTab requiredTools={REQUIRED_TOOLS} /> },
+          { name: 'Files', component: <FilesTab /> },
+          { name: 'Settings', component: <SettingsTab /> },
         ]
       : [
-          { name: 'Tools', component: ToolsTab, props: { requiredTools: REQUIRED_TOOLS } },
-          { name: 'Settings', component: SettingsTab },
+          { name: 'Tools', component: <ToolsTab requiredTools={REQUIRED_TOOLS} /> },
+          { name: 'Settings', component: <SettingsTab /> },
         ];
-  }, [files.length]);
+  }, [files.length, conversationId]);
 
   return (
     <Transition
@@ -94,7 +88,7 @@ export const SettingsDrawer: React.FC = () => {
           panelsClassName="pt-7 lg:pt-7 px-0 flex flex-col rounded-b-lg bg-marble-100 md:rounded-b-none"
           fitTabsContent={true}
         >
-          {tabs.map((t) => createElement(t.component, { key: t.name, ...t.props }))}
+          {tabs.map((t) => t.component)}
         </Tabs>
       </section>
     </Transition>

src/interfaces/coral_web/src/hooks/files.ts

@@ -190,16 +190,31 @@ export const useDefaultFileLoaderTool = () => {
 
   const enableDefaultFileLoaderTool = () => {
     if (!defaultFileLoaderTool) return;
-    const visibleFileToolNames = tools?.filter(isDefaultFileLoaderTool).map((t) => t.name) ?? [];
 
+    const visibleFileToolNames = tools?.filter(isDefaultFileLoaderTool).map((t) => t.name) ?? [];
     const isDefaultFileLoaderToolEnabled = visibleFileToolNames.some((name) =>
       params.tools?.some((tool) => tool.name === name)
     );
+
     if (isDefaultFileLoaderToolEnabled) return;
 
     const newTools = uniqBy([...(params.tools ?? []), defaultFileLoaderTool], 'name');
     setParams({ tools: newTools });
   };
 
-  return { defaultFileLoaderTool, enableDefaultFileLoaderTool };
+  const disableDefaultFileLoaderTool = () => {
+    if (!defaultFileLoaderTool) return;
+
+    const visibleFileToolNames = tools?.filter(isDefaultFileLoaderTool).map((t) => t.name) ?? [];
+    const isDefaultFileLoaderToolEnabled = visibleFileToolNames.some((name) =>
+      params.tools?.some((tool) => tool.name === name)
+    );
+
+    if (!isDefaultFileLoaderToolEnabled) return;
+
+    const newTools = (params.tools ?? []).filter((t) => t.name !== defaultFileLoaderTool.name);
+    setParams({ tools: newTools });
+  };
+
+  return { defaultFileLoaderTool, enableDefaultFileLoaderTool, disableDefaultFileLoaderTool };
 };