Skip to content

Commit 99efca7

Browse files
bogdan-tsbogdan-ts
committed
Bot UI: allow configuring LLM model
1 parent 0030c97 commit 99efca7

File tree

14 files changed

+352
-113
lines changed

14 files changed

+352
-113
lines changed

‎ui/packages/platform/src/api/api.js‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -453,20 +453,21 @@ class Api {
453453

454454
updateAiBotSettings(token, orgId, orgData) {
455455
let params = {};
456+
let data = {};
456457
let headers = {
457458
Authorization: 'Bearer ' + token,
458459
prefer: 'return=representation'
459460
};
460461

461-
if (typeof orgData.custom_prompt !== 'undefined') {
462-
params.custom_prompt = orgData.custom_prompt;
463-
}
464-
462+
// if (typeof orgData.custom_prompt !== 'undefined') {
463+
// data.custom_prompt = orgData.custom_prompt;
464+
// }
465465
if (typeof orgData.model !== 'undefined') {
466-
params.model = orgData.model;
466+
data.ai_model = orgData.model;
467+
}
468+
params.data = {
469+
ai_bot: data
467470
}
468-
469-
console.log('params', params)
470471

471472
return this.patch(`${this.apiServer}/orgs?id=eq.` + orgId, params, {
472473
headers: headers

‎ui/packages/platform/src/api/bot/getAiModels.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import {request} from "../../helpers/request";
2+
import { AiModel } from "../../types/api/entities/bot";
3+
4+
export const getAiModels = async (): Promise<{ response: AiModel[] | null; error: Response | null }> => {
5+
const apiServer = process.env.REACT_APP_API_URL_PREFIX || '';
6+
7+
try {
8+
const response = await request(`${apiServer}/llm_models`, {
9+
method: 'GET',
10+
});
11+
12+
if (!response.ok) {
13+
return { response: null, error: response };
14+
}
15+
16+
const responseData: AiModel[] = await response.json();
17+
18+
return { response: responseData, error: null };
19+
20+
} catch (error) {
21+
return { response: null, error: error as Response };
22+
}
23+
}

ui/packages/platform/src/api/bot/makeChatPublic.ts renamed to ui/packages/platform/src/api/bot/updateChatVisibility.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,19 @@ type Req = {
66
is_public: boolean
77
}
88

9-
export const makeChatPublic = async (req: Req): Promise<{ response: BotMessage | null; error: Response | null }> => {
9+
export const updateChatVisibility = async (req: Req): Promise<{ response: BotMessage | null; error: Response | null }> => {
1010
const { thread_id, is_public } = req;
1111

1212
const apiServer = process.env.REACT_APP_API_URL_PREFIX || '';
1313

1414
try {
15-
const response = await request(`${apiServer}/chats_internal?thread_id=eq.${thread_id}`, {
15+
const response = await request(`${apiServer}/chats_auth?thread_id=eq.${thread_id}`, {
1616
method: 'PATCH',
1717
headers: {
1818
Prefer: 'return=representation'
1919
},
2020
body: JSON.stringify({
21-
is_public
21+
is_public,
2222
})
2323
});
2424

‎ui/packages/platform/src/components/BotSettingsForm/BotSettingsForm.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ interface BotSettingState {
5252
updateErrorFields: string[]
5353
data: {
5454
custom_prompt: string
55-
model: string
55+
ai_model: string
5656
}
5757
} | null
5858
} | null
@@ -81,7 +81,7 @@ class BotSettingsForm extends Component<BotSettingsFormWithStylesProps, BotSetti
8181
orgId: null,
8282
data: {
8383
custom_prompt: '',
84-
model: 'gemini-1.5-pro',
84+
ai_model: 'gemini-1.5-pro',
8585
}
8686
}
8787
}
@@ -120,10 +120,10 @@ class BotSettingsForm extends Component<BotSettingsFormWithStylesProps, BotSetti
120120
};
121121
/*if (data.data.custom_prompt !== this.state.custom_prompt) {
122122
params.custom_prompt = this.state.custom_prompt;
123-
}
124-
if (data.data.model !== this.state.model) {
125-
params.model = this.state.model;
126123
}*/
124+
if (data?.data?.ai_model !== this.state.model) {
125+
params.model = this.state.model;
126+
}
127127
Actions.updateAiBotSettings(auth.token, orgId, params)
128128
}
129129
}
@@ -213,7 +213,7 @@ class BotSettingsForm extends Component<BotSettingsFormWithStylesProps, BotSetti
213213
onChange={this.handleChangeModel}
214214
>
215215
<FormControlLabel value="gemini-1.5-pro" control={<Radio />} label="gemini-1.5-pro" />
216-
<FormControlLabel disabled value="gpt-4-turbo" control={<Radio />} label="gpt-4-turbo " />
216+
<FormControlLabel value="gpt-4-turbo" control={<Radio />} label="gpt-4-turbo " />
217217
<FormControlLabel disabled value="llama-3" control={<Radio />} label="Llama 3" />
218218
</RadioGroup>
219219
</FormControl>

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

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import { Spinner } from "@postgres.ai/shared/components/Spinner";
1919
import { HeaderButtons, HeaderButtonsProps } from "../HeaderButtons/HeaderButtons";
2020
import { BotMessage } from "../../../types/api/entities/bot";
2121
import { theme } from "@postgres.ai/shared/styles/theme";
22+
import { useAiBot } from "../hooks";
2223

2324

2425
const useStyles = makeStyles<Theme, ChatsListProps>((theme) => ({
@@ -30,7 +31,7 @@ const useStyles = makeStyles<Theme, ChatsListProps>((theme) => ({
3031
[theme.breakpoints.down('sm')]: {
3132
height: '100vh!important',
3233
marginTop: '0!important',
33-
width: 300,
34+
width: 320,
3435
zIndex: 9999
3536
},
3637
'& > ul': {
@@ -54,6 +55,9 @@ const useStyles = makeStyles<Theme, ChatsListProps>((theme) => ({
5455
},
5556
listSubheaderRoot: {
5657
background: 'white',
58+
[theme.breakpoints.down('sm')]: {
59+
padding: 0
60+
}
5761
},
5862
listItemLink: {
5963
fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
@@ -91,8 +95,6 @@ type ChatsListProps = {
9195
onCreateNewChat: () => void;
9296
onClose: () => void;
9397
isDemoOrg: boolean;
94-
loading: boolean;
95-
chatsList: BotMessage[] | null;
9698
onLinkClick?: (targetThreadId: string) => void;
9799
} & HeaderButtonsProps
98100

@@ -101,13 +103,14 @@ export const ChatsList = (props: ChatsListProps) => {
101103
isOpen,
102104
onCreateNewChat,
103105
onClose,
104-
chatsList,
105-
loading,
106106
withChatVisibilityButton,
107107
onSettingsClick,
108108
onLinkClick,
109109
onConsoleClick
110110
} = props;
111+
112+
const { chatsList, chatsListLoading: loading } = useAiBot();
113+
111114
const classes = useStyles(props);
112115
const params = useParams<{ org?: string, threadId?: string }>();
113116
const matches = useMediaQuery(theme.breakpoints.down('sm'));

‎ui/packages/platform/src/pages/Bot/DebugConsole/DebugConsole.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,12 @@ const useStyles = makeStyles(
1515
left: 'unset!important',
1616
height: '80vh',
1717
width: '80vw',
18+
[theme.breakpoints.down('sm')]: {
19+
right: 'unset!important',
20+
top: '0!important',
21+
height: '100vh',
22+
width: '100vw',
23+
}
1824
},
1925
paper: {
2026
width: '80vw',
@@ -23,6 +29,12 @@ const useStyles = makeStyles(
2329
transition: '.2s ease',
2430
'&:hover': {
2531
opacity: 1
32+
},
33+
[theme.breakpoints.down('sm')]: {
34+
opacity: 1,
35+
width: '100vw',
36+
height: '100vh',
37+
margin: '0'
2638
}
2739
},
2840
dialogTitle: {

‎ui/packages/platform/src/pages/Bot/HeaderButtons/HeaderButtons.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ const useStyles = makeStyles((theme) => ({
4444
minWidth: '2rem',
4545
height: '2rem',
4646
padding: 0,
47-
marginRight: '0.5rem',
47+
marginRight: '0.25rem',
4848
'& .MuiButton-startIcon': {
4949
margin: 0
5050
}

‎ui/packages/platform/src/pages/Bot/Messages/Message/Message.tsx‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,14 @@ type BaseMessageProps = {
1818
content?: string;
1919
name?: string;
2020
isLoading?: boolean;
21-
formattedTime?: string
21+
formattedTime?: string;
22+
aiModel?: string
2223
}
2324

2425
type AiMessageProps = BaseMessageProps & {
2526
isAi: true;
2627
content: string;
28+
aiModel: string
2729
}
2830

2931
type HumanMessageProps = BaseMessageProps & {
@@ -121,7 +123,7 @@ const useStyles = makeStyles(
121123
flexWrap: 'wrap',
122124
alignItems: 'baseline',
123125
'@media (max-width: 450px)': {
124-
height: '2.25rem',
126+
height: 'auto',
125127
}
126128
},
127129
additionalInfo: {
@@ -239,6 +241,7 @@ export const Message = React.memo((props: MessageProps) => {
239241
name,
240242
created_at,
241243
isLoading,
244+
aiModel
242245
} = props;
243246

244247
const [isDebugVisible, setDebugVisible] = useState(false);
@@ -315,12 +318,23 @@ export const Message = React.memo((props: MessageProps) => {
315318
debug info
316319
</button>
317320
</>}
321+
{
322+
aiModel && isAi && <>
323+
<span className={classes.messageInfo}>|</span>
324+
<span
325+
className={cn(classes.messageInfo)}
326+
title={aiModel}
327+
>
328+
{aiModel}
329+
</span>
330+
</>
331+
}
318332
</div>
319333
</div>
320334
<div>
321335
{isLoading
322336
? <div className={classes.markdown}>
323-
<div className={classes.loading}>
337+
<div className={classes.loading}>
324338
Thinking
325339
</div>
326340
</div>

‎ui/packages/platform/src/pages/Bot/Messages/Messages.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -244,6 +244,7 @@ export const Messages = React.memo(() => {
244244
slack_profile,
245245
created_at,
246246
content,
247+
ai_model
247248
} = message;
248249
let name = 'You';
249250

@@ -270,11 +271,12 @@ export const Messages = React.memo(() => {
270271
created_at={created_at}
271272
content={content}
272273
formattedTime={formattedTime}
274+
aiModel={ai_model}
273275
/>
274276
)
275277
})}
276278
{isWaitingForAnswer &&
277-
<Message id={null} isLoading isAi={true}/>
279+
<Message id={null} isLoading isAi={true} />
278280
}
279281
</div>
280282
</div>

0 commit comments

Comments
 (0)