Merge branch 'llm_model_selector' into 'master'

feat (ui): Add LLM model selector, remove model selection from chat settings & small UI improvements on small screens

See merge request postgres-ai/database-lab!980

Author: Bogdan Tsechoev

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

@@ -31,7 +31,7 @@ const useStyles = makeStyles<Theme, ChatsListProps>((theme) => ({
       [theme.breakpoints.down('sm')]: {
         height: '100vh!important',
         marginTop: '0!important',
-        width: 320,
+        width: 'min(100%, 360px)',
         zIndex: 9999
       },
       '& > ul': {
@@ -57,6 +57,11 @@ const useStyles = makeStyles<Theme, ChatsListProps>((theme) => ({
       background: 'white',
       [theme.breakpoints.down('sm')]: {
         padding: 0
+      },
+      "@media (max-width: 960px)": {
+        "& .MuiFormControl-root": {
+          display: "none" // Hide model selector in chats list
+        }
       }
     },
     listItemLink: {

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

@@ -0,0 +1,81 @@
+import React from 'react';
+import { FormControl, Select, MenuItem, Typography, InputLabel, useMediaQuery } from "@mui/material";
+import { SelectChangeEvent } from "@mui/material/Select";
+
+import { useAiBot } from "../hooks";
+
+export const ModelSelector = () => {
+  const { aiModel, aiModels, setAiModel } = useAiBot();
+  const isSmallScreen = useMediaQuery("(max-width: 960px)");
+
+  const handleChange = (event: SelectChangeEvent<string | null>) => {
+    const [vendor, name] = (event.target.value as string).split("/");
+    const model = aiModels?.find(
+      (model) => model.vendor === vendor && model.name === name
+    );
+    if (model) setAiModel(model);
+  };
+
+  const truncateText = (text: string, maxLength: number) => {
+    return text.length > maxLength ? text.substring(0, maxLength) + "..." : text;
+  };
+
+  return (
+    <FormControl
+      variant="outlined"
+      size="small"
+      sx={{ minWidth: isSmallScreen ? 120 : 200 }}
+    >
+      <Select
+        labelId="model-select-label"
+        id="model-select"
+        value={aiModel ? `${aiModel.vendor}/${aiModel.name}` : ""}
+        onChange={handleChange}
+        displayEmpty
+        inputProps={{
+          "aria-describedby": "Select the AI model to be used for generating responses. Different models may vary in performance. Choose the one that best suits your needs.",
+          sx: {
+            height: "32px",
+            fontSize: "0.875rem",
+            padding: isSmallScreen ? "8px 24px 8px 8px!important" : "8px 14px",
+          },
+        }}
+        sx={{ height: "32px" }}
+        renderValue={(selected) => {
+          if (!selected) return "Select Model";
+          const [vendor, name] = selected.split("/");
+          return truncateText(`${vendor}/${name}`, isSmallScreen ? 20 : 30);
+        }}
+      >
+        {aiModels &&
+          aiModels.map((model) => (
+            <MenuItem
+              key={`${model.vendor}/${model.name}`}
+              value={`${model.vendor}/${model.name}`}
+              title={`${model.vendor}/${model.name}`}
+              sx={{
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "flex-start"
+              }}
+            >
+              <span>{truncateText(`${model.vendor}/${model.name}`, isSmallScreen ? 33 : 40)}</span>
+              {model.comment && (
+                <Typography
+                  variant="body2"
+                  color="textSecondary"
+                  sx={{
+                    fontSize: "0.7rem",
+                    color: "rgba(0, 0, 0, 0.6)",
+                  }}
+                  aria-hidden="true"
+                >
+                  {model.comment}
+                </Typography>
+              )}
+            </MenuItem>
+          ))}
+      </Select>
+    </FormControl>
+  );
+};

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

@@ -15,7 +15,7 @@ import {
   makeStyles,
   Radio,
   RadioGroup,
-  TextField,
+  TextField, Theme,
   Typography,
 } from '@material-ui/core'
 import MuiDialogTitle from '@material-ui/core/DialogTitle'
@@ -30,6 +30,8 @@ import { AiModel } from "../../../types/api/entities/bot";
 import settings from "../../../utils/settings";
 import { Link } from "@postgres.ai/shared/components/Link2";
 import { ExternalIcon } from "@postgres.ai/shared/icons/External";
+import Divider from "@material-ui/core/Divider";
+import cn from "classnames";
 
 type DialogTitleProps = {
   id: string
@@ -123,35 +125,30 @@ const DialogActions = (props: { children: React.ReactNode }) => {
   )
 }
 
-const useDialogStyles = makeStyles(
-  () => ({
+const useDialogStyles = makeStyles<Theme>(
+  (theme) => ({
     textField: {
       ...styles.inputField,
       marginTop: '0px',
       width: 480,
+      [theme.breakpoints.down('sm')]: {
+
+      }
     },
     copyButton: {
       marginTop: '-3px',
       fontSize: '20px',
     },
-    dialog: {},
-    remark: {
-      fontSize: 12,
-      lineHeight: '12px',
-
-      paddingLeft: 20,
-      paddingBottom: 5,
-    },
-    remarkIcon: {
-      display: 'block',
-      height: '20px',
-      width: '22px',
-      float: 'left',
-      paddingTop: '5px',
-    },
     urlContainer: {
-      marginTop: 10,
-      paddingLeft: 22,
+      marginTop: 8,
+      paddingLeft: 20,
+      [theme.breakpoints.down('sm')]: {
+        padding: 0,
+        width: '100%',
+        '& .MuiTextField-root': {
+          maxWidth: 'calc(100% - 36px)'
+        }
+      },
     },
     radioGroup: {
       fontSize: 12,
@@ -170,16 +167,34 @@ const useDialogStyles = makeStyles(
         marginBottom: 0
       }
     },
+    unlockNoteDemo: {
+      paddingLeft: 20
+    },
     formControlLabel: {
       '& .Mui-disabled > *, & .Mui-disabled': {
         color: 'rgba(0, 0, 0, 0.6)'
+      },
+      [theme.breakpoints.down('sm')]: {
+        marginRight: 0,
+        alignItems: 'flex-start',
+        '&:first-child': {
+          marginTop: 6
+        }
+      },
+    },
+    formControlLabelRadio: {
+      [theme.breakpoints.down('sm')]: {
+        padding: '4px 9px'
       }
     },
     externalIcon: {
       width: 14,
       height: 14,
       marginLeft: 4,
       transform: 'translateY(2px)',
+    },
+    divider: {
+      margin: '12px 0'
     }
   }),
   { index: 1 },
@@ -295,8 +310,8 @@ export const SettingsDialog = (props: PublicChatDialogProps) => {
         <>
           <FormLabel component="legend">Visibility</FormLabel>
           <RadioGroup
-            aria-label="shareUrl"
-            name="shareUrl"
+            aria-label="Thread visibility"
+            name="threadVisibility"
             value={visibility}
             onChange={(event) => {
               setVisibility(event.target.value as Visibility)
@@ -306,20 +321,22 @@ export const SettingsDialog = (props: PublicChatDialogProps) => {
             <FormControlLabel
               value={Visibility.PUBLIC}
               className={classes.formControlLabel}
-              control={<Radio />}
+              control={<Radio className={classes.formControlLabelRadio} />}
               label={<><b>Public:</b> anyone can view chats, but only team members can respond</>}
+              aria-label="Public: anyone can view chats, but only team members can respond"
             />
             {visibility === Visibility.PUBLIC && threadId && (
               <div className={classes.urlContainer}>{urlField}</div>
             )}
             <FormControlLabel
               value={Visibility.PRIVATE}
               className={classes.formControlLabel}
-              control={<Radio />}
+              control={<Radio className={classes.formControlLabelRadio} />}
               label={<><b>Private:</b> chats are visible only to members of your organization</>}
+              aria-label="Private: chats are visible only to members of your organization"
               disabled={Boolean(isDemoOrg) || !isSubscriber}
             />
-            {Boolean(isDemoOrg) && <Typography className={classes.remark}>Private chats are not allowed in "Demo"</Typography>}
+            {Boolean(isDemoOrg) && <Typography className={cn(classes.unlockNote, classes.unlockNoteDemo)}>Private chats are not allowed in "Demo"</Typography>}
             {!Boolean(isDemoOrg) && !isSubscriber && <Typography variant="body2" className={classes.unlockNote}>
               Unlock private conversations by either:
               <ol>
@@ -339,29 +356,6 @@ export const SettingsDialog = (props: PublicChatDialogProps) => {
             </Typography>}
           </RadioGroup>
         </>
-        {aiModels && <>
-          <FormLabel component="legend">Model</FormLabel>
-          <RadioGroup
-            aria-label="model"
-            name="model"
-            value={`${model?.vendor}/${model?.name}`}
-            onChange={(event) => {
-              const selectedModel = aiModels?.find((model) => `${model.vendor}/${model.name}` === event.target.value)
-              setModel(selectedModel!)
-            }}
-            className={classes.radioGroup}
-          >
-            {aiModels.map((model) =>
-                <FormControlLabel
-                  key={`${model.vendor}/${model.name}`}
-                  value={`${model.vendor}/${model.name}`}
-                  control={<Radio />}
-                  label={`${model.name} ${model.comment ? model.comment : ''}`}
-                />
-              )
-            }
-          </RadioGroup>
-        </>}
       </DialogContent>
 
       <DialogActions>

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

@@ -7,6 +7,8 @@ import { theme } from "@postgres.ai/shared/styles/theme";
 import { permalinkLinkBuilder } from "../utils";
 import { useAiBot } from "../hooks";
 import DeveloperModeIcon from "@material-ui/icons/DeveloperMode";
+import { ModelSelector } from "../ModelSelector/ModelSelector";
+import { Skeleton } from "@mui/material";
 
 export type SettingsPanelProps = {
   onSettingsClick: () => void;
@@ -31,25 +33,14 @@ const useStyles = makeStyles((theme) => ({
       }
     },
     labelVisibility: {
-      marginLeft: '0.5rem',
+      marginRight: '0.5rem',
       [theme.breakpoints.down('sm')]: {
-        marginLeft: '0.25rem'
+        marginRight: '0.25rem'
       },
       '&:hover': {
         backgroundColor: colors.secondary1.main
       }
     },
-    labelModel: {
-      background: colors.secondary1.main,
-    },
-    labelModelInvalid: {
-      background: colors.state.error,
-      border: "none",
-      cursor: 'pointer',
-      '&:hover': {
-        backgroundColor: colors.primary.dark
-      }
-    },
     labelPrivate: {
       backgroundColor: colors.pgaiDarkGray,
     },
@@ -74,48 +65,33 @@ const useStyles = makeStyles((theme) => ({
 
 export const SettingsPanel = (props: SettingsPanelProps) => {
   const { onSettingsClick, onConsoleClick } = props;
+  const { loading } = useAiBot()
   const classes = useStyles();
   const matches = useMediaQuery(theme.breakpoints.down('sm'));
-  const { messages, chatVisibility, aiModel, aiModelsLoading } = useAiBot();
+  const { messages, chatVisibility, aiModelsLoading } = useAiBot();
   const permalinkId = useMemo(() => messages?.[0]?.id, [messages]);
 
-  let modelLabel;
-
-  if (aiModel) {
-    modelLabel = (
-      <span
-        className={cn(classes.label, classes.labelModel)}
-      >
-        {aiModel.name}
-      </span>
-    )
-  } else {
-    modelLabel = (
-      <button
-        className={cn(classes.label, classes.labelModelInvalid)}
-        onClick={onSettingsClick}
-      >
-        Model not set
-      </button>
-    )
-  }
-
   return (
     <>
-      {!aiModelsLoading && modelLabel}
-      {permalinkId && <a
-        href={permalinkId && chatVisibility === 'public' ? permalinkLinkBuilder(permalinkId) : ''}
-        className={cn(classes.label, classes.labelVisibility,
-          {
-            [classes.labelPrivate]: chatVisibility === 'private',
-            [classes.disabled]: chatVisibility === 'private' || !permalinkId
-          }
-        )}
-        target="_blank"
-        aria-disabled={chatVisibility === 'private' || !permalinkId}
-      >
-        <span>{chatVisibility}</span> thread
-      </a>}
+      {permalinkId && <>
+        {loading
+          ? <Skeleton variant="rectangular" className={cn(classes.label, classes.labelVisibility)} width={64} height={16} />
+          : <a
+              href={permalinkId && chatVisibility === 'public' ? permalinkLinkBuilder(permalinkId) : ''}
+              className={cn(classes.label, classes.labelVisibility,
+                {
+                  [classes.labelPrivate]: chatVisibility === 'private',
+                  [classes.disabled]: chatVisibility === 'private' || !permalinkId
+                }
+              )}
+              target="_blank"
+              aria-disabled={chatVisibility === 'private' || !permalinkId}
+            >
+              <span>{chatVisibility}</span> thread
+            </a>
+        }
+      </>}
+      {!aiModelsLoading && <ModelSelector />}
       <Button
         variant="outlined"
         onClick={onSettingsClick}

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

@@ -51,15 +51,21 @@ const useStyles = makeStyles(
       marginTop: -20,
       [theme.breakpoints.down('sm')]: {
         marginTop: -22
+      },
+      '@media (max-width: 370px)': {
+        '& > button': {
+          display: 'none' // hide settings and debug window buttons on smallest screens
+        }
       }
     },
     hiddenButtons: {
       width: 192,
       marginLeft: 52,
       [theme.breakpoints.down('sm')]: {
-        width: 'min(100%, 320px)',
+        //width: 'min(100%, 320px)',
+        width: 79,
         marginLeft: 'auto'
-      }
+      },
     },
     toggleListButton: {
       flex: '0 0 auto',
@@ -245,13 +251,13 @@ export const BotPage = (props: BotPageProps) => {
         onCreateNewChat={handleCreateNewChat}
         onClose={toggleChatsList}
         isDemoOrg={Boolean(isDemoOrg)}
-        withChatVisibilityButton={matches && Boolean(match.params.threadId)}
+        withChatVisibilityButton={matches}
         onSettingsClick={toggleSettingsDialog}
         onLinkClick={handleChatListLinkClick}
         onConsoleClick={handleOpenDebugConsole}
       />
       <Box className={classes.actions}>
-        {!matches &&
+        {
           <SettingsPanel
             onSettingsClick={toggleSettingsDialog}
             onConsoleClick={handleOpenDebugConsole}
@@ -261,7 +267,7 @@ export const BotPage = (props: BotPageProps) => {
             isOpen={isChatsListVisible}
             onClose={toggleChatsList}
             onCreateNewChat={handleCreateNewChat}
-            withChatVisibilityButton={matches && Boolean(match.params.threadId)}
+            withChatVisibilityButton={false}
             onSettingsClick={toggleSettingsDialog}
             onConsoleClick={handleOpenDebugConsole}
           />