feat(toolkit): show assistant welcome message (#255)

* feat(toolkit): show assistant welcome message

* feat(toolkit): show assistant welcome message

Author: knajjars

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

@@ -16,12 +16,18 @@ import { cn } from '@/utils';
 export const AgentsSidePanel: React.FC<React.PropsWithChildren> = ({ children }) => {
   const {
     settings: { isAgentsSidePanelOpen },
-    setIsAgentsSidePanelOpen,
+    setSettings,
+    setIsConvListPanelOpen,
   } = useSettingsStore();
 
   const isDesktop = useIsDesktop();
   const isMobile = !isDesktop;
 
+  const handleToggleAgentsSidePanel = () => {
+    setIsConvListPanelOpen(false);
+    setSettings({ isConfigDrawerOpen: false, isAgentsSidePanelOpen: !isAgentsSidePanelOpen });
+  };
+
   const navigationItems: {
     label: string;
     icon: IconProps['name'];
@@ -82,7 +88,7 @@ export const AgentsSidePanel: React.FC<React.PropsWithChildren> = ({ children })
 
           <IconButton
             iconName="close-drawer"
-            onClick={() => setIsAgentsSidePanelOpen(!isAgentsSidePanelOpen)}
+            onClick={handleToggleAgentsSidePanel}
             className={cn('transition delay-100 duration-200 ease-in-out', {
               'rotate-180 transform text-secondary-700': isAgentsSidePanelOpen || isMobile,
             })}

src/interfaces/coral_web/src/components/Conversation/MessagingContainer.tsx

@@ -19,6 +19,7 @@ type Props = {
   startOptionsEnabled: boolean;
   messages: ChatMessage[];
   streamingMessage: StreamingMessage | null;
+  agentId?: string;
   onRetry: VoidFunction;
   composer: ReactNode;
   conversationId?: string;
@@ -164,15 +165,15 @@ type MessagesProps = Props;
  * This component is in charge of rendering the messages.
  */
 const Messages = forwardRef<HTMLDivElement, MessagesProps>(function MessagesInternal(
-  { onRetry, messages, streamingMessage },
+  { onRetry, messages, streamingMessage, agentId },
   ref
 ) {
   const isChatEmpty = messages.length === 0;
 
   if (isChatEmpty) {
     return (
       <div className="m-auto p-4">
-        <Welcome show={isChatEmpty} isBaseAgent />
+        <Welcome show={isChatEmpty} agentId={agentId} />
       </div>
     );
   }

src/interfaces/coral_web/src/components/Conversation/index.tsx

@@ -165,6 +165,7 @@ const Conversation: React.FC<Props> = ({
             onRetry={handleRetry}
             messages={messages}
             streamingMessage={streamingMessage}
+            agentId={agentId}
             composer={
               <>
                 <WelcomeGuideTooltip step={3} className="absolute bottom-full mb-4" />
@@ -192,7 +193,7 @@ const Conversation: React.FC<Props> = ({
         enter="transition-all ease-in-out duration-300"
         enterFrom="w-0"
         enterTo="2xl:agent-panel-2xl md:w-agent-panel lg:w-agent-panel-lg w-full"
-        leave="transition-all ease-in-out duration-300"
+        leave="transition-all ease-in-out duration-0 md:duration-300"
         leaveFrom="2xl:agent-panel-2xl md:w-agent-panel lg:w-agent-panel-lg w-full"
         leaveTo="w-0"
       >

src/interfaces/coral_web/src/components/Welcome.tsx

@@ -3,40 +3,28 @@ import React from 'react';
 
 import { BotAvatar } from '@/components/Avatar';
 import { Text } from '@/components/Shared';
+import { useAgent } from '@/hooks/agents';
 import { BotState } from '@/types/message';
 import { cn } from '@/utils';
 import { getCohereColor } from '@/utils/getCohereColor';
 
-type BaseAgentProps = {
+type Props = {
   show: boolean;
-  isBaseAgent: true;
-};
-
-type AgentProps = {
-  show: boolean;
-  isBaseAgent?: false;
-  id: string;
-  name: string;
-  description?: string;
-};
-
-type Props = BaseAgentProps | AgentProps;
-
-const isBaseAgent = (props: AgentProps | BaseAgentProps): props is BaseAgentProps => {
-  return Boolean(props.isBaseAgent);
+  agentId?: string;
 };
 
 /**
  * @description Welcome message shown to the user when they first open the chat.
  */
-export const Welcome: React.FC<Props> = (props) => {
-  const isBaseAgentProps = isBaseAgent(props);
+export const Welcome: React.FC<Props> = ({ show, agentId }) => {
+  const { data: agent, isLoading } = useAgent({ agentId });
+  const isAgent = agentId !== undefined && !isLoading && !!agent;
 
   return (
     <Transition
-      show={props.show}
+      show={show}
       appear
-      className="flex flex-col items-center gap-y-4"
+      className="flex flex-col items-center gap-y-4 p-4 md:max-w-[480px] lg:max-w-[720px]"
       enter="transition-all duration-300 ease-out delay-300"
       enterFrom="opacity-0"
       enterTo="opacity-100"
@@ -48,17 +36,17 @@ export const Welcome: React.FC<Props> = (props) => {
       <div
         className={cn(
           'flex h-7 w-7 items-center justify-center rounded md:h-9 md:w-9',
-          !isBaseAgentProps && getCohereColor(props.id),
+          isAgent && getCohereColor(agent.id),
           {
-            'bg-secondary-400': isBaseAgentProps,
+            'bg-secondary-400': !isAgent,
           }
         )}
       >
-        {isBaseAgentProps ? (
+        {!isAgent ? (
           <BotAvatar state={BotState.FULFILLED} style="secondary" />
         ) : (
           <Text className="uppercase text-white" styleAs="p-lg">
-            {props.name[0]}
+            {agent.name[0]}
           </Text>
         )}
       </div>
@@ -67,14 +55,14 @@ export const Welcome: React.FC<Props> = (props) => {
         styleAs="p-lg"
         className={cn(
           'text-center text-secondary-800 md:!text-h4',
-          !isBaseAgentProps && getCohereColor(props.id, { background: false })
+          isAgent && getCohereColor(agent.id, { background: false })
         )}
       >
-        {isBaseAgentProps ? 'Need help? Your wish is my command.' : props.name}
+        {!isAgent ? 'Need help? Your wish is my command.' : agent.name}
       </Text>
-      {!isBaseAgentProps && (
+      {isAgent && (
         <Text className="!text-p-md text-center text-volcanic-900 md:!text-p-lg">
-          {props.description}
+          {agent.description}
         </Text>
       )}
     </Transition>

src/interfaces/coral_web/src/pages/agents/index.tsx

@@ -78,23 +78,24 @@ const AgentsPage: NextPage<Props> = () => {
       <MainSection>
         <div className="flex h-full">
           <Transition
-            as="main"
+            as="aside"
             show={(isMobileConvListPanelOpen && isMobile) || (isConvListPanelOpen && isDesktop)}
-            enterFrom="translate-x-full lg:translate-x-0 lg:w-0"
-            enterTo="translate-x-0 lg:w-[300px]"
-            leaveFrom="translate-x-0 lg:w-[300px]"
-            leaveTo="translate-x-full lg:translate-x-0 lg:w-0"
+            enter="transition-all transform ease-in-out duration-300"
+            enterFrom="-translate-x-full w-0"
+            enterTo="translate-x-0 w-full md:w-[320px]"
+            leave="transition-all transform ease-in-out duration-300"
+            leaveFrom="translate-x-0 w-full md:w-[320px]"
+            leaveTo="-translate-x-full w-0"
             className={cn(
-              'z-main-section flex flex-grow lg:min-w-0',
-              'absolute h-full w-full lg:static lg:h-auto',
-              'border-0 border-marble-400 md:border-r',
-              'transition-[transform, width] duration-500 ease-in-out'
+              'z-main-section flex lg:min-w-0',
+              'absolute h-full lg:static lg:h-auto',
+              'border-0 border-marble-400 md:border-r'
             )}
           >
             <ConversationListPanel />
           </Transition>
           <Transition
-            as="div"
+            as="main"
             show={isDesktop || !isMobileConvListPanelOpen}
             enterFrom="-translate-x-full"
             enterTo="translate-x-0"