diff --git a/ui/packages/platform/src/pages/Bot/ChatsList/ChatsList.tsx b/ui/packages/platform/src/pages/Bot/ChatsList/ChatsList.tsx index 4d990e6a..54ea0fec 100644 --- a/ui/packages/platform/src/pages/Bot/ChatsList/ChatsList.tsx +++ b/ui/packages/platform/src/pages/Bot/ChatsList/ChatsList.tsx @@ -31,7 +31,7 @@ const useStyles = makeStyles((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) => ({ background: 'white', [theme.breakpoints.down('sm')]: { padding: 0 + }, + "@media (max-width: 960px)": { + "& .MuiFormControl-root": { + display: "none" // Hide model selector in chats list + } } }, listItemLink: { diff --git a/ui/packages/platform/src/pages/Bot/ModelSelector/ModelSelector.tsx b/ui/packages/platform/src/pages/Bot/ModelSelector/ModelSelector.tsx new file mode 100644 index 00000000..2b26eda0 --- /dev/null +++ b/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) => { + 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 ( + + + + ); +}; diff --git a/ui/packages/platform/src/pages/Bot/SettingsDialog/SettingsDialog.tsx b/ui/packages/platform/src/pages/Bot/SettingsDialog/SettingsDialog.tsx index d34957dc..6a5dcab4 100644 --- a/ui/packages/platform/src/pages/Bot/SettingsDialog/SettingsDialog.tsx +++ b/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) => ({ 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,9 +167,24 @@ 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: { @@ -180,6 +192,9 @@ const useDialogStyles = makeStyles( height: 14, marginLeft: 4, transform: 'translateY(2px)', + }, + divider: { + margin: '12px 0' } }), { index: 1 }, @@ -295,8 +310,8 @@ export const SettingsDialog = (props: PublicChatDialogProps) => { Visibility { setVisibility(event.target.value as Visibility) @@ -306,8 +321,9 @@ export const SettingsDialog = (props: PublicChatDialogProps) => { } + control={} label={Public: 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 && (
{urlField}
@@ -315,11 +331,12 @@ export const SettingsDialog = (props: PublicChatDialogProps) => { } + control={} label={Private: 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) && Private chats are not allowed in "Demo"} + {Boolean(isDemoOrg) && Private chats are not allowed in "Demo"} {!Boolean(isDemoOrg) && !isSubscriber && Unlock private conversations by either:
    @@ -339,29 +356,6 @@ export const SettingsDialog = (props: PublicChatDialogProps) => { } - {aiModels && - Model - { - const selectedModel = aiModels?.find((model) => `${model.vendor}/${model.name}` === event.target.value) - setModel(selectedModel!) - }} - className={classes.radioGroup} -> - {aiModels.map((model) => - } - label={`${model.name} ${model.comment ? model.comment : ''}`} - /> - ) - } - - } diff --git a/ui/packages/platform/src/pages/Bot/SettingsPanel/SettingsPanel.tsx b/ui/packages/platform/src/pages/Bot/SettingsPanel/SettingsPanel.tsx index b457841b..27bb931d 100644 --- a/ui/packages/platform/src/pages/Bot/SettingsPanel/SettingsPanel.tsx +++ b/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 = ( - - {aiModel.name} - - ) - } else { - modelLabel = ( - - ) - } - return ( - {!aiModelsLoading && modelLabel} - {permalinkId && - {chatVisibility} thread - } + {permalinkId && + {loading + ? + : + {chatVisibility} thread + + } + } + {!aiModelsLoading && }