change model on change chat

Author: Bogdan Tsechoev

ui/packages/platform/src/pages/Bot/SettingsDialog/SettingsDialog.tsx

@@ -45,7 +45,7 @@ type PublicChatDialogProps = {
   onClose: () => void
   onSaveChanges: SaveChangesFunction
   isLoading: boolean
-  threadId: string
+  threadId: string | null
 }
 
 const useDialogTitleStyles = makeStyles(
@@ -241,6 +241,7 @@ export const SettingsDialog = (props: PublicChatDialogProps) => {
       aria-labelledby="customized-dialog-title"
       open={isOpen}
       className={classes.dialog}
+      fullWidth
     >
       <DialogTitle
         id="customized-dialog-title"
@@ -249,37 +250,39 @@ export const SettingsDialog = (props: PublicChatDialogProps) => {
         Chat Settings
       </DialogTitle>
       <DialogContent>
-        <FormLabel component="legend">Visibility</FormLabel>
-        <RadioGroup
-          aria-label="shareUrl"
-          name="shareUrl"
-          value={visibility}
-          onChange={(event) => {
-            setVisibility(event.target.value as Visibility)
-          }}
-          className={classes.radioLabel}
-        >
-          <FormControlLabel
-            value="private"
-            control={<Radio />}
-            label="Only members of the organization can view"
-          />
+        {threadId && <>
+          <FormLabel component="legend">Visibility</FormLabel>
+          <RadioGroup
+            aria-label="shareUrl"
+            name="shareUrl"
+            value={visibility}
+            onChange={(event) => {
+              setVisibility(event.target.value as Visibility)
+            }}
+            className={classes.radioLabel}
+          >
+            <FormControlLabel
+              value="private"
+              control={<Radio />}
+              label="Only members of the organization can view"
+            />
 
-          <FormControlLabel
-            value="public"
-            control={<Radio />}
-            label="Anyone with a special link and members of the organization can view"
-          />
-        </RadioGroup>
-        {/*{shareUrl.remark && (
-            <Typography className={classes.remark}>
-              <span className={classes.remarkIcon}>{icons.warningIcon}</span>
-              {shareUrl.remark}
-            </Typography>
-          )}*/}
-        {visibility && (
-            <div className={classes.urlContainer}>{urlField}</div>
-          )}
+            <FormControlLabel
+              value="public"
+              control={<Radio />}
+              label="Anyone with a special link and members of the organization can view"
+            />
+          </RadioGroup>
+          {/*{shareUrl.remark && (
+              <Typography className={classes.remark}>
+                <span className={classes.remarkIcon}>{icons.warningIcon}</span>
+                {shareUrl.remark}
+              </Typography>
+            )}*/}
+          {visibility && (
+              <div className={classes.urlContainer}>{urlField}</div>
+            )}
+        </>}
         <FormLabel component="legend">Model</FormLabel>
         <RadioGroup
           aria-label="model"

ui/packages/platform/src/pages/Bot/SettingsWithLabel/SettingsWithLabel.tsx

@@ -55,14 +55,14 @@ export const SettingsWithLabel = (props: SettingsWithLabelProps) => {
   const matches = useMediaQuery(theme.breakpoints.down('sm'));
   return (
     <>
-      <a
+    {permalinkId && <a
         href={permalinkId && chatVisibility === 'public' ? permalinkLinkBuilder(permalinkId) : ''}
         className={cn(classes.label, {[classes.labelPrivate]: chatVisibility === 'private', [classes.disabled]: chatVisibility === 'private' || !permalinkId})}
         target="_blank"
         aria-disabled={chatVisibility === 'private' || !permalinkId}
       >
         This thread is {chatVisibility}
-      </a>
+      </a>}
       <Button
         variant="outlined"
         onClick={onSettingsClick}

ui/packages/platform/src/pages/Bot/hooks.ts

@@ -14,12 +14,15 @@ import {getChats} from "api/bot/getChats";
 import {useAlertSnackbar} from "@postgres.ai/shared/components/AlertSnackbar/useAlertSnackbar";
 import {localStorage} from "../../helpers/localStorage";
 import { makeChatPublic } from "../../api/bot/makeChatPublic";
+import { aiModelBuilder } from "./utils";
 
 
 const WS_URL = process.env.REACT_APP_WS_URL || '';
 
 export type Model = 'gpt' | 'gemini'
 
+export const DEFAULT_MODEL: Model = 'gemini'
+
 type ErrorType = {
   code?: number;
   message: string;
@@ -64,7 +67,7 @@ export const useAiBot = (args: UseAiBotArgs): UseAiBotReturnType => {
   const [error, setError] = useState<ErrorType | null>(null);
   const [wsLoading, setWsLoading] = useState<boolean>(false);
   const [isChangeVisibilityLoading, setIsChangeVisibilityLoading] = useState<boolean>(false);
-  const [model, setModel] = useState<Model>('gemini');
+  const [model, setModel] = useState<Model>(DEFAULT_MODEL);
 
   const token = localStorage.getAuthToken()
 
@@ -141,6 +144,7 @@ export const useAiBot = (args: UseAiBotArgs): UseAiBotReturnType => {
         subscribe(threadId)
         if (response && response.length > 0) {
           setMessages(response);
+          setModel(aiModelBuilder(response?.[response.length - 1]?.ai_model || ''))
         } else {
           if (onChatLoadingError) onChatLoadingError();
           setError({
@@ -235,6 +239,7 @@ export const useAiBot = (args: UseAiBotArgs): UseAiBotReturnType => {
 
   const clearChat = () => {
     setMessages(null);
+    setModel(DEFAULT_MODEL);
   }
 
   const changeChatVisibility = async (threadId: string, isPublic: boolean) => {

ui/packages/platform/src/pages/Bot/index.tsx

@@ -114,7 +114,7 @@ export const BotPage = (props: BotPageProps) => {
   const matches = useMediaQuery(theme.breakpoints.down('sm'));
 
   const [isChatsListVisible, setChatsListVisible] = useState(window?.innerWidth > 640);
-  const [isVisibilityDialogVisible, setVisibilityDialogVisible] = useState(false);
+  const [isSettingsDialogVisible, setSettingsDialogVisible] = useState(false);
   const [chatVisibility, setChatVisibility] = useState<'public' | 'private'>('public');
 
   const history = useHistory();
@@ -139,8 +139,8 @@ export const BotPage = (props: BotPageProps) => {
     setChatsListVisible((prevState) => !prevState)
   }
 
-  const toggleVisibilityDialog = () => {
-    setVisibilityDialogVisible((prevState) => !prevState)
+  const toggleSettingsDialog = () => {
+    setSettingsDialogVisible((prevState) => !prevState)
   }
 
   const handleSendMessage = async (message: string) => {
@@ -174,6 +174,7 @@ export const BotPage = (props: BotPageProps) => {
     if (_visibility !== chatVisibility) {
       handleSaveChatVisibility( _visibility === 'public')
     }
+    toggleSettingsDialog();
   }
 
   const handleChatListLinkClick = (targetThreadId: string) => {
@@ -217,15 +218,15 @@ export const BotPage = (props: BotPageProps) => {
 
   return (
     <>
-      {match.params.threadId && <SettingsDialog
+      <SettingsDialog
         defaultVisibility={chatVisibility}
         defaultModel={model}
-        isOpen={isVisibilityDialogVisible}
+        isOpen={isSettingsDialogVisible}
         isLoading={isChangeVisibilityLoading}
-        onClose={toggleVisibilityDialog}
+        onClose={toggleSettingsDialog}
         onSaveChanges={handleSaveSettings}
-        threadId={match.params.threadId}
-      />}
+        threadId={match.params.threadId || null}
+      />
       <ChatsList
         isOpen={isChatsListVisible}
         onCreateNewChat={handleCreateNewChat}
@@ -234,16 +235,16 @@ export const BotPage = (props: BotPageProps) => {
         chatsList={chatsList}
         loading={chatsListLoading}
         withChatVisibilityButton={matches && Boolean(match.params.threadId)}
-        onChatVisibilityClick={toggleVisibilityDialog}
+        onChatVisibilityClick={toggleSettingsDialog}
         currentVisibility={chatVisibility}
         onLinkClick={handleChatListLinkClick}
         permalinkId={messages?.[0]?.id}
       />
       <Box className={classes.actions}>
-        {match.params.threadId && !matches &&
+        {!matches &&
           <SettingsWithLabel
             chatVisibility={chatVisibility}
-            onSettingsClick={toggleVisibilityDialog}
+            onSettingsClick={toggleSettingsDialog}
             permalinkId={messages?.[0]?.id}
           />}
         <Box className={classes.hiddenButtons}>
@@ -252,7 +253,7 @@ export const BotPage = (props: BotPageProps) => {
             onClose={toggleChatsList}
             onCreateNewChat={handleCreateNewChat}
             withChatVisibilityButton={matches && Boolean(match.params.threadId)}
-            onChatVisibilityClick={toggleVisibilityDialog}
+            onChatVisibilityClick={toggleSettingsDialog}
             currentVisibility={chatVisibility}
             permalinkId={messages?.[0]?.id}
           />

ui/packages/platform/src/pages/Bot/utils.ts

@@ -6,9 +6,15 @@
  */
 
 import { API_URL_PREFIX } from "../../config/env";
+import { DEFAULT_MODEL, Model } from "./hooks";
 
 export const permalinkLinkBuilder = (id: string): string => {
   const apiUrl = process.env.REACT_APP_API_URL_PREFIX || API_URL_PREFIX;
   const isV2API = /https?:\/\/.*v2\.postgres\.ai\b/.test(apiUrl);
   return `https://${isV2API ? 'v2.' : ''}postgres.ai/chats/${id}`;
-};
+};
+
+
+export const aiModelBuilder = (model: string): Model => {
+  return /oai|gpt/.test(model) ? "gpt" : /gemini|gcp/.test(model) ? "gemini" : DEFAULT_MODEL;
+}