feat(assistant): Update conversation header (#229)

* feat(assistant): Update conversation header * feat(assistant): Update conversation header * update tooltip * fix IconButton import
cohere-ai · Jun 21, 2024 · d875086 · d875086
1 parent f39e29c
commit d875086
Show file tree

Hide file tree

Showing 14 changed files with 98 additions and 180 deletions.
diff --git a/src/interfaces/coral_web/src/components/Agents/AgentCard.tsx b/src/interfaces/coral_web/src/components/Agents/AgentCard.tsx
@@ -23,12 +23,12 @@ type Props = {
 export const AgentCard: React.FC<Props> = ({ name, id, isBaseAgent, isExpanded }) => {
   const isTouchDevice = getIsTouchDevice();
   const { query } = useRouter();
-  const isActive = isBaseAgent ? !query.id : query.id === id;
+  const isActive = isBaseAgent ? !query.assistantId : query.assistantId === id;
 
   return (
     <Tooltip label={name} placement="right" hover={!isExpanded}>
       <Link
-        href={isBaseAgent ? '/agents' : `/agents?id=${id}`}
+        href={isBaseAgent ? '/agents' : `/agents?assistantId=${id}`}
         className={cn(
           'group flex w-full items-center justify-between gap-x-2 rounded-lg p-2 transition-colors hover:bg-marble-300',
           {
@@ -78,7 +78,7 @@ export const AgentCard: React.FC<Props> = ({ name, id, isBaseAgent, isExpanded }
             items={[
               {
                 label: 'New chat',
-                href: `/agents?id=${id}`,
+                href: `/agents?assistantId=${id}`,
                 iconName: 'new-message',
               },
               {

diff --git a/src/interfaces/coral_web/src/components/Agents/AgentsSidePanel.tsx b/src/interfaces/coral_web/src/components/Agents/AgentsSidePanel.tsx
@@ -1,7 +1,7 @@
 import { Transition } from '@headlessui/react';
 import Link from 'next/link';
 
-import IconButton from '@/components/IconButton';
+import { IconButton } from '@/components/IconButton';
 import { Button, Icon, IconProps, Logo, Tooltip } from '@/components/Shared';
 import { env } from '@/env.mjs';
 import { useSettingsStore } from '@/stores';

diff --git a/src/interfaces/coral_web/src/components/Agents/DiscoverAgentCard.tsx b/src/interfaces/coral_web/src/components/Agents/DiscoverAgentCard.tsx
@@ -18,7 +18,7 @@ export const DiscoverAgentCard: React.FC<Props> = ({ id, name, description, isBa
   return (
     <article className="flex overflow-x-hidden rounded-lg border border-marble-400 bg-marble-200 p-4  hover:bg-marble-300">
       <Link
-        href={isBaseAgent ? '/agents' : `/agents?id=${id}`}
+        href={isBaseAgent ? '/agents' : `/agents?assistantId=${id}`}
         className="flex-grow overflow-x-hidden"
       >
         <div className="flex h-full flex-col items-start gap-y-2">

diff --git a/src/interfaces/coral_web/src/components/Citations/Citation.tsx b/src/interfaces/coral_web/src/components/Citations/Citation.tsx
@@ -5,7 +5,7 @@ import { useMemo, useState } from 'react';
 
 import { Document } from '@/cohere-client';
 import { CitationDocument } from '@/components/Citations/CitationDocument';
-import IconButton from '@/components/IconButton';
+import { IconButton } from '@/components/IconButton';
 import { Text } from '@/components/Shared/Text';
 import { ReservedClasses } from '@/constants';
 import { CitationStyles, useCalculateCitationTranslateY } from '@/hooks/citations';

diff --git a/src/interfaces/coral_web/src/components/Citations/CitationDocumentHeader.tsx b/src/interfaces/coral_web/src/components/Citations/CitationDocumentHeader.tsx
@@ -1,4 +1,4 @@
-import IconButton from '@/components/IconButton';
+import { IconButton } from '@/components/IconButton';
 import { DocumentIcon, Icon, IconName, Text } from '@/components/Shared';
 import { TOOL_FALLBACK_ICON, TOOL_ID_TO_DISPLAY_INFO, TOOL_INTERNET_SEARCH_ID } from '@/constants';
 import { cn, getSafeUrl, getWebDomain } from '@/utils';

diff --git a/src/interfaces/coral_web/src/components/ConfigurationDrawerButton.tsx b/src/interfaces/coral_web/src/components/ConfigurationDrawerButton.tsx
diff --git a/src/interfaces/coral_web/src/components/Conversation/Composer/ComposerToolbar.tsx b/src/interfaces/coral_web/src/components/Conversation/Composer/ComposerToolbar.tsx
@@ -1,7 +1,7 @@
 import React, { useRef } from 'react';
 
 import { EnabledDataSources } from '@/components/Conversation/Composer/EnabledDataSources';
-import IconButton from '@/components/IconButton';
+import { IconButton } from '@/components/IconButton';
 import { IconName } from '@/components/Shared';
 import { ACCEPTED_FILE_TYPES } from '@/constants';
 import { cn } from '@/utils';
@@ -42,5 +42,7 @@ const ToolbarActionButton: React.FC<{
   icon: IconName;
   onClick: React.MouseEventHandler<HTMLButtonElement>;
 }> = ({ tooltipLabel, icon, onClick }) => {
-  return <IconButton iconName={icon} tooltipLabel={tooltipLabel} onClick={onClick} size="sm" />;
+  return (
+    <IconButton iconName={icon} tooltip={{ label: tooltipLabel }} onClick={onClick} size="sm" />
+  );
 };
diff --git a/src/interfaces/coral_web/src/components/Conversation/ConfigurationDrawer.tsx b/src/interfaces/coral_web/src/components/Conversation/ConfigurationDrawer.tsx
@@ -2,10 +2,8 @@ import { Transition } from '@headlessui/react';
 import React from 'react';
 
 import { Configuration } from '@/components/Configuration';
-import { Dot } from '@/components/Dot';
-import IconButton from '@/components/IconButton';
-import { Text } from '@/components/Shared';
-import { useIsGroundingOn } from '@/hooks/grounding';
+import { IconButton } from '@/components/IconButton';
+import { Icon, Text } from '@/components/Shared';
 import { useCitationsStore, useSettingsStore } from '@/stores';
 import { cn } from '@/utils';
 
@@ -21,7 +19,6 @@ export const ConfigurationDrawer: React.FC = () => {
   const {
     citations: { hasCitations },
   } = useCitationsStore();
-  const isGroundingOn = useIsGroundingOn();
 
   return (
     <Transition
@@ -46,13 +43,13 @@ export const ConfigurationDrawer: React.FC = () => {
       <header className="flex h-header items-center gap-2 border-b border-marble-400 p-5">
         <IconButton
           iconName="close-drawer"
-          tooltipLabel="Close drawer"
+          tooltip={{ label: 'Close drawer', size: 'md' }}
           isDefaultOnHover={false}
           onClick={() => setSettings({ isConfigDrawerOpen: false })}
         />
         <span className="flex items-center gap-2">
-          <Dot on={isGroundingOn} />
-          <Text styleAs="p-lg">Tools</Text>
+          <Icon name="settings" className="text-volcanic-700" kind="outline" />
+          <Text styleAs="p-lg">Settings</Text>
         </span>
       </header>
       <Configuration />

diff --git a/src/interfaces/coral_web/src/components/Conversation/Header.tsx b/src/interfaces/coral_web/src/components/Conversation/Header.tsx
@@ -1,16 +1,12 @@
 import { Transition } from '@headlessui/react';
 import { useRouter } from 'next/router';
-import { useMemo } from 'react';
 
-import { ConfigurationDrawerButton } from '@/components/ConfigurationDrawerButton';
-import { Dot } from '@/components/Dot';
-import IconButton from '@/components/IconButton';
+import { IconButton } from '@/components/IconButton';
 import { KebabMenu, KebabMenuItem } from '@/components/KebabMenu';
 import { Text } from '@/components/Shared';
+import { WelcomeGuideTooltip } from '@/components/WelcomeGuideTooltip';
 import { useIsDesktop } from '@/hooks/breakpoint';
-import { useConversationActions } from '@/hooks/conversation';
 import { WelcomeGuideStep, useWelcomeGuideState } from '@/hooks/ftux';
-import { useIsGroundingOn } from '@/hooks/grounding';
 import {
   useCitationsStore,
   useConversationStore,
@@ -19,66 +15,58 @@ import {
 } from '@/stores';
 import { cn } from '@/utils';
 
-const useMenuItems = ({ conversationId }: { conversationId?: string }) => {
-  const { deleteConversation } = useConversationActions();
+const useHeaderMenu = ({ conversationId }: { conversationId?: string }) => {
   const { resetConversation } = useConversationStore();
   const { resetCitations } = useCitationsStore();
+
   const { settings, setSettings } = useSettingsStore();
   const { resetFileParams } = useParamsStore();
   const router = useRouter();
   const { welcomeGuideState, progressWelcomeGuideStep, finishWelcomeGuide } =
     useWelcomeGuideState();
-  const isGroundingOn = useIsGroundingOn();
 
-  const menuItems: KebabMenuItem[] = useMemo(() => {
-    if (!conversationId) {
-      return [];
-    }
+  const handleNewChat = () => {
+    const assistantId = router.query.assistantId;
+
+    const url = assistantId ? `/?assistantId=${assistantId}` : '/';
+    router.push(url, undefined, { shallow: true });
+    resetConversation();
+    resetCitations();
+    resetFileParams();
+  };
 
-    return [
-      {
-        label: 'Tools',
-        icon: <Dot on={isGroundingOn} />,
-        onClick: () => {
-          setSettings({ isConfigDrawerOpen: true });
+  const handleOpenSettings = () => {
+    setSettings({ isConfigDrawerOpen: true });
+
+    if (welcomeGuideState === WelcomeGuideStep.ONE && router.pathname === '/') {
+      progressWelcomeGuideStep();
+    } else if (welcomeGuideState !== WelcomeGuideStep.DONE) {
+      finishWelcomeGuide();
+    }
+  };
 
-          if (welcomeGuideState === WelcomeGuideStep.ONE && router.pathname === '/') {
-            progressWelcomeGuideStep();
-          } else if (welcomeGuideState !== WelcomeGuideStep.DONE) {
-            finishWelcomeGuide();
-          }
-        },
-      },
-      {
-        label: 'Delete chat',
-        iconName: 'trash',
-        onClick: () => {
-          deleteConversation({ id: conversationId });
-        },
-        className: 'text-danger-500',
-      },
-      {
-        label: 'New chat',
-        iconName: 'new-message',
-        onClick: () => {
-          router.push('/', undefined, { shallow: true });
-          resetConversation();
-          resetCitations();
-          resetFileParams();
-        },
-      },
-    ];
-  }, [conversationId, settings, isGroundingOn]);
+  const menuItems: KebabMenuItem[] = [
+    {
+      label: 'Settings',
+      iconName: 'settings',
+      onClick: handleOpenSettings,
+    },
+    {
+      label: 'New chat',
+      iconName: 'new-message',
+      onClick: handleNewChat,
+    },
+  ];
 
-  return menuItems;
+  return { menuItems, handleNewChat, handleOpenSettings };
 };
 
 type Props = {
   isStreaming?: boolean;
   conversationId?: string;
 };
 
-export const Header: React.FC<Props> = ({ conversationId, isStreaming }) => {
+export const Header: React.FC<Props> = ({ isStreaming }) => {
   const {
     conversation: { id, name },
   } = useConversationStore();
@@ -87,17 +75,13 @@ export const Header: React.FC<Props> = ({ conversationId, isStreaming }) => {
     setSettings,
     setIsConvListPanelOpen,
   } = useSettingsStore();
-  const isDesktop = useIsDesktop();
-  const menuItems = useMenuItems({ conversationId: id });
 
-  const { deleteConversation } = useConversationActions();
+  const { welcomeGuideState } = useWelcomeGuideState();
 
-  const handleDelete = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    e.stopPropagation();
-    e.preventDefault();
-    if (!id) return;
-    deleteConversation({ id });
-  };
+  const isDesktop = useIsDesktop();
+  const { menuItems, handleNewChat, handleOpenSettings } = useHeaderMenu({
+    conversationId: id,
+  });
 
   return (
     <div className={cn('flex h-header w-full min-w-0 items-center border-b', 'border-marble-400')}>
@@ -139,20 +123,29 @@ export const Header: React.FC<Props> = ({ conversationId, isStreaming }) => {
           </Text>
         </span>
         <span className="flex items-center gap-x-2 py-4 pl-4 md:pl-0">
-          <KebabMenu
-            className={cn('md:hidden', { hidden: !conversationId })}
-            items={menuItems}
-            anchor="left start"
-          />
+          <KebabMenu className="md:hidden" items={menuItems} anchor="left start" />
           <IconButton
-            iconName="trash"
-            onClick={handleDelete}
+            tooltip={{ label: 'New chat', placement: 'bottom-end', size: 'md' }}
+            className="hidden md:flex"
+            iconName="new-message"
+            onClick={handleNewChat}
             disabled={isStreaming}
-            className={cn('hidden', { 'md:flex': !!conversationId })}
-          />
-          <ConfigurationDrawerButton
-            className={cn({ flex: !conversationId, 'hidden md:flex': !!conversationId })}
           />
+          <div className="relative">
+            <IconButton
+              tooltip={{ label: 'Settings', placement: 'bottom-end', size: 'md' }}
+              className="hidden md:flex"
+              onClick={handleOpenSettings}
+              iconName="settings"
+              disabled={isStreaming}
+            />
+            <WelcomeGuideTooltip
+              step={1}
+              className={cn('right-0 top-full mt-9', {
+                'delay-1000': !welcomeGuideState || welcomeGuideState === WelcomeGuideStep.ONE,
+              })}
+            />
+          </div>
         </span>
       </div>
     </div>

diff --git a/src/interfaces/coral_web/src/components/ConversationList/ConversationListHeader.tsx b/src/interfaces/coral_web/src/components/ConversationList/ConversationListHeader.tsx
@@ -1,4 +1,4 @@
-import IconButton from '@/components/IconButton';
+import { IconButton } from '@/components/IconButton';
 import { Checkbox, Icon, Text } from '@/components/Shared';
 import {
   useCitationsStore,

diff --git a/src/interfaces/coral_web/src/components/Dot.tsx b/src/interfaces/coral_web/src/components/Dot.tsx