@plteam/chat-ui
Version:
CUI Kit is a free and open-source library for creating AI assistant chat interfaces, built with React, Material UI, and TypeScript
59 lines (58 loc) • 2.62 kB
JavaScript
import * as React from 'react';
import { ArrowDropDown } from '../icons';
import MdMenu from '../ui/menu/MdMenu';
import { useObserverValue } from './hooks/useObserverValue';
import { useChatContext } from './core/ChatGlobalContext';
import { useChatSlots } from './core/ChatSlotsContext';
import Box from '@mui/material/Box';
import { styled } from '@mui/material/styles';
const BoxStyled = styled(Box)(({ theme }) => ({
position: 'sticky',
top: 16,
left: 16,
width: 'fit-content',
backgroundColor: theme.palette.background.paper,
borderRadius: 16,
}));
const AIModelSelect = () => {
const { aiModelList, openNewThreadOnModelChange, model, apiRef } = useChatContext();
const { slots, coreSlots, slotProps } = useChatSlots();
const currentThread = useObserverValue(model.currentThread);
const aiModel = useObserverValue(currentThread?.aiModel);
const activeModel = React.useMemo(() => aiModelList?.find((m) => m.model === aiModel), [aiModel]);
const [anchorEl, setAnchorEl] = React.useState(null);
const handleClose = () => setAnchorEl(null);
const toggleMenu = (event) => {
if (anchorEl) {
handleClose();
}
else {
setAnchorEl(event.currentTarget);
}
};
const handleSelect = (value) => {
if (openNewThreadOnModelChange) {
if (value.model !== aiModel) {
const thread = apiRef.current?.handleCreateNewThread?.();
if (thread) {
thread.aiModel = value.model;
apiRef.current?.openNewThread(thread);
}
}
}
else if (currentThread) {
currentThread.aiModel.value = value.model;
}
handleClose();
};
if (!aiModelList?.length)
return null;
return (React.createElement(BoxStyled, null,
React.createElement(slots.aiModelButton, { endIcon: React.createElement(ArrowDropDown, null), onClick: toggleMenu, ...slotProps.aiModelButton }, activeModel?.label),
React.createElement(MdMenu, { open: Boolean(anchorEl), anchorEl: anchorEl, anchorOrigin: {
vertical: 'bottom',
horizontal: 'left',
}, onClose: handleClose }, aiModelList?.map((m) => (React.createElement(coreSlots.listItemButton, { key: m.model, selected: m.model === aiModel, onClick: () => handleSelect(m) },
React.createElement(coreSlots.listItemText, { primary: m.label, secondary: m.description })))))));
};
export default AIModelSelect;