From 6387a145fc83562331ded27ed35b369bbcc298f1 Mon Sep 17 00:00:00 2001 From: Khalil Najjar Date: Tue, 18 Jun 2024 15:27:15 +0200 Subject: [PATCH 1/4] feat(assistant): Update conversation header --- .../src/components/Agents/AgentCard.tsx | 6 +- .../src/components/Agents/AgentsSidePanel.tsx | 2 +- .../components/Agents/DiscoverAgentCard.tsx | 2 +- .../src/components/Citations/Citation.tsx | 2 +- .../Citations/CitationDocumentHeader.tsx | 2 +- .../components/ConfigurationDrawerButton.tsx | 54 ------- .../components/Conversation/ComposerMenu.tsx | 2 +- .../Conversation/ConfigurationDrawer.tsx | 11 +- .../src/components/Conversation/Header.tsx | 140 +++++++++--------- .../ConversationListHeader.tsx | 2 +- .../coral_web/src/components/Dot.tsx | 30 ---- .../coral_web/src/components/IconButton.tsx | 2 +- .../coral_web/src/components/MessageRow.tsx | 2 +- 13 files changed, 83 insertions(+), 174 deletions(-) delete mode 100644 src/interfaces/coral_web/src/components/ConfigurationDrawerButton.tsx delete mode 100644 src/interfaces/coral_web/src/components/Dot.tsx diff --git a/src/interfaces/coral_web/src/components/Agents/AgentCard.tsx b/src/interfaces/coral_web/src/components/Agents/AgentCard.tsx index 7c3f04649f..ea0b1858ee 100644 --- 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 = ({ name, id, isBaseAgent, isExpanded }) => { const isTouchDevice = getIsTouchDevice(); const { query } = useRouter(); - const isActive = isBaseAgent ? !query.id : query.id === id; + const isActive = isBaseAgent ? !query.agentId : query.agentId === id; return ( = ({ name, id, isBaseAgent, isExpanded } items={[ { label: 'New chat', - href: `/agents?id=${id}`, + href: `/agents?agentId=${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 index bc252f5018..7a9c6ceeb3 100644 --- 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 index 77814f50cc..90739e0514 100644 --- 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 = ({ id, name, description, isBa return (
diff --git a/src/interfaces/coral_web/src/components/Citations/Citation.tsx b/src/interfaces/coral_web/src/components/Citations/Citation.tsx index e68bebd27c..6760b19be5 100644 --- 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 index 4db5f3cf8f..9f85c4df30 100644 --- 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 deleted file mode 100644 index ae932c4c57..0000000000 --- a/src/interfaces/coral_web/src/components/ConfigurationDrawerButton.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import { useRouter } from 'next/router'; -import React from 'react'; - -import { Dot } from '@/components/Dot'; -import { BasicButton, Text } from '@/components/Shared'; -import { WelcomeGuideTooltip } from '@/components/WelcomeGuideTooltip'; -import { WelcomeGuideStep, useWelcomeGuideState } from '@/hooks/ftux'; -import { useIsGroundingOn } from '@/hooks/grounding'; -import { useSettingsStore } from '@/stores'; -import { cn } from '@/utils'; - -type Props = { - className?: string; -}; - -/** - * @description renders the button that opens the configuration drawer. - */ -export const ConfigurationDrawerButton: React.FC = ({ className = '' }) => { - const router = useRouter(); - const { welcomeGuideState, progressWelcomeGuideStep, finishWelcomeGuide } = - useWelcomeGuideState(); - const { setSettings } = useSettingsStore(); - const isGroundingOn = useIsGroundingOn(); - - const handleGroundingClick = () => { - setSettings({ isConfigDrawerOpen: true }); - - if (welcomeGuideState === WelcomeGuideStep.ONE && router.pathname === '/') { - progressWelcomeGuideStep(); - } else if (welcomeGuideState !== WelcomeGuideStep.DONE) { - finishWelcomeGuide(); - } - }; - - return ( -
- Tools} - kind="tertiary" - size="sm" - dataTestId="button-grounding-drawer" - startIcon={} - onClick={handleGroundingClick} - /> - -
- ); -}; diff --git a/src/interfaces/coral_web/src/components/Conversation/ComposerMenu.tsx b/src/interfaces/coral_web/src/components/Conversation/ComposerMenu.tsx index a7d7d7385a..0d64f322a9 100644 --- a/src/interfaces/coral_web/src/components/Conversation/ComposerMenu.tsx +++ b/src/interfaces/coral_web/src/components/Conversation/ComposerMenu.tsx @@ -1,6 +1,6 @@ import React, { useRef } from 'react'; -import IconButton from '@/components/IconButton'; +import { IconButton } from '@/components/IconButton'; import { ACCEPTED_FILE_TYPES } from '@/constants'; type Props = { diff --git a/src/interfaces/coral_web/src/components/Conversation/ConfigurationDrawer.tsx b/src/interfaces/coral_web/src/components/Conversation/ConfigurationDrawer.tsx index 834cfae41f..e0ffac84c2 100644 --- 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 ( <> @@ -51,8 +48,8 @@ export const ConfigurationDrawer: React.FC = () => { onClick={() => setSettings({ isConfigDrawerOpen: false })} /> - - Tools + + Settings diff --git a/src/interfaces/coral_web/src/components/Conversation/Header.tsx b/src/interfaces/coral_web/src/components/Conversation/Header.tsx index 6738e431df..7f1222f736 100644 --- a/src/interfaces/coral_web/src/components/Conversation/Header.tsx +++ b/src/interfaces/coral_web/src/components/Conversation/Header.tsx @@ -1,69 +1,57 @@ 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 { Text, Tooltip } 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, useSettingsStore } 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 { setSettings } = useSettingsStore(); + const router = useRouter(); const { welcomeGuideState, progressWelcomeGuideStep, finishWelcomeGuide } = useWelcomeGuideState(); - const isGroundingOn = useIsGroundingOn(); - const menuItems: KebabMenuItem[] = useMemo(() => { - if (!conversationId) { - return []; - } + const handleNewChat = () => { + const assistantId = router.query.agentId; + + const url = assistantId ? `/?agentId=${assistantId}` : '/'; + router.push(url, undefined, { shallow: true }); + resetConversation(); + resetCitations(); + }; - return [ - { - label: 'Tools', - icon: , - 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(); - }, - }, - ]; - }, [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 = { @@ -71,7 +59,7 @@ type Props = { conversationId?: string; }; -export const Header: React.FC = ({ conversationId, isStreaming }) => { +export const Header: React.FC = ({ isStreaming }) => { const { conversation: { id, name }, } = useConversationStore(); @@ -80,17 +68,13 @@ export const Header: React.FC = ({ conversationId, isStreaming }) => { setSettings, setIsConvListPanelOpen, } = useSettingsStore(); - const isDesktop = useIsDesktop(); - const menuItems = useMenuItems({ conversationId: id }); - const { deleteConversation } = useConversationActions(); + const { welcomeGuideState } = useWelcomeGuideState(); - const handleDelete = (e: React.MouseEvent) => { - e.stopPropagation(); - e.preventDefault(); - if (!id) return; - deleteConversation({ id }); - }; + const isDesktop = useIsDesktop(); + const { menuItems, handleNewChat, handleOpenSettings } = useHeaderMenu({ + conversationId: id, + }); return (
@@ -132,20 +116,32 @@ export const Header: React.FC = ({ conversationId, isStreaming }) => { - - - + + + + +
+ + + + +
diff --git a/src/interfaces/coral_web/src/components/ConversationList/ConversationListHeader.tsx b/src/interfaces/coral_web/src/components/ConversationList/ConversationListHeader.tsx index 67ca22bb9c..d8542c0999 100644 --- 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, useConversationStore, useSettingsStore } from '@/stores'; import { cn } from '@/utils'; diff --git a/src/interfaces/coral_web/src/components/Dot.tsx b/src/interfaces/coral_web/src/components/Dot.tsx deleted file mode 100644 index bf29997883..0000000000 --- a/src/interfaces/coral_web/src/components/Dot.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { SVGProps } from 'react'; - -import { cn } from '@/utils'; - -type Props = { - on: boolean; -} & SVGProps; - -export const Dot: React.FC = ({ on, className, ...props }) => { - return ( - - - - - {on && ( - - )} - - ); -}; diff --git a/src/interfaces/coral_web/src/components/IconButton.tsx b/src/interfaces/coral_web/src/components/IconButton.tsx index 47ae97a719..531d5d47cd 100644 --- a/src/interfaces/coral_web/src/components/IconButton.tsx +++ b/src/interfaces/coral_web/src/components/IconButton.tsx @@ -17,7 +17,7 @@ type Props = { /** * Convenience component for rendering an icon button that follows Coral UI's design patterns. */ -const IconButton: React.FC = ({ +export const IconButton: React.FC = ({ iconName, iconKind = 'outline', iconClassName, diff --git a/src/interfaces/coral_web/src/components/MessageRow.tsx b/src/interfaces/coral_web/src/components/MessageRow.tsx index 6ce15ca935..ebf8fc34e7 100644 --- a/src/interfaces/coral_web/src/components/MessageRow.tsx +++ b/src/interfaces/coral_web/src/components/MessageRow.tsx @@ -3,7 +3,7 @@ import { forwardRef, useEffect, useState } from 'react'; import { useLongPress } from 'react-aria'; import { Avatar } from '@/components/Avatar'; -import IconButton from '@/components/IconButton'; +import { IconButton } from '@/components/IconButton'; import { LongPressMenu } from '@/components/LongPressMenu'; import { MessageContent } from '@/components/MessageContent'; import { From ed4acea24974dcf4ab767485e0a8d0223a7cc8ba Mon Sep 17 00:00:00 2001 From: Khalil Najjar Date: Tue, 18 Jun 2024 15:32:28 +0200 Subject: [PATCH 2/4] feat(assistant): Update conversation header --- .../coral_web/src/components/Agents/AgentCard.tsx | 6 +++--- .../coral_web/src/components/Agents/DiscoverAgentCard.tsx | 2 +- .../coral_web/src/components/Conversation/Header.tsx | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/interfaces/coral_web/src/components/Agents/AgentCard.tsx b/src/interfaces/coral_web/src/components/Agents/AgentCard.tsx index ea0b1858ee..cc2a1294d5 100644 --- 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 = ({ name, id, isBaseAgent, isExpanded }) => { const isTouchDevice = getIsTouchDevice(); const { query } = useRouter(); - const isActive = isBaseAgent ? !query.agentId : query.agentId === id; + const isActive = isBaseAgent ? !query.assistantId : query.assistantId === id; return ( = ({ name, id, isBaseAgent, isExpanded } items={[ { label: 'New chat', - href: `/agents?agentId=${id}`, + href: `/agents?assistantId=${id}`, iconName: 'new-message', }, { diff --git a/src/interfaces/coral_web/src/components/Agents/DiscoverAgentCard.tsx b/src/interfaces/coral_web/src/components/Agents/DiscoverAgentCard.tsx index 90739e0514..6ffcfa1f71 100644 --- 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 = ({ id, name, description, isBa return (
diff --git a/src/interfaces/coral_web/src/components/Conversation/Header.tsx b/src/interfaces/coral_web/src/components/Conversation/Header.tsx index 7f1222f736..3ef49acdb2 100644 --- a/src/interfaces/coral_web/src/components/Conversation/Header.tsx +++ b/src/interfaces/coral_web/src/components/Conversation/Header.tsx @@ -20,9 +20,9 @@ const useHeaderMenu = ({ conversationId }: { conversationId?: string }) => { useWelcomeGuideState(); const handleNewChat = () => { - const assistantId = router.query.agentId; + const assistantId = router.query.assistantId; - const url = assistantId ? `/?agentId=${assistantId}` : '/'; + const url = assistantId ? `/?assistantId=${assistantId}` : '/'; router.push(url, undefined, { shallow: true }); resetConversation(); resetCitations(); From e2f52d77e871aeeadbb05da5c5325946bb308030 Mon Sep 17 00:00:00 2001 From: Khalil Najjar Date: Tue, 18 Jun 2024 17:43:30 +0200 Subject: [PATCH 3/4] update tooltip --- .../Conversation/Composer/ComposerToolbar.tsx | 4 ++- .../Conversation/ConfigurationDrawer.tsx | 2 +- .../src/components/Conversation/Header.tsx | 28 +++++++++---------- .../coral_web/src/components/IconButton.tsx | 21 ++++++++++---- .../src/components/Shared/Tooltip/Tooltip.tsx | 4 +-- 5 files changed, 35 insertions(+), 24 deletions(-) diff --git a/src/interfaces/coral_web/src/components/Conversation/Composer/ComposerToolbar.tsx b/src/interfaces/coral_web/src/components/Conversation/Composer/ComposerToolbar.tsx index 1f42deafcf..5779cfda10 100644 --- a/src/interfaces/coral_web/src/components/Conversation/Composer/ComposerToolbar.tsx +++ b/src/interfaces/coral_web/src/components/Conversation/Composer/ComposerToolbar.tsx @@ -42,5 +42,7 @@ const ToolbarActionButton: React.FC<{ icon: IconName; onClick: React.MouseEventHandler; }> = ({ tooltipLabel, icon, onClick }) => { - return ; + return ( + + ); }; diff --git a/src/interfaces/coral_web/src/components/Conversation/ConfigurationDrawer.tsx b/src/interfaces/coral_web/src/components/Conversation/ConfigurationDrawer.tsx index 9b5b5f80bc..56e45c5750 100644 --- a/src/interfaces/coral_web/src/components/Conversation/ConfigurationDrawer.tsx +++ b/src/interfaces/coral_web/src/components/Conversation/ConfigurationDrawer.tsx @@ -43,7 +43,7 @@ export const ConfigurationDrawer: React.FC = () => {
setSettings({ isConfigDrawerOpen: false })} /> diff --git a/src/interfaces/coral_web/src/components/Conversation/Header.tsx b/src/interfaces/coral_web/src/components/Conversation/Header.tsx index 3ef49acdb2..7976499849 100644 --- a/src/interfaces/coral_web/src/components/Conversation/Header.tsx +++ b/src/interfaces/coral_web/src/components/Conversation/Header.tsx @@ -3,7 +3,7 @@ import { useRouter } from 'next/router'; import { IconButton } from '@/components/IconButton'; import { KebabMenu, KebabMenuItem } from '@/components/KebabMenu'; -import { Text, Tooltip } from '@/components/Shared'; +import { Text } from '@/components/Shared'; import { WelcomeGuideTooltip } from '@/components/WelcomeGuideTooltip'; import { useIsDesktop } from '@/hooks/breakpoint'; import { WelcomeGuideStep, useWelcomeGuideState } from '@/hooks/ftux'; @@ -117,24 +117,22 @@ export const Header: React.FC = ({ isStreaming }) => { - + +
- -
- - - = ({ iconName, - tooltipLabel, + tooltip, size = 'md', iconKind = 'outline', iconClassName, @@ -70,8 +75,14 @@ export const IconButton: React.FC = ({ /> ); - return tooltipLabel ? ( - + return tooltip ? ( + {iconButton} ) : ( diff --git a/src/interfaces/coral_web/src/components/Shared/Tooltip/Tooltip.tsx b/src/interfaces/coral_web/src/components/Shared/Tooltip/Tooltip.tsx index e6e1fdb489..0e0a7dbed9 100644 --- a/src/interfaces/coral_web/src/components/Shared/Tooltip/Tooltip.tsx +++ b/src/interfaces/coral_web/src/components/Shared/Tooltip/Tooltip.tsx @@ -142,11 +142,11 @@ export const Tooltip: React.FC = ({ {...getFloatingProps()} > {size === 'sm' ? ( - + {label} ) : ( - label + {label} )}
)} From bd790bf84c3d0f9803fa8741e8b8cbbd99750877 Mon Sep 17 00:00:00 2001 From: Khalil Najjar Date: Wed, 19 Jun 2024 11:33:50 +0200 Subject: [PATCH 4/4] fix IconButton import --- .../src/components/Conversation/Composer/ComposerToolbar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/interfaces/coral_web/src/components/Conversation/Composer/ComposerToolbar.tsx b/src/interfaces/coral_web/src/components/Conversation/Composer/ComposerToolbar.tsx index 5779cfda10..724e7d4c7c 100644 --- 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';