fix(toolkit): UX/UI improvements

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

@@ -7,7 +7,7 @@ import { DEFAULT_AGENT_MODEL, DEPLOYMENT_COHERE_PLATFORM } from '@/constants';
 import { ModalContext } from '@/context/ModalContext';
 import { useCreateAgent, useIsAgentNameUnique } from '@/hooks/agents';
 import { useNotify } from '@/hooks/toast';
-import { useAgentsStore, useParamsStore } from '@/stores';
+import { useAgentsStore } from '@/stores';
 
 /**
  * @description Form to create a new agent.
@@ -17,16 +17,13 @@ export const CreateAgentForm: React.FC = () => {
   const { open, close } = useContext(ModalContext);
   const { error } = useNotify();
   const { mutateAsync: createAgent } = useCreateAgent();
-  const {
-    params: { preamble },
-  } = useParamsStore();
   const { addRecentAgentId } = useAgentsStore();
   const isAgentNameUnique = useIsAgentNameUnique();
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [fields, setFields] = useState<AgentFormFields>({
     name: '',
     description: '',
-    preamble,
+    preamble: '',
     deployment: DEPLOYMENT_COHERE_PLATFORM,
     model: DEFAULT_AGENT_MODEL,
     tools: [],
@@ -80,7 +77,7 @@ export const CreateAgentForm: React.FC = () => {
       setFields({
         name: '',
         description: '',
-        preamble,
+        preamble: '',
         deployment: '',
         model: '',
         tools: [],
@@ -97,21 +94,23 @@ export const CreateAgentForm: React.FC = () => {
   };
 
   return (
-    <div className="relative h-full w-full">
-      <div className="flex h-full max-w-[650px] flex-col gap-y-2 overflow-scroll p-10 pb-32">
-        <Text styleAs="h4">Create an Assistant</Text>
-        <Text className="text-volcanic-700">
-          Create an unique assistant and share with your org
-        </Text>
-        <AgentForm
-          fields={fields}
-          onChange={handleChange}
-          onToolToggle={handleToolToggle}
-          errors={fieldErrors}
-          className="mt-6"
-        />
+    <div className="relative flex h-full w-full flex-col">
+      <div className="flex-grow overflow-y-scroll">
+        <div className="flex max-w-[650px] flex-col gap-y-2 p-10">
+          <Text styleAs="h4">Create an Assistant</Text>
+          <Text className="text-volcanic-700">
+            Create an unique assistant and share with your org
+          </Text>
+          <AgentForm
+            fields={fields}
+            onChange={handleChange}
+            onToolToggle={handleToolToggle}
+            errors={fieldErrors}
+            className="mt-6"
+          />
+        </div>
       </div>
-      <div className="absolute bottom-0 right-0 flex w-full justify-end border-t border-marble-400 bg-white px-4 py-8">
+      <div className="flex w-full flex-shrink-0 justify-end border-t border-marble-400 bg-white px-4 py-8">
         <Button kind="green" splitIcon="add" onClick={handleOpenSubmitModal} disabled={!canSubmit}>
           Create
         </Button>

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

@@ -132,21 +132,21 @@ export const UpdateAgentPanel: React.FC<Props> = ({ agentId }) => {
           onToolToggle={handleToolToggle}
           disabled={!isAgentCreator}
         />
-        {isAgentCreator && (
-          <>
-            <Banner className="w-full">
-              Updating {agent.name} will affect everyone using the assistant
-            </Banner>
-            <Button
-              className="mt-14 self-end"
-              splitIcon="check-mark"
-              label={isSubmitting ? 'Updating' : 'Update'}
-              onClick={handleSubmit}
-              disabled={!canSubmit}
-            />
-          </>
-        )}
       </div>
+      {isAgentCreator && (
+        <div className="flex flex-col gap-y-12 px-14 py-8">
+          <Banner className="w-full" theme="secondary" size="sm">
+            Updating {agent.name} will affect everyone using the assistant
+          </Banner>
+          <Button
+            className="self-end"
+            splitIcon="check-mark"
+            label={isSubmitting ? 'Updating' : 'Update'}
+            onClick={handleSubmit}
+            disabled={!canSubmit}
+          />
+        </div>
+      )}
     </div>
   );
 };