Add model choice to Persona

web/src/app/admin/personas/PersonaEditor.tsx

@@ -1,15 +1,8 @@
 "use client";
 
 import { DocumentSet } from "@/lib/types";
-import { Button, Divider } from "@tremor/react";
-import {
-  ArrayHelpers,
-  ErrorMessage,
-  Field,
-  FieldArray,
-  Form,
-  Formik,
-} from "formik";
+import { Button, Divider, Text } from "@tremor/react";
+import { ArrayHelpers, FieldArray, Form, Formik } from "formik";
 
 import * as Yup from "yup";
 import { buildFinalPrompt, createPersona, updatePersona } from "./lib";
@@ -20,6 +13,7 @@ import Link from "next/link";
 import { useEffect, useState } from "react";
 import {
   BooleanFormField,
+  SelectorFormField,
   TextFormField,
 } from "@/components/admin/connectors/Field";
 
@@ -40,9 +34,13 @@ function SubLabel({ children }: { children: string | JSX.Element }) {
 export function PersonaEditor({
   existingPersona,
   documentSets,
+  llmOverrideOptions,
+  defaultLLM,
 }: {
   existingPersona?: Persona | null;
   documentSets: DocumentSet[];
+  llmOverrideOptions: string[];
+  defaultLLM: string;
 }) {
   const router = useRouter();
   const { popup, setPopup } = usePopup();
@@ -74,6 +72,7 @@ export function PersonaEditor({
     <div className="dark">
       {popup}
       <Formik
+        enableReinitialize={true}
         initialValues={{
           name: existingPersona?.name ?? "",
           description: existingPersona?.description ?? "",
@@ -86,6 +85,8 @@ export function PersonaEditor({
           num_chunks: existingPersona?.num_chunks ?? null,
           apply_llm_relevance_filter:
             existingPersona?.apply_llm_relevance_filter ?? false,
+          llm_model_version_override:
+            existingPersona?.llm_model_version_override ?? null,
         }}
         validationSchema={Yup.object().shape({
           name: Yup.string().required("Must give the Persona a name!"),
@@ -101,6 +102,7 @@ export function PersonaEditor({
           document_set_ids: Yup.array().of(Yup.number()),
           num_chunks: Yup.number().max(20).nullable(),
           apply_llm_relevance_filter: Yup.boolean().required(),
+          llm_model_version_override: Yup.string().nullable(),
         })}
         onSubmit={async (values, formikHelpers) => {
           formikHelpers.setSubmitting(true);
@@ -259,6 +261,41 @@ export function PersonaEditor({
 
               <Divider />
 
+              {llmOverrideOptions.length > 0 && defaultLLM && (
+                <>
+                  <SectionHeader>[Advanced] Model Selection</SectionHeader>
+
+                  <Text>
+                    Pick which LLM to use for this Persona. If left as Default,
+                    will use <b className="italic">{defaultLLM}</b>.
+                    <br />
+                    <br />
+                    For more information on the different LLMs, checkout the{" "}
+                    <a
+                      href="https://platform.openai.com/docs/models"
+                      target="_blank"
+                      className="text-blue-500"
+                    >
+                      OpenAI docs
+                    </a>
+                    .
+                  </Text>
+
+                  <SelectorFormField
+                    name="llm_model_version_override"
+                    options={llmOverrideOptions.map((llmOption) => {
+                      return {
+                        name: llmOption,
+                        value: llmOption,
+                      };
+                    })}
+                    includeDefault={true}
+                  />
+                </>
+              )}
+
+              <Divider />
+
               <SectionHeader>[Advanced] Retrieval Customization</SectionHeader>
 
               <TextFormField

web/src/app/admin/personas/[personaId]/page.tsx

@@ -6,13 +6,24 @@ import { DocumentSet } from "@/lib/types";
 import { BackButton } from "@/components/BackButton";
 import { Card, Title } from "@tremor/react";
 import { DeletePersonaButton } from "./DeletePersonaButton";
+import { InstantSSRAutoRefresh } from "@/components/SSRAutoRefresh";
 
 export default async function Page({
   params,
 }: {
   params: { personaId: string };
 }) {
-  const personaResponse = await fetchSS(`/persona/${params.personaId}`);
+  const [
+    personaResponse,
+    documentSetsResponse,
+    llmOverridesResponse,
+    defaultLLMResponse,
+  ] = await Promise.all([
+    fetchSS(`/persona/${params.personaId}`),
+    fetchSS("/manage/document-set"),
+    fetchSS("/persona-utils/list-available-models"),
+    fetchSS("/persona-utils/default-model"),
+  ]);
 
   if (!personaResponse.ok) {
     return (
@@ -23,8 +34,6 @@ export default async function Page({
     );
   }
 
-  const documentSetsResponse = await fetchSS("/manage/document-set");
-
   if (!documentSetsResponse.ok) {
     return (
       <ErrorCallout
@@ -34,18 +43,45 @@ export default async function Page({
     );
   }
 
+  if (!llmOverridesResponse.ok) {
+    return (
+      <ErrorCallout
+        errorTitle="Something went wrong :("
+        errorMsg={`Failed to fetch LLM override options - ${await documentSetsResponse.text()}`}
+      />
+    );
+  }
+
+  if (!defaultLLMResponse.ok) {
+    return (
+      <ErrorCallout
+        errorTitle="Something went wrong :("
+        errorMsg={`Failed to fetch default LLM - ${await documentSetsResponse.text()}`}
+      />
+    );
+  }
+
   const documentSets = (await documentSetsResponse.json()) as DocumentSet[];
   const persona = (await personaResponse.json()) as Persona;
+  const llmOverrideOptions = (await llmOverridesResponse.json()) as string[];
+  const defaultLLM = (await defaultLLMResponse.json()) as string;
 
   return (
     <div className="dark">
+      <InstantSSRAutoRefresh />
+
       <BackButton />
       <div className="pb-2 mb-4 flex">
         <h1 className="text-3xl font-bold pl-2">Edit Persona</h1>
       </div>
 
       <Card>
-        <PersonaEditor existingPersona={persona} documentSets={documentSets} />
+        <PersonaEditor
+          existingPersona={persona}
+          documentSets={documentSets}
+          llmOverrideOptions={llmOverrideOptions}
+          defaultLLM={defaultLLM}
+        />
       </Card>
 
       <div className="mt-12">

web/src/app/admin/personas/interfaces.ts

@@ -9,4 +9,5 @@ export interface Persona {
   document_sets: DocumentSet[];
   num_chunks?: number;
   apply_llm_relevance_filter?: boolean;
+  llm_model_version_override?: string;
 }

web/src/app/admin/personas/new/page.tsx

@@ -8,7 +8,12 @@ import { Card } from "@tremor/react";
 import { AdminPageTitle } from "@/components/admin/Title";
 
 export default async function Page() {
-  const documentSetsResponse = await fetchSS("/manage/document-set");
+  const [documentSetsResponse, llmOverridesResponse, defaultLLMResponse] =
+    await Promise.all([
+      fetchSS("/manage/document-set"),
+      fetchSS("/persona-utils/list-available-models"),
+      fetchSS("/persona-utils/default-model"),
+    ]);
 
   if (!documentSetsResponse.ok) {
     return (
@@ -18,9 +23,28 @@ export default async function Page() {
       />
     );
   }
-
   const documentSets = (await documentSetsResponse.json()) as DocumentSet[];
 
+  if (!llmOverridesResponse.ok) {
+    return (
+      <ErrorCallout
+        errorTitle="Something went wrong :("
+        errorMsg={`Failed to fetch LLM override options - ${await documentSetsResponse.text()}`}
+      />
+    );
+  }
+  const llmOverrideOptions = (await llmOverridesResponse.json()) as string[];
+
+  if (!defaultLLMResponse.ok) {
+    return (
+      <ErrorCallout
+        errorTitle="Something went wrong :("
+        errorMsg={`Failed to fetch default LLM - ${await documentSetsResponse.text()}`}
+      />
+    );
+  }
+  const defaultLLM = (await defaultLLMResponse.json()) as string;
+
   return (
     <div className="dark">
       <BackButton />
@@ -31,7 +55,11 @@ export default async function Page() {
       />
 
       <Card>
-        <PersonaEditor documentSets={documentSets} />
+        <PersonaEditor
+          documentSets={documentSets}
+          llmOverrideOptions={llmOverrideOptions}
+          defaultLLM={defaultLLM}
+        />
       </Card>
     </div>
   );