fix(toolkit): address UI bugs from 22/08/2024 (#732)

fix(toolkit): bugs 22082024

Author: knajjars

src/interfaces/assistants_web/src/app/(main)/(chat)/Chat.tsx

@@ -5,7 +5,7 @@ import { useEffect } from 'react';
 import { Document, ManagedTool } from '@/cohere-client';
 import { Conversation, ConversationError } from '@/components/Conversation';
 import { TOOL_PYTHON_INTERPRETER_ID } from '@/constants';
-import { useAgent, useConversation, useListTools } from '@/hooks';
+import { useAgent, useAvailableTools, useConversation, useListTools } from '@/hooks';
 import { useCitationsStore, useConversationStore, useParamsStore } from '@/stores';
 import { OutputFiles } from '@/stores/slices/citationsSlice';
 import {
@@ -24,6 +24,7 @@ const Chat: React.FC<{ agentId?: string; conversationId?: string }> = ({
   const { setConversation } = useConversationStore();
   const { addCitation, saveOutputFiles } = useCitationsStore();
   const { setParams, resetFileParams } = useParamsStore();
+  const { availableTools } = useAvailableTools({ agent, managedTools: tools });
 
   const {
     data: conversation,
@@ -39,9 +40,11 @@ const Chat: React.FC<{ agentId?: string; conversationId?: string }> = ({
 
     const agentTools =
       agent?.tools &&
-      ((agent.tools
+      (agent.tools
         .map((name) => (tools ?? [])?.find((t) => t.name === name))
-        .filter((t) => t !== undefined) ?? []) as ManagedTool[]);
+        .filter(
+          (t) => t !== undefined && availableTools.some((at) => at.name === t?.name)
+        ) as ManagedTool[]);
 
     const fileIds = conversation?.files.map((file) => file.id);
 
@@ -53,7 +56,16 @@ const Chat: React.FC<{ agentId?: string; conversationId?: string }> = ({
     if (conversationId) {
       setConversation({ id: conversationId });
     }
-  }, [agent, tools, conversation]);
+  }, [
+    agent,
+    tools,
+    conversation,
+    availableTools,
+    setParams,
+    resetFileParams,
+    setConversation,
+    conversationId,
+  ]);
 
   useEffect(() => {
     if (!conversation) return;

src/interfaces/assistants_web/src/app/(main)/edit/[agentId]/page.tsx

@@ -1,8 +1,9 @@
 import { NextPage } from 'next';
 
-import { UpdateAgent } from './UpdateAgent';
 import { getCohereServerClient } from '@/server/cohereServerClient';
 
+import { UpdateAgent } from './UpdateAgent';
+
 type Props = {
   params: {
     agentId: string;

src/interfaces/assistants_web/src/components/Composer/DataSourceMenu.tsx

@@ -27,7 +27,6 @@ export const DataSourceMenu: React.FC<Props> = ({ agent, tools }) => {
   });
 
   const { text, contrastText, border, bg } = useBrandedColors(agent?.id);
-
   const isBaseAgent = checkIsBaseAgent(agent);
   return (
     <Popover className="relative">

src/interfaces/assistants_web/src/components/MessageRow/Citation.tsx

@@ -32,7 +32,7 @@ export const Citation: React.FC<Props> = ({ generationId, citationKey, agentId }
   const safeUrl = getSafeUrl(document.url);
   const { text, lightText, fill, lightFill, dark, light } = useBrandedColors(agentId);
 
-  const brandedClassName = cn(text, lightText, dark(lightFill), light(fill));
+  const brandedClassName = cn(dark(lightText), light(text), dark(lightFill), light(fill));
 
   return (
     <div className="space-y-4">

src/interfaces/assistants_web/src/components/UI/Button.tsx

@@ -33,7 +33,8 @@ const getLabelStyles = (kind: ButtonKind, theme: ButtonTheme, disabled: boolean)
           theme === 'blue' ||
           theme === 'quartz' ||
           theme === 'evolved-blue' ||
-          theme === 'evolved-quartz',
+          theme === 'evolved-quartz' ||
+          theme === 'mushroom',
         // dark mode
         'dark:text-volcanic-150 dark:fill-volcanic-150':
           theme === 'evolved-green' ||

src/interfaces/assistants_web/src/hooks/use-brandedColors.ts

@@ -15,21 +15,21 @@ const ASSISTANT_COLORS = [
   'quartz-500',
   'evolved-quartz-700',
   'evolved-mushroom-500',
-  'mushroom-300',
+  'mushroom-500',
 ];
 const ASSISTANT_LIGHT_COLORS = [
   'green-800',
   'quartz-800',
   'evolved-quartz-900',
   'evolved-mushroom-800',
-  'mushroom-600',
+  'mushroom-700',
 ];
 const ASSISTANT_CONTRAST_COLORS = [
   'marble-950',
   'marble-950',
   'marble-950',
   'volcanic-100',
-  'mushroom-800',
+  'mushroom-900',
 ];
 const DEFAULT_COLOR = 'evolved-blue-500';
 const DEFAULT_LIGHT_COLOR = 'blue-800';