Skip to content

Commit f6fcec1

Browse files
author
Bogdan Tsechoev
committed
feat: change ai model
1 parent 978edf9 commit f6fcec1

File tree

8 files changed

+116
-42
lines changed

8 files changed

+116
-42
lines changed

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

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -453,20 +453,19 @@ 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;
467467
}
468-
469-
console.log('params', params)
468+
params.data = JSON.stringify(data)
470469

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

‎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/Messages/Message/Message.tsx

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,14 @@ type BaseMessageProps = {
1616
content?: string;
1717
name?: string;
1818
isLoading?: boolean;
19-
formattedTime?: string
19+
formattedTime?: string;
20+
aiModel?: string
2021
}
2122

2223
type AiMessageProps = BaseMessageProps & {
2324
isAi: true;
2425
content: string;
26+
aiModel: string
2527
}
2628

2729
type HumanMessageProps = BaseMessageProps & {
@@ -230,7 +232,8 @@ export const Message = React.memo((props: MessageProps) => {
230232
content,
231233
name,
232234
created_at,
233-
isLoading
235+
isLoading,
236+
aiModel
234237
} = props;
235238

236239
const [isDebugVisible, setDebugVisible] = useState(false);
@@ -305,12 +308,23 @@ export const Message = React.memo((props: MessageProps) => {
305308
debug info
306309
</button>
307310
</>}
311+
{
312+
aiModel && isAi && <>
313+
<span className={classes.messageInfo}>|</span>
314+
<span
315+
className={cn(classes.messageInfo)}
316+
title={aiModel}
317+
>
318+
{aiModel}
319+
</span>
320+
</>
321+
}
308322
</div>
309323
</div>
310324
<div>
311325
{isLoading
312326
? <div className={classes.markdown}>
313-
<div className={classes.loading}>
327+
<div className={classes.loading}>
314328
Thinking
315329
</div>
316330
</div>

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -248,7 +248,8 @@ export const Messages = (props: MessagesProps) => {
248248
display_name,
249249
slack_profile,
250250
created_at,
251-
content
251+
content,
252+
ai_model
252253
} = messages[idx];
253254
let name = 'You';
254255

@@ -275,11 +276,12 @@ export const Messages = (props: MessagesProps) => {
275276
created_at={created_at}
276277
content={content}
277278
formattedTime={formattedTime}
279+
aiModel={ai_model}
278280
/>
279281
)
280282
})}
281283
{isWaitingForAnswer &&
282-
<Message id={null} isLoading isAi={true}/>
284+
<Message id={null} isLoading isAi={true} />
283285
}
284286
</div>
285287
</div>

‎ui/packages/platform/src/pages/Bot/PublicChatDialog/PublicChatDialog.tsx renamed to ‎ui/packages/platform/src/pages/Bot/SettingsDialog/SettingsDialog.tsx

Lines changed: 48 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,12 @@ import { styles } from '@postgres.ai/shared/styles/styles'
2525
import { icons } from '@postgres.ai/shared/styles/icons'
2626
import { Spinner } from '@postgres.ai/shared/components/Spinner'
2727
import { colors } from "@postgres.ai/shared/styles/colors";
28+
import FormLabel from '@mui/material/FormLabel'
29+
import { Model } from '../hooks'
30+
31+
export type Visibility = 'public' | 'private';
32+
33+
export type SaveChangesFunction = (model: Model, visibility: Visibility) => void
2834

2935
type DialogTitleProps = {
3036
id: string
@@ -33,10 +39,11 @@ type DialogTitleProps = {
3339
}
3440

3541
type PublicChatDialogProps = {
36-
defaultValue: 'public' | 'private'
42+
defaultVisibility: Visibility
43+
defaultModel: Model
3744
isOpen: boolean
3845
onClose: () => void
39-
onSaveChanges: (value: boolean) => void
46+
onSaveChanges: SaveChangesFunction
4047
isLoading: boolean
4148
threadId: string
4249
}
@@ -158,10 +165,19 @@ const useDialogStyles = makeStyles(
158165
{ index: 1 },
159166
)
160167

161-
export const PublicChatDialog = (props: PublicChatDialogProps) => {
162-
const { onSaveChanges, defaultValue, onClose, isOpen, isLoading, threadId } = props;
168+
export const SettingsDialog = (props: PublicChatDialogProps) => {
169+
const {
170+
onSaveChanges,
171+
defaultVisibility,
172+
defaultModel,
173+
onClose,
174+
isOpen,
175+
isLoading,
176+
threadId
177+
} = props;
163178

164-
const [visibility, setVisibility] = useState(defaultValue ? "public" : "private");
179+
const [visibility, setVisibility] = useState<Visibility>(defaultVisibility);
180+
const [model, setModel] = useState<Model>(defaultModel)
165181

166182
const classes = useDialogStyles();
167183

@@ -174,9 +190,7 @@ export const PublicChatDialog = (props: PublicChatDialogProps) => {
174190
}
175191

176192
const handleSaveChanges = () => {
177-
if (defaultValue !== visibility) {
178-
onSaveChanges(visibility === 'public');
179-
}
193+
onSaveChanges(model, visibility)
180194
}
181195

182196
const urlField = (
@@ -223,15 +237,16 @@ export const PublicChatDialog = (props: PublicChatDialogProps) => {
223237
id="customized-dialog-title"
224238
onClose={onClose}
225239
>
226-
Public Chat
240+
Chat Settings
227241
</DialogTitle>
228242
<DialogContent>
243+
<FormLabel component="legend">Visibility</FormLabel>
229244
<RadioGroup
230245
aria-label="shareUrl"
231246
name="shareUrl"
232247
value={visibility}
233248
onChange={(event) => {
234-
setVisibility(event.target.value)
249+
setVisibility(event.target.value as Visibility)
235250
}}
236251
className={classes.radioLabel}
237252
>
@@ -256,7 +271,30 @@ export const PublicChatDialog = (props: PublicChatDialogProps) => {
256271
{visibility && (
257272
<div className={classes.urlContainer}>{urlField}</div>
258273
)}
274+
<FormLabel component="legend">Model</FormLabel>
275+
<RadioGroup
276+
aria-label="model"
277+
name="model"
278+
value={model}
279+
onChange={(event) => {
280+
setModel(event.target.value as Model)
281+
}}
282+
className={classes.radioLabel}
283+
>
284+
<FormControlLabel
285+
value="gemini"
286+
control={<Radio />}
287+
label="gemini-1.5-pro"
288+
/>
289+
290+
<FormControlLabel
291+
value="gpt"
292+
control={<Radio />}
293+
label="gpt-4-turbo"
294+
/>
295+
</RadioGroup>
259296
</DialogContent>
297+
260298
<DialogActions>
261299
<Button
262300
autoFocus

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

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
*--------------------------------------------------------------------------
66
*/
77

8-
import {useCallback, useEffect, useRef, useState} from "react";
8+
import { Dispatch, SetStateAction, useCallback, useEffect, useRef, useState } from "react";
99
import useWebSocket, {ReadyState} from "react-use-websocket";
1010
import { useLocation } from "react-router-dom";
1111
import {BotMessage} from "../../types/api/entities/bot";
@@ -18,13 +18,15 @@ import { makeChatPublic } from "../../api/bot/makeChatPublic";
1818

1919
const WS_URL = process.env.REACT_APP_WS_URL || '';
2020

21+
export type Model = 'gpt' | 'gemini'
22+
2123
type ErrorType = {
2224
code?: number;
2325
message: string;
2426
type?: 'connection' | 'chatNotFound';
2527
}
2628

27-
type sendMessageType = {
29+
type SendMessageType = {
2830
content: string;
2931
thread_id?: string | null;
3032
org_id?: number | null;
@@ -35,13 +37,15 @@ type UseAiBotReturnType = {
3537
messages: BotMessage[] | null;
3638
error: ErrorType | null;
3739
loading: boolean;
38-
sendMessage: (args: sendMessageType) => Promise<void>;
40+
sendMessage: (args: SendMessageType) => Promise<void>;
3941
clearChat: () => void;
4042
wsLoading: boolean;
4143
wsReadyState: ReadyState;
4244
changeChatVisibility: (threadId: string, isPublic: boolean) => void;
4345
isChangeVisibilityLoading: boolean;
44-
unsubscribe: (threadId: string) => void
46+
unsubscribe: (threadId: string) => void;
47+
model: Model,
48+
setModel: Dispatch<SetStateAction<Model>>
4549
}
4650

4751
type UseAiBotArgs = {
@@ -59,7 +63,8 @@ export const useAiBot = (args: UseAiBotArgs): UseAiBotReturnType => {
5963
const [isLoading, setLoading] = useState<boolean>(false);
6064
const [error, setError] = useState<ErrorType | null>(null);
6165
const [wsLoading, setWsLoading] = useState<boolean>(false);
62-
const [isChangeVisibilityLoading, setIsChangeVisibilityLoading] = useState<boolean>(false)
66+
const [isChangeVisibilityLoading, setIsChangeVisibilityLoading] = useState<boolean>(false);
67+
const [model, setModel] = useState<Model>('gemini');
6368

6469
const token = localStorage.getAuthToken()
6570

@@ -197,7 +202,7 @@ export const useAiBot = (args: UseAiBotArgs): UseAiBotReturnType => {
197202
};
198203
}, [readyState, threadId]);
199204

200-
const sendMessage = async ({content, thread_id, org_id, is_public}: sendMessageType) => {
205+
const sendMessage = async ({content, thread_id, org_id, is_public}: SendMessageType) => {
201206
setWsLoading(true)
202207
if (!thread_id) {
203208
setLoading(true)
@@ -215,7 +220,8 @@ export const useAiBot = (args: UseAiBotArgs): UseAiBotReturnType => {
215220
content,
216221
thread_id,
217222
org_id,
218-
is_public
223+
is_public,
224+
ai_model: model
219225
}
220226
}))
221227
setError(error)
@@ -294,7 +300,9 @@ export const useAiBot = (args: UseAiBotArgs): UseAiBotReturnType => {
294300
sendMessage,
295301
clearChat,
296302
messages,
297-
unsubscribe
303+
unsubscribe,
304+
model,
305+
setModel
298306
}
299307
}
300308

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

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,11 @@ import { Messages } from './Messages/Messages';
1717
import { Command } from './Command/Command';
1818
import { ChatsList } from "./ChatsList/ChatsList";
1919
import { BotWrapperProps } from "./BotWrapper";
20-
import { useBotChatsList, useAiBot } from "./hooks";
20+
import { useBotChatsList, useAiBot, Model } from "./hooks";
2121
import { usePrev } from "../../hooks/usePrev";
2222
import {HeaderButtons} from "./HeaderButtons/HeaderButtons";
2323
import settings from "../../utils/settings";
24-
import { PublicChatDialog } from "./PublicChatDialog/PublicChatDialog";
24+
import { SaveChangesFunction, SettingsDialog, Visibility } from "./SettingsDialog/SettingsDialog";
2525
import { theme } from "@postgres.ai/shared/styles/theme";
2626
import { colors } from "@postgres.ai/shared/styles/colors";
2727
import { SettingsWithLabel } from "./SettingsWithLabel/SettingsWithLabel";
@@ -103,7 +103,9 @@ export const BotPage = (props: BotPageProps) => {
103103
wsReadyState,
104104
isChangeVisibilityLoading,
105105
changeChatVisibility,
106-
unsubscribe
106+
unsubscribe,
107+
model,
108+
setModel
107109
} = useAiBot({
108110
threadId: match.params.threadId,
109111
});
@@ -165,6 +167,15 @@ export const BotPage = (props: BotPageProps) => {
165167
}
166168
}
167169

170+
const handleSaveSettings: SaveChangesFunction = ( _model, _visibility) => {
171+
if (_model !== model) {
172+
setModel(_model)
173+
}
174+
if (_visibility !== chatVisibility) {
175+
handleSaveChatVisibility( _visibility === 'public')
176+
}
177+
}
178+
168179
const handleChatListLinkClick = (targetThreadId: string) => {
169180
if (match.params.threadId && match.params.threadId !== targetThreadId) {
170181
unsubscribe(match.params.threadId)
@@ -206,12 +217,13 @@ export const BotPage = (props: BotPageProps) => {
206217

207218
return (
208219
<>
209-
{match.params.threadId && <PublicChatDialog
210-
defaultValue={chatVisibility}
220+
{match.params.threadId && <SettingsDialog
221+
defaultVisibility={chatVisibility}
222+
defaultModel={model}
211223
isOpen={isVisibilityDialogVisible}
212224
isLoading={isChangeVisibilityLoading}
213225
onClose={toggleVisibilityDialog}
214-
onSaveChanges={handleSaveChatVisibility}
226+
onSaveChanges={handleSaveSettings}
215227
threadId={match.params.threadId}
216228
/>}
217229
<ChatsList

0 commit comments

Comments
 (0)