- feature: added support for together AI models

apps/shinkai-app/src/pages/AddAgent.tsx

@@ -57,7 +57,6 @@ const AddAgent: React.FC = () => {
   const onSubmit = (data: z.infer<typeof addAgentSchema>) => {
     const modelMapping: Record<string, { model_type: string }> = {
       OpenAI: { model_type: modelType },
-      SleepAPI: { model_type: modelType },
     };
 
     if (!auth) return;
@@ -208,9 +207,6 @@ const AddAgent: React.FC = () => {
                           <IonSelectOption value="OpenAI">
                             OpenAI
                           </IonSelectOption>
-                          <IonSelectOption value="SleepAPI">
-                            SleepAPI
-                          </IonSelectOption>
                         </IonSelect>
                         <ErrorMessage
                           errors={addAgentForm.formState.errors}

apps/shinkai-visor/src/components/add-agent/add-agent.tsx

@@ -1,13 +1,13 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useCreateAgent } from '@shinkai_network/shinkai-node-state/lib/mutations/createAgent/useCreateAgent';
 import { Bot, Loader2 } from 'lucide-react';
-import { useForm } from 'react-hook-form';
+import { useEffect, useState } from 'react';
+import { useForm, useWatch } from 'react-hook-form';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 import { z } from 'zod';
 
 import { useAuth } from '../../store/auth/auth';
-import { useUIContainer } from '../../store/ui-container/ui-container';
 import { Header } from '../header/header';
 import { Button } from '../ui/button';
 import {
@@ -27,51 +27,62 @@ import {
   SelectTrigger,
   SelectValue,
 } from '../ui/select';
-
-enum Models {
-  OpenAI = 'open-api',
-  SleepApi = 'sleep-api',
-}
+import { Models, modelsConfig } from './models';
 
 const formSchema = z.object({
-  agentName: z.string().nonempty(),
-  externalUrl: z.string().url().nonempty(),
-  apiKey: z.string().nonempty(),
+  // TODO: Translate this error message
+  agentName: z.string().regex(/^[a-zA-Z0-9]+(_[a-zA-Z0-9]+)*$/, 'It just accepts alphanumeric characters and underscores'),
+  externalUrl: z.string().url(),
+  apiKey: z.string().min(4),
   model: z.nativeEnum(Models),
+  modelType: z.string().min(4),
 });
 
 type FormSchemaType = z.infer<typeof formSchema>;
 
 export const AddAgent = () => {
   const history = useHistory();
   const auth = useAuth((state) => state.auth);
-  const uiContainer = useUIContainer((state) => state.uiContainer);
   const form = useForm<FormSchemaType>({
     resolver: zodResolver(formSchema),
     defaultValues: {
-      agentName: 'gpt',
-      externalUrl: 'https://api.openai.com',
+      agentName: '',
+      externalUrl: modelsConfig[Models.OpenAI].apiUrl,
       apiKey: '',
       model: Models.OpenAI,
+      modelType: '',
     },
   });
   const intl = useIntl();
+  const currentModel = useWatch<FormSchemaType>({
+    control: form.control,
+    name: 'model',
+  });
   const { mutateAsync: createAgent, isLoading } = useCreateAgent({
-    onSuccess: (data) => {
+    onSuccess: () => {
       history.replace({ pathname: '/inboxes/create-job' });
     },
   });
-
   const modelOptions: { value: Models; label: string }[] = [
     {
       value: Models.OpenAI,
       label: intl.formatMessage({ id: 'openai' }),
     },
     {
-      value: Models.SleepApi,
-      label: intl.formatMessage({ id: 'sleep-api' }),
+      value: Models.TogetherComputer,
+      label: intl.formatMessage({ id: 'togethercomputer' }),
     },
   ];
+  const getModelObject = (model: Models, modelType: string) => {
+    switch (model) {
+      case Models.OpenAI:
+        return { OpenAI: { model_type: modelType } };
+      case Models.TogetherComputer:
+        return { GenericAPI: { model_type: modelType } };
+      default:
+        throw new Error('unknown model');
+    }
+  };
   const submit = (values: FormSchemaType) => {
     if (!auth) return;
     createAgent({
@@ -86,10 +97,7 @@ export const AddAgent = () => {
         perform_locally: false,
         storage_bucket_permissions: [],
         toolkit_permissions: [],
-        model:
-          values.model === Models.OpenAI
-            ? { OpenAI: { model_type: 'gpt-3.5-turbo' } }
-            : { SleepAPI: {} },
+        model: getModelObject(values.model, values.modelType),
       },
       setupDetailsState: {
         my_device_encryption_sk: auth.my_device_encryption_sk,
@@ -100,6 +108,26 @@ export const AddAgent = () => {
       },
     });
   };
+  const [modelTypeOptions, setModelTypeOptions] = useState<
+    { label: string; value: string }[]
+  >([]);
+  useEffect(() => {
+    const modelConfig = modelsConfig[currentModel as Models];
+    form.setValue('externalUrl', modelConfig.apiUrl);
+    setModelTypeOptions(
+      modelsConfig[currentModel as Models].modelTypes.map((modelType) => ({
+        label: modelType.name,
+        value: modelType.value,
+      }))
+    );
+  }, [currentModel, form]);
+  useEffect(() => {
+    if (!modelTypeOptions?.length) {
+      return;
+    }
+    form.setValue('modelType', modelTypeOptions[0].value);
+  }, [modelTypeOptions, form]);
+
   return (
     <div className="h-full flex flex-col space-y-3">
       <Header
@@ -171,13 +199,14 @@ export const AddAgent = () => {
                   <Select
                     defaultValue={field.value as unknown as string}
                     onValueChange={field.onChange}
+                    value={field.value}
                   >
                     <FormControl>
                       <SelectTrigger>
                         <SelectValue />
                       </SelectTrigger>
                     </FormControl>
-                    <SelectPortal container={uiContainer?.rootElement}>
+                    <SelectPortal>
                       <SelectContent>
                         {modelOptions.map((model) => (
                           <SelectItem
@@ -194,6 +223,39 @@ export const AddAgent = () => {
                 </FormItem>
               )}
             />
+
+            <FormField
+              control={form.control}
+              name="modelType"
+              render={({ field }) => (
+                <FormItem>
+                  <Select
+                    defaultValue={field.value as unknown as string}
+                    onValueChange={field.onChange}
+                    value={field.value}
+                  >
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectPortal>
+                      <SelectContent className="max-h-[150px] max-w-[325px] text-xs overflow-y-auto">
+                        {modelTypeOptions.map((modelType) => (
+                          <SelectItem
+                            key={modelType.value}
+                            value={modelType.value}
+                          >
+                            {modelType.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </SelectPortal>
+                  </Select>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
           </div>
           <Button className="w-full" disabled={isLoading} type="submit">
             {isLoading ? (