💬 feat: assistant conversation starter (#3699)

* feat: initial UI convoStart

* fix: ConvoStarter UI

* fix: convoStarters bug

* feat: Add input field focus on conversation starters

* style: conversation starter UI update

* feat: apply fixes for starters

* style: update conversationStarters UI and fixed typo

* general UI update

* feat: Add onClick functionality to ConvoStarter component

* fix: quick fix test

* fix(AssistantSelect): remove object check

* fix: updateAssistant `conversation_starters` var

* chore: remove starter autofocus

* fix: no empty conversation starters, always show input, use Constants value for max count

* style: Update defaultTextPropsLabel styles, for a11y placeholder

* refactor: Update ConvoStarter component styles and class names for a11y and theme

* refactor: convostarter, move plus button to within persistent element

* fix: types

* chore: Update landing page assistant description styling with theming

* chore: assistant types

* refactor: documents routes

* refactor: optimize conversation starter mutations/queries

* refactor: Update listAllAssistants return type to Promise<Array<Assistant>>

* feat: edit existing starters

* feat(convo-starters): enhance ConvoStarter component and add animations

    - Update ConvoStarter component styling for better visual appeal
    - Implement fade-in animation for smoother appearance
    - Add hover effect with background color change
    - Improve text overflow handling with line-clamp and text-balance
    - Ensure responsive design for various screen sizes

* feat(assistant): add conversation starters to assistant builder

- Add localization strings for conversation starters
- Update mobile.css with shake animation for max starters reached
- Enhance user experience with tooltips and dynamic input handling

* refactor: select specific fields for assistant documents fetch

* refactor: remove endpoint query key, fetch all assistant docs for now, add conversation_starters to v1 methods

* refactor: add document filters based on endpoint config

* fix: starters not applied during creation

* refactor: update AssistantSelect component to handle undefined lastSelectedModels

---------

Co-authored-by: Danny Avila <danny@librechat.ai>

client/src/components/Chat/Landing.tsx

@@ -1,12 +1,15 @@
-import { EModelEndpoint, isAssistantsEndpoint } from 'librechat-data-provider';
+import { useMemo } from 'react';
+import { EModelEndpoint, isAssistantsEndpoint, Constants } from 'librechat-data-provider';
 import { useGetEndpointsQuery, useGetStartupConfig } from 'librechat-data-provider/react-query';
 import type { ReactNode } from 'react';
 import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '~/components/ui';
 import { useChatContext, useAssistantsMapContext } from '~/Providers';
+import { useGetAssistantDocsQuery } from '~/data-provider';
 import ConvoIcon from '~/components/Endpoints/ConvoIcon';
+import { useLocalize, useSubmitMessage } from '~/hooks';
 import { BirthdayIcon } from '~/components/svg';
 import { getIconEndpoint, cn } from '~/utils';
-import { useLocalize } from '~/hooks';
+import ConvoStarter from './ConvoStarter';
 
 export default function Landing({ Header }: { Header?: ReactNode }) {
   const { conversation } = useChatContext();
@@ -29,21 +32,36 @@ export default function Landing({ Header }: { Header?: ReactNode }) {
 
   const iconURL = conversation?.iconURL;
   endpoint = getIconEndpoint({ endpointsConfig, iconURL, endpoint });
+  const { data: documentsMap = new Map() } = useGetAssistantDocsQuery(endpoint, {
+    select: (data) => new Map(data.map((dbA) => [dbA.assistant_id, dbA])),
+  });
 
   const isAssistant = isAssistantsEndpoint(endpoint);
   const assistant = isAssistant ? assistantMap?.[endpoint][assistant_id ?? ''] : undefined;
-  const assistantName = assistant && assistant.name;
-  const assistantDesc = assistant && assistant.description;
-  const avatar = assistant && (assistant.metadata?.avatar as string);
+  const assistantName = assistant?.name ?? '';
+  const assistantDesc = assistant?.description ?? '';
+  const avatar = assistant?.metadata?.avatar ?? '';
+  const conversation_starters = useMemo(() => {
+    /* The user made updates, use client-side cache,  */
+    if (assistant?.conversation_starters) {
+      return assistant.conversation_starters;
+    }
+    /* If none in cache, we use the latest assistant docs */
+    const assistantDocs = documentsMap.get(assistant_id ?? '');
+    return assistantDocs?.conversation_starters ?? [];
+  }, [documentsMap, assistant_id, assistant?.conversation_starters]);
 
   const containerClassName =
     'shadow-stroke relative flex h-full items-center justify-center rounded-full bg-white text-black';
 
+  const { submitMessage } = useSubmitMessage();
+  const sendConversationStarter = (text: string) => submitMessage({ text });
+
   return (
     <TooltipProvider delayDuration={50}>
       <Tooltip>
         <div className="relative h-full">
-          <div className="absolute left-0 right-0">{Header && Header}</div>
+          <div className="absolute left-0 right-0">{Header != null ? Header : null}</div>
           <div className="flex h-full flex-col items-center justify-center">
             <div className={cn('relative h-12 w-12', assistantName && avatar ? 'mb-0' : 'mb-3')}>
               <ConvoIcon
@@ -55,7 +73,7 @@ export default function Landing({ Header }: { Header?: ReactNode }) {
                 className="h-2/3 w-2/3"
                 size={41}
               />
-              {!!startupConfig?.showBirthdayIcon && (
+              {startupConfig?.showBirthdayIcon === true ? (
                 <div>
                   <TooltipTrigger>
                     <BirthdayIcon className="absolute bottom-8 right-2.5" />
@@ -64,14 +82,14 @@ export default function Landing({ Header }: { Header?: ReactNode }) {
                     {localize('com_ui_happy_birthday')}
                   </TooltipContent>
                 </div>
-              )}
+              ) : null}
             </div>
             {assistantName ? (
               <div className="flex flex-col items-center gap-0 p-2">
                 <div className="text-center text-2xl font-medium dark:text-white">
                   {assistantName}
                 </div>
-                <div className="text-token-text-secondary max-w-md text-center text-xl font-normal ">
+                <div className="max-w-md text-center text-sm font-normal text-text-primary ">
                   {assistantDesc ? assistantDesc : localize('com_nav_welcome_message')}
                 </div>
                 {/* <div className="mt-1 flex items-center gap-1 text-token-text-tertiary">
@@ -85,6 +103,18 @@ export default function Landing({ Header }: { Header?: ReactNode }) {
                   : conversation?.greeting ?? localize('com_nav_welcome_message')}
               </h2>
             )}
+            <div className="mt-8 flex flex-wrap justify-center gap-3 px-4">
+              {conversation_starters.length > 0 &&
+                conversation_starters
+                  .slice(0, Constants.MAX_CONVO_STARTERS)
+                  .map((text, index) => (
+                    <ConvoStarter
+                      key={index}
+                      text={text}
+                      onClick={() => sendConversationStarter(text)}
+                    />
+                  ))}
+            </div>
           </div>
         </div>
       </Tooltip>