feat: display convo starters

danny-avila · Aug 21, 2024 · 284d19a · 284d19a
1 parent 9219cd6
commit 284d19a
Show file tree

Hide file tree

Showing 8 changed files with 98 additions and 87 deletions.
diff --git a/api/server/controllers/assistants/v2.js b/api/server/controllers/assistants/v2.js
@@ -36,9 +36,10 @@ const createAssistant = async (req, res) => {
     assistantData.metadata = {
       author: req.user.id,
       endpoint,
-      conversation_starters: Array.isArray(req.body.metadata.conversation_starters)
-        ? req.body.metadata.conversation_starters.join(', ')
-        : req.body.metadata.conversation_starters,
+      conversation_starters: req.body.metadata?.conversation_starters,
+      // conversation_starters: Array.isArray(req.body.metadata.conversation_starters)
+      //   ? req.body.metadata.conversation_starters.join(', ')
+      //   : req.body.metadata.conversation_starters,
     };
 
     const assistant = await openai.beta.assistants.create(assistantData);

diff --git a/client/src/common/assistants-types.ts b/client/src/common/assistants-types.ts
@@ -23,7 +23,7 @@ export type AssistantForm = {
   description: string | null;
   instructions: string | null;
   metadata: {
-    conversation_starters: string[] | null;
+    conversation_starters: string | null;
   };
   model: string;
   functions: string[];

diff --git a/client/src/components/Chat/ConvoStarter.tsx → ...c/components/Chat/ConversationStarter.tsx b/client/src/components/Chat/ConvoStarter.tsx → ...c/components/Chat/ConversationStarter.tsx
@@ -1,4 +1,4 @@
-export default function ConvoStarter({ text }: { text: string }) {
+export default function ConversationStarter({ text }: { text: string }) {
   return (
     <div className="hover:bg-token-main-surface-secondary relative flex w-40 cursor-pointer flex-col gap-2 rounded-2xl border px-3 pb-4 pt-3 text-start align-top text-[15px] shadow-[0_0_2px_0_rgba(0,0,0,0.05),0_4px_6px_0_rgba(0,0,0,0.02)] transition-colors duration-300 ease-in-out fade-in hover:bg-slate-100 dark:border-gray-600 dark:hover:bg-gray-700">
       <p className="break-word line-clamp-3 text-balance text-gray-600 dark:text-gray-400">

diff --git a/client/src/components/Chat/Landing.tsx b/client/src/components/Chat/Landing.tsx
@@ -4,9 +4,9 @@ import type { ReactNode } from 'react';
 import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '~/components/ui';
 import { useChatContext, useAssistantsMapContext } from '~/Providers';
 import ConvoIcon from '~/components/Endpoints/ConvoIcon';
+import ConversationStarter from './ConversationStarter';
 import { BirthdayIcon } from '~/components/svg';
 import { getIconEndpoint, cn } from '~/utils';
-import ConvoStarter from './ConvoStarter';
 import { useLocalize } from '~/hooks';
 
 export default function Landing({ Header }: { Header?: ReactNode }) {
@@ -36,8 +36,12 @@ export default function Landing({ Header }: { Header?: ReactNode }) {
   const assistantName = assistant && assistant.name;
   const assistantDesc = assistant && assistant.description;
   const avatar = assistant && (assistant.metadata?.avatar as string);
-  const assistantConvoStarter = assistant && assistant.convoStarter;
-  const testText = ['1', '22', '333', '4444'];
+
+  let assistantConversationStarter;
+
+  if (assistant) {
+    assistantConversationStarter = assistant.metadata?.conversation_starters;
+  }
 
   const containerClassName =
     'shadow-stroke relative flex h-full items-center justify-center rounded-full bg-white text-black';
@@ -88,11 +92,13 @@ 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">
-              {testText.slice(0, 4).map((text, index) => (
-                <ConvoStarter key={index} text={text} />
-              ))}
-            </div>
+            {typeof assistantConversationStarter === 'string' && (
+              <div className="mt-8 flex flex-wrap justify-center gap-3 px-4">
+                {assistantConversationStarter.split(',').map((text: string, index: number) => (
+                  <ConversationStarter key={index} text={text} />
+                ))}
+              </div>
+            )}
           </div>
         </div>
       </Tooltip>

diff --git a/client/src/components/SidePanel/Builder/AssistantConversationStarters.tsx b/client/src/components/SidePanel/Builder/AssistantConversationStarters.tsx
@@ -5,8 +5,8 @@ import { useRef, useEffect } from 'react';
 
 interface AssistantConversationStartersProps {
   field: {
-    value: string[];
-    onChange: (value: string[]) => void;
+    value: string;
+    onChange: (value: string) => void;
   };
   inputClass: string;
 }
@@ -20,23 +20,25 @@ export default function AssistantConversationStarters({
   const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
 
   const handleAddStarter = () => {
-    const newValues = [...field.value];
+    const newValues = field.value.split(',').map((v) => v.trim());
     if (newValues.length < MAX_STARTERS) {
       newValues.unshift('');
-      field.onChange(newValues);
+      field.onChange(newValues.join(', '));
     }
   };
 
   useEffect(() => {
     if (inputRefs.current[0]) {
       inputRefs.current[0].focus();
     }
-  }, [field.value.length]);
+  }, [field.value]);
+
+  const startersArray = field.value.split(',').map((v) => v.trim());
 
   return (
     <div className="relative">
       <div className="mt-4 space-y-2">
-        {Array.isArray(field.value) && field.value.length === 0 && (
+        {startersArray.length === 0 && (
           <div className="relative">
             <input
               ref={(el) => (inputRefs.current[0] = el)}
@@ -47,7 +49,7 @@ export default function AssistantConversationStarters({
               placeholder={localize('com_assistants_conversation_starters_placeholder')}
               onChange={(e) => {
                 const newValues = [e.target.value];
-                field.onChange(newValues);
+                field.onChange(newValues.join(', '));
               }}
               onKeyDown={(e) => {
                 if (e.key === 'Enter') {
@@ -74,70 +76,69 @@ export default function AssistantConversationStarters({
             </TooltipProvider>
           </div>
         )}
-        {Array.isArray(field.value) &&
-          field.value.map((starter, index) => (
-            <div key={index} className="relative">
-              <input
-                ref={(el) => (inputRefs.current[index] = el)}
-                value={starter}
-                maxLength={64}
-                className={inputClass}
-                type="text"
-                placeholder={localize('com_assistants_conversation_starters_placeholder')}
-                onChange={(e) => {
-                  const newValues = [...field.value];
-                  newValues[index] = e.target.value;
-                  field.onChange(newValues);
-                }}
-                onKeyDown={(e) => {
-                  if (index === 0 && e.key === 'Enter') {
-                    e.preventDefault();
-                    handleAddStarter();
-                  } else if (e.key === 'Backspace' && starter.trim() === '') {
-                    e.preventDefault();
-                  }
-                }}
-              />
-              {index === 0 && field.value.length < MAX_STARTERS ? (
-                <TooltipProvider delayDuration={1000}>
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <button
-                        type="button"
-                        className="transition-color absolute right-1 top-1 flex size-7 items-center justify-center rounded-lg duration-200 hover:bg-surface-hover"
-                        onClick={handleAddStarter}
-                      >
-                        <Plus className="size-4" />
-                      </button>
-                    </TooltipTrigger>
-                    <TooltipContent side="top" sideOffset={0}>
-                      {localize('com_ui_add')}
-                    </TooltipContent>
-                  </Tooltip>
-                </TooltipProvider>
-              ) : (
-                <TooltipProvider delayDuration={1000}>
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <button
-                        type="button"
-                        className="transition-color absolute right-1 top-1 flex size-7 items-center justify-center rounded-lg duration-200 hover:bg-surface-hover"
-                        onClick={() => {
-                          const newValues = field.value.filter((_, i) => i !== index);
-                          field.onChange(newValues);
-                        }}
-                      >
-                        <X className="size-4" />
-                      </button>
-                    </TooltipTrigger>
-                    <TooltipContent side="top" sideOffset={0}>
-                      {localize('com_ui_delete')}
-                    </TooltipContent>
-                  </Tooltip>
-                </TooltipProvider>
-              )}
-            </div>
-          ))}
+        {startersArray.map((starter, index) => (
+          <div key={index} className="relative">
+            <input
+              ref={(el) => (inputRefs.current[index] = el)}
+              value={starter}
+              maxLength={64}
+              className={inputClass}
+              type="text"
+              placeholder={localize('com_assistants_conversation_starters_placeholder')}
+              onChange={(e) => {
+                const newValues = [...startersArray];
+                newValues[index] = e.target.value;
+                field.onChange(newValues.join(', '));
+              }}
+              onKeyDown={(e) => {
+                if (index === 0 && e.key === 'Enter') {
+                  e.preventDefault();
+                  handleAddStarter();
+                } else if (e.key === 'Backspace' && starter.trim() === '') {
+                  e.preventDefault();
+                }
+              }}
+            />
+            {index === 0 && startersArray.length < MAX_STARTERS ? (
+              <TooltipProvider delayDuration={1000}>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <button
+                      type="button"
+                      className="transition-color absolute right-1 top-1 flex size-7 items-center justify-center rounded-lg duration-200 hover:bg-surface-hover"
+                      onClick={handleAddStarter}
+                    >
+                      <Plus className="size-4" />
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent side="top" sideOffset={0}>
+                    {localize('com_ui_add')}
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            ) : (
+              <TooltipProvider delayDuration={1000}>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <button
+                      type="button"
+                      className="transition-color absolute right-1 top-1 flex size-7 items-center justify-center rounded-lg duration-200 hover:bg-surface-hover"
+                      onClick={() => {
+                        const newValues = startersArray.filter((_, i) => i !== index);
+                        field.onChange(newValues.join(', '));
+                      }}
+                    >
+                      <X className="size-4" />
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent side="top" sideOffset={0}>
+                    {localize('com_ui_delete')}
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            )}
+          </div>
+        ))}
       </div>
     </div>
   );

diff --git a/client/src/components/SidePanel/Builder/AssistantPanel.tsx b/client/src/components/SidePanel/Builder/AssistantPanel.tsx
@@ -342,10 +342,10 @@ export default function AssistantPanel({
             <Controller
               name="metadata.conversation_starters"
               control={control}
-              defaultValue={['']}
+              defaultValue={''}
               render={({ field }) => (
                 <AssistantConversationStarters
-                  field={field as { value: string[]; onChange: (value: string[]) => void }}
+                  field={field as { value: string; onChange: (value: string) => void }}
                   inputClass={inputClass}
                 />
               )}

diff --git a/packages/data-provider/src/schemas.ts b/packages/data-provider/src/schemas.ts
@@ -61,6 +61,9 @@ export const defaultAssistantFormValues = {
   name: '',
   description: '',
   instructions: '',
+  metadata: {
+    conversation_starters: '',
+  },
   model: '',
   functions: [],
   code_interpreter: false,

diff --git a/packages/data-provider/src/types/assistants.ts b/packages/data-provider/src/types/assistants.ts
@@ -8,7 +8,7 @@ export type Reference = OpenAPIV3.ReferenceObject & { description?: string };
 export type Metadata = {
   avatar?: string;
   author?: string;
-  conversation_starters?: string[];
+  conversation_starters?: string;
 } & {
   [key: string]: unknown;
 };