feat(toolkit): hide instruction textarea for new assistants (#736)

add instruction button

Author: abimacarmes

src/interfaces/assistants_web/src/components/AgentSettingsForm/DefineStep.tsx

@@ -1,15 +1,26 @@
+'use client';
+
 import Link from 'next/link';
+import { useState } from 'react';
 
 import { AgentSettingsFields } from '@/components/AgentSettingsForm';
-import { Input, Text, Textarea } from '@/components/UI';
+import { Button, Input, Text, Textarea } from '@/components/UI';
 
 type Props = {
   fields: AgentSettingsFields;
+  isNewAssistant: boolean;
   nameError?: string;
   setFields: (fields: AgentSettingsFields) => void;
 };
 
-export const DefineAssistantStep: React.FC<Props> = ({ fields, nameError, setFields }) => {
+export const DefineAssistantStep: React.FC<Props> = ({
+  fields,
+  isNewAssistant,
+  nameError,
+  setFields,
+}) => {
+  const [showInstructions, setShowInstructions] = useState(!isNewAssistant);
+
   return (
     <div className="flex flex-col space-y-4">
       <Input
@@ -26,24 +37,33 @@ export const DefineAssistantStep: React.FC<Props> = ({ fields, nameError, setFie
         value={fields.description ?? ''}
         onChange={(e) => setFields({ ...fields, description: e.target.value })}
       />
-      <Textarea
-        label="Instructions"
-        labelTooltip={
-          <Text>
-            Learn about writing a custom assistant instructions with{' '}
-            <Link
-              href="https://docs.cohere.com/docs/preambles#advanced-techniques-for-writing-a-preamble"
-              className="underline"
-            >
-              Cohere&apos;s guide
-            </Link>
-          </Text>
-        }
-        placeholder="e.g., You are friendly and helpful. You answer questions based on files in Google Drive."
-        defaultRows={8}
-        value={fields.preamble || ''}
-        onChange={(e) => setFields({ ...fields, preamble: e.target.value })}
-      />
+      {showInstructions ? (
+        <Textarea
+          label="Instructions"
+          labelTooltip={
+            <Text>
+              Learn about writing a custom assistant instructions with{' '}
+              <Link
+                href="https://docs.cohere.com/docs/preambles#advanced-techniques-for-writing-a-preamble"
+                className="underline"
+              >
+                Cohere&apos;s guide
+              </Link>
+            </Text>
+          }
+          placeholder="e.g., You are friendly and helpful. You answer questions based on files in Google Drive."
+          defaultRows={8}
+          value={fields.preamble || ''}
+          onChange={(e) => setFields({ ...fields, preamble: e.target.value })}
+        />
+      ) : (
+        <Button
+          label="Custom assistant instructions"
+          icon="add"
+          kind="secondary"
+          onClick={() => setShowInstructions(true)}
+        />
+      )}
     </div>
   );
 };

src/interfaces/assistants_web/src/components/AgentSettingsForm/index.tsx

@@ -186,7 +186,12 @@ export const AgentSettingsForm: React.FC<Props> = (props) => {
         isExpanded={currentStep === 'define'}
         setIsExpanded={(expanded) => setCurrentStep(expanded ? 'define' : undefined)}
       >
-        <DefineAssistantStep fields={fields} setFields={setFields} nameError={nameError} />
+        <DefineAssistantStep
+          fields={fields}
+          setFields={setFields}
+          nameError={nameError}
+          isNewAssistant={source === 'create'}
+        />
         <StepButtons
           handleNext={() => setCurrentStep('dataSources')}
           hide={source !== 'create'}

src/interfaces/assistants_web/src/components/UI/Tooltip.tsx

@@ -129,7 +129,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
               {
                 'max-w-[400px] rounded-sm border-none bg-mushroom-150 px-1 py-0.5 dark:bg-volcanic-300':
                   size === 'sm',
-                'max-w-[300px] rounded border border-marble-950 bg-marble-980 px-4 py-2.5':
+                'max-w-[300px] rounded border border-marble-950 bg-marble-980 px-4 py-2.5 dark:border-volcanic-400 dark:bg-volcanic-300':
                   size === 'md',
               },
               className