@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
48 lines (47 loc) • 2.51 kB
JavaScript
import * as React from 'react';
import MdMenu from '../../../ui/menu/MdMenu';
import { useChatCoreSlots } from '../../../views/core/ChatSlotsContext';
import { SettingsIcon } from '../../../icons';
import { useObserverValue } from '../../../views/hooks/useObserverValue';
import { useChatContext } from '../../../views/core/ChatGlobalContext';
import Stack from '@mui/material/Stack';
import { useMobile } from '../../../ui/Responsive';
const ToolsSelect = ({ thread, isTyping }) => {
const [anchorEl, setAnchorEl] = React.useState(null);
const { toolsList, onToolChanged } = useChatContext();
const tool = useObserverValue(thread?.tool);
const activeTool = toolsList?.find((t) => t.type === tool);
const coreSlots = useChatCoreSlots();
const isMobile = useMobile();
const handleClose = () => setAnchorEl(null);
const toggleMenu = (event) => {
if (anchorEl) {
handleClose();
}
else {
setAnchorEl(event.currentTarget);
}
};
const handleSelect = (type) => {
const newValue = tool === type ? undefined : type;
if (thread)
thread.tool.value = newValue;
onToolChanged?.(newValue);
handleClose();
};
if (!toolsList?.length)
return null;
return (React.createElement(Stack, { direction: 'row', gap: 1, alignItems: 'center' },
React.createElement("div", null,
React.createElement(coreSlots.iconButton, { disabled: isTyping, onClick: toggleMenu },
React.createElement(SettingsIcon, null)),
React.createElement(MdMenu, { open: Boolean(anchorEl), anchorEl: anchorEl, anchorOrigin: {
vertical: 'top',
horizontal: 'left',
}, transformOrigin: {
vertical: 'top',
horizontal: 'left',
}, onClose: handleClose }, toolsList?.map(({ type, icon, label }) => (React.createElement(coreSlots.menuItem, { key: type, startIcon: icon, selected: type === tool, onClick: () => handleSelect(type) }, label))))),
activeTool ? (React.createElement(coreSlots.chip, { icon: activeTool.icon ? React.createElement(activeTool.icon, { fontSize: 'small' }) : undefined, label: (isMobile && activeTool.icon) ? undefined : (activeTool.chipLabel ?? activeTool.label), disabled: isTyping, onDelete: () => handleSelect(activeTool.type) })) : null));
};
export default ToolsSelect;