562 lines
16 KiB
TypeScript
562 lines
16 KiB
TypeScript
|
/* eslint-disable max-lines */
|
|||
|
|
|
|||
|
|
import React, { useState, useEffect } from 'react';
|
|||
|
|
import { observer } from 'mobx-react-lite';
|
|||
|
|
import { CircularProgress, SxProps } from '@mui/material';
|
|||
|
|
import Box from '@mui/material/Box';
|
|||
|
|
import Tooltip, { TooltipProps, tooltipClasses } from '@mui/material/Tooltip';
|
|||
|
|
import { styled } from '@mui/material/styles';
|
|||
|
|
import Paper from '@mui/material/Paper';
|
|||
|
|
import InputBase from '@mui/material/InputBase';
|
|||
|
|
import IconButton from '@mui/material/IconButton';
|
|||
|
|
// import SendIcon from '@mui/icons-material/Send';
|
|||
|
|
import _ from 'lodash';
|
|||
|
|
// import { autorun } from 'mobx';
|
|||
|
|
// import {
|
|||
|
|
// fakeAgentScoreMap,
|
|||
|
|
// fakeAgentSelections,
|
|||
|
|
// fakeCurrentAgentSelection,
|
|||
|
|
// } from './data/fakeAgentAssignment';
|
|||
|
|
import CheckIcon from '@/icons/checkIcon';
|
|||
|
|
import AgentIcon from '@/components/AgentIcon';
|
|||
|
|
import { globalStorage } from '@/storage';
|
|||
|
|
import SendIcon from '@/icons/sendIcon';
|
|||
|
|
|
|||
|
|
const HtmlTooltip = styled(({ className, ...props }: TooltipProps) => (
|
|||
|
|
<Tooltip {...props} classes={{ popper: className }} />
|
|||
|
|
))(({ theme }) => ({
|
|||
|
|
[`& .${tooltipClasses.tooltip}`]: {
|
|||
|
|
backgroundColor: '#e7e7e7',
|
|||
|
|
color: 'rgba(0, 0, 0, 0.87)',
|
|||
|
|
width: 'fit-content',
|
|||
|
|
fontSize: theme.typography.pxToRem(12),
|
|||
|
|
border: '1px solid #dadde9',
|
|||
|
|
},
|
|||
|
|
}));
|
|||
|
|
const getHeatColor = (value: number) => {
|
|||
|
|
return `rgba(74, 156, 158,${value / 5})`;
|
|||
|
|
};
|
|||
|
|
const AgentScoreCell: React.FC<{
|
|||
|
|
data: { score: number; reason: string };
|
|||
|
|
}> = ({ data }) => {
|
|||
|
|
return (
|
|||
|
|
<HtmlTooltip
|
|||
|
|
title={
|
|||
|
|
<>
|
|||
|
|
<Box>Score Reason:</Box>
|
|||
|
|
<Box>{data.reason}</Box>
|
|||
|
|
</>
|
|||
|
|
}
|
|||
|
|
followCursor
|
|||
|
|
placement="right-start"
|
|||
|
|
>
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
width: '35px',
|
|||
|
|
height: '35px',
|
|||
|
|
backgroundColor: getHeatColor(data.score),
|
|||
|
|
display: 'flex',
|
|||
|
|
alignItems: 'center',
|
|||
|
|
justifyContent: 'center',
|
|||
|
|
fontSize: '14px',
|
|||
|
|
fontWeight: '200',
|
|||
|
|
fontStyle: 'italic',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{data.score}
|
|||
|
|
</Box>
|
|||
|
|
</HtmlTooltip>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const AspectCell: React.FC<{
|
|||
|
|
key?: string;
|
|||
|
|
aspect?: string;
|
|||
|
|
style?: SxProps;
|
|||
|
|
isSelected?: boolean;
|
|||
|
|
handleSelected?: (aspect: string) => void;
|
|||
|
|
}> = ({ key, aspect, style, isSelected, handleSelected }) => {
|
|||
|
|
const mystyle: SxProps = {
|
|||
|
|
width: '150px',
|
|||
|
|
height: '35px',
|
|||
|
|
position: 'sticky', // 使得这个Box成为sticky元素
|
|||
|
|
right: -1, // 0距离左侧，这将确保它卡在左侧
|
|||
|
|
backgroundColor: '#ffffff', // 防止滚动时格子被内容覆盖
|
|||
|
|
zIndex: 1, // 确保它在其他内容上方
|
|||
|
|
display: 'flex',
|
|||
|
|
alignItems: 'center',
|
|||
|
|
paddingLeft: '8px',
|
|||
|
|
fontSize: '14px',
|
|||
|
|
lineHeight: '1',
|
|||
|
|
borderBottom: '2px solid #ffffff',
|
|||
|
|
...style,
|
|||
|
|
};
|
|||
|
|
if (!aspect) {
|
|||
|
|
return <Box sx={mystyle} />;
|
|||
|
|
}
|
|||
|
|
return (
|
|||
|
|
<Box
|
|||
|
|
key={key}
|
|||
|
|
sx={{
|
|||
|
|
...mystyle,
|
|||
|
|
cursor: 'pointer',
|
|||
|
|
color: isSelected ? 'black' : '#ACACAC',
|
|||
|
|
textDecoration: isSelected ? 'underline' : 'none',
|
|||
|
|
textDecorationColor: '#43b2aa',
|
|||
|
|
textDecorationThickness: '1.5px',
|
|||
|
|
fontWeight: '300',
|
|||
|
|
fontSize: '14px',
|
|||
|
|
fontStyle: 'italic',
|
|||
|
|
}}
|
|||
|
|
onClick={() => {
|
|||
|
|
if (handleSelected) {
|
|||
|
|
handleSelected(aspect);
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{aspect || ''}
|
|||
|
|
</Box>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const EmotionInput: React.FC<{
|
|||
|
|
inputCallback: (arg0: string) => void;
|
|||
|
|
}> = ({ inputCallback }) => {
|
|||
|
|
const [inputValue, setInputValue] = useState('');
|
|||
|
|
const inputRef = React.useRef();
|
|||
|
|
|
|||
|
|
const handleInputChange = (event: any) => {
|
|||
|
|
setInputValue(event.target.value);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleButtonClick = () => {
|
|||
|
|
inputCallback(inputValue);
|
|||
|
|
setInputValue('');
|
|||
|
|
};
|
|||
|
|
return (
|
|||
|
|
<Paper
|
|||
|
|
sx={{
|
|||
|
|
p: '0px',
|
|||
|
|
display: 'flex',
|
|||
|
|
alignItems: 'center',
|
|||
|
|
width: 400,
|
|||
|
|
backgroundColor: 'rgb(0,0,0,0)',
|
|||
|
|
boxShadow: 'none',
|
|||
|
|
border: '2px solid #b0b0b0',
|
|||
|
|
borderRadius: '8px',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<InputBase
|
|||
|
|
sx={{ marginLeft: 1, flex: 1 }}
|
|||
|
|
placeholder="Aspect"
|
|||
|
|
value={inputValue}
|
|||
|
|
onChange={handleInputChange}
|
|||
|
|
ref={inputRef}
|
|||
|
|
/>
|
|||
|
|
<IconButton
|
|||
|
|
type="submit"
|
|||
|
|
sx={{
|
|||
|
|
color: 'primary',
|
|||
|
|
'&:hover': {
|
|||
|
|
color: 'primary.dark',
|
|||
|
|
},
|
|||
|
|
padding: '0px 6px',
|
|||
|
|
height: 'min-content',
|
|||
|
|
aspectRatio: '1 / 1',
|
|||
|
|
}}
|
|||
|
|
onClick={handleButtonClick}
|
|||
|
|
>
|
|||
|
|
<SendIcon color="#b6b6b6" />
|
|||
|
|
</IconButton>
|
|||
|
|
</Paper>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
const findSameSelectionId = (
|
|||
|
|
a: Record<
|
|||
|
|
string,
|
|||
|
|
{
|
|||
|
|
id: string;
|
|||
|
|
agents: string[];
|
|||
|
|
}
|
|||
|
|
>,
|
|||
|
|
b: Set<string>,
|
|||
|
|
) => {
|
|||
|
|
const sortedB = Array.from(b).slice().sort(); // 对 b 进行排序
|
|||
|
|
const bString = sortedB.join(',');
|
|||
|
|
|
|||
|
|
const akeys = Object.keys(a);
|
|||
|
|
for (const akey of akeys) {
|
|||
|
|
const sortedA = a[akey].agents.slice().sort(); // 对 a 中的每个数组进行排序
|
|||
|
|
if (sortedA.join(',') === bString) {
|
|||
|
|
return akey; // 找到相同数组则返回索引
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return undefined; // 未找到相同数组
|
|||
|
|
};
|
|||
|
|
interface IPlanModification {
|
|||
|
|
style?: SxProps;
|
|||
|
|
}
|
|||
|
|
export default observer(({ style = {} }: IPlanModification) => {
|
|||
|
|
// console.log(prop);
|
|||
|
|
const {
|
|||
|
|
agentMap,
|
|||
|
|
renderingAgentSelections,
|
|||
|
|
api: { agentsReady },
|
|||
|
|
} = globalStorage;
|
|||
|
|
|
|||
|
|
// autorun(() => {
|
|||
|
|
// console.log(renderingAgentSelections);
|
|||
|
|
// });
|
|||
|
|
|
|||
|
|
const [agentSelections, setAgentSelections] = React.useState<
|
|||
|
|
Record<
|
|||
|
|
string,
|
|||
|
|
{
|
|||
|
|
id: string;
|
|||
|
|
agents: string[];
|
|||
|
|
}
|
|||
|
|
>
|
|||
|
|
>({});
|
|||
|
|
const [currentAgentSelection, setCurrentSelection] = React.useState<
|
|||
|
|
string | undefined
|
|||
|
|
>();
|
|||
|
|
const [heatdata, setHeatdata] = React.useState<
|
|||
|
|
Record<
|
|||
|
|
string,
|
|||
|
|
Record<
|
|||
|
|
string,
|
|||
|
|
{
|
|||
|
|
score: number;
|
|||
|
|
reason: string;
|
|||
|
|
}
|
|||
|
|
>
|
|||
|
|
>
|
|||
|
|
>({});
|
|||
|
|
|
|||
|
|
const [aspectSelectedSet, setAspectSelectedSet] = React.useState(
|
|||
|
|
new Set<string>(),
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (renderingAgentSelections.current) {
|
|||
|
|
setAgentSelections(renderingAgentSelections.selections);
|
|||
|
|
setHeatdata(renderingAgentSelections.heatdata);
|
|||
|
|
setCurrentSelection(renderingAgentSelections.current);
|
|||
|
|
setAgentSelectedSet(
|
|||
|
|
new Set(
|
|||
|
|
renderingAgentSelections.selections[
|
|||
|
|
renderingAgentSelections.current
|
|||
|
|
].agents,
|
|||
|
|
),
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
}, [renderingAgentSelections]);
|
|||
|
|
|
|||
|
|
const handleAspectSelected = (aspect: string) => {
|
|||
|
|
const newSet = new Set(aspectSelectedSet);
|
|||
|
|
if (newSet.has(aspect)) {
|
|||
|
|
newSet.delete(aspect);
|
|||
|
|
} else {
|
|||
|
|
newSet.add(aspect);
|
|||
|
|
}
|
|||
|
|
setAspectSelectedSet(newSet);
|
|||
|
|
};
|
|||
|
|
const [agentSelectedSet, setAgentSelectedSet] = React.useState(
|
|||
|
|
new Set<string>(),
|
|||
|
|
);
|
|||
|
|
const handleAgentSelected = (agent: string) => {
|
|||
|
|
const newSet = new Set(agentSelectedSet);
|
|||
|
|
if (newSet.has(agent)) {
|
|||
|
|
newSet.delete(agent);
|
|||
|
|
} else {
|
|||
|
|
newSet.add(agent);
|
|||
|
|
}
|
|||
|
|
setAgentSelectedSet(newSet);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const [agentKeyList, setAgentKeyList] = useState<string[]>([]);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
// 计算平均分的函数
|
|||
|
|
function calculateAverageScore(agent: string) {
|
|||
|
|
const aspects = aspectSelectedSet.size
|
|||
|
|
? Array.from(aspectSelectedSet)
|
|||
|
|
: Object.keys(heatdata);
|
|||
|
|
const meanScore = _.mean(
|
|||
|
|
aspects.map(aspect => heatdata[aspect]?.[agent]?.score ?? 0),
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
return meanScore;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 对agentMap.keys()进行排序
|
|||
|
|
const newAgentKeyList = Array.from(agentMap.keys()).sort((a, b) => {
|
|||
|
|
const isSelectedA = agentSelectedSet.has(a);
|
|||
|
|
const isSelectedB = agentSelectedSet.has(b);
|
|||
|
|
|
|||
|
|
if (isSelectedA && !isSelectedB) {
|
|||
|
|
return -1;
|
|||
|
|
} else if (!isSelectedA && isSelectedB) {
|
|||
|
|
return 1;
|
|||
|
|
} else {
|
|||
|
|
const averageScoreA = calculateAverageScore(a);
|
|||
|
|
const averageScoreB = calculateAverageScore(b);
|
|||
|
|
|
|||
|
|
// 降序排序（平均分高的在前）
|
|||
|
|
return averageScoreB - averageScoreA;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
setAgentKeyList(newAgentKeyList);
|
|||
|
|
}, [agentMap, heatdata, aspectSelectedSet, agentSelectedSet]);
|
|||
|
|
|
|||
|
|
if (!agentsReady) {
|
|||
|
|
return <></>;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
position: 'relative',
|
|||
|
|
width: '100%',
|
|||
|
|
height: '100%',
|
|||
|
|
overflowY: 'hidden',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{globalStorage.api.agentAspectScoresGenerating && (
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
position: 'absolute',
|
|||
|
|
bottom: '10px',
|
|||
|
|
right: '20px',
|
|||
|
|
zIndex: 999,
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<CircularProgress size={40} />
|
|||
|
|
</Box>
|
|||
|
|
)}
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
display: 'flex',
|
|||
|
|
flexDirection: 'row',
|
|||
|
|
...style,
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{/* assignments */}
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
width: '20%',
|
|||
|
|
backgroundColor: 'white',
|
|||
|
|
padding: '8px 6px',
|
|||
|
|
overflowY: 'auto',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Box sx={{ marginBottom: '6px', fontWeight: '600' }}>Assignment</Box>
|
|||
|
|
<Box>
|
|||
|
|
{Object.keys(agentSelections).map(selectionId => (
|
|||
|
|
<Box
|
|||
|
|
key={`agentSelectionSet.${selectionId}`}
|
|||
|
|
sx={{
|
|||
|
|
border: (() => {
|
|||
|
|
if (selectionId === currentAgentSelection) {
|
|||
|
|
return '2px solid #508a87';
|
|||
|
|
}
|
|||
|
|
return '2px solid #afafaf';
|
|||
|
|
})(),
|
|||
|
|
borderRadius: '10px',
|
|||
|
|
margin: '4px 0px',
|
|||
|
|
padding: '4px 0px 4px 0px',
|
|||
|
|
backgroundColor: '#f6f6f6',
|
|||
|
|
cursor: 'pointer',
|
|||
|
|
display: 'flex',
|
|||
|
|
justifyContent: 'center', // 添加这一行
|
|||
|
|
alignItems: 'center', // 添加这一行
|
|||
|
|
flexWrap: 'wrap',
|
|||
|
|
}}
|
|||
|
|
onClick={() => {
|
|||
|
|
globalStorage.setCurrentAgentSelection(selectionId);
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{agentSelections[selectionId].agents.map(agentName => (
|
|||
|
|
<AgentIcon
|
|||
|
|
key={`${selectionId}.${agentName}`}
|
|||
|
|
name={agentMap.get(agentName)?.icon}
|
|||
|
|
style={{
|
|||
|
|
width: 'auto',
|
|||
|
|
height: '30px',
|
|||
|
|
marginRight: '-5px',
|
|||
|
|
userSelect: 'none',
|
|||
|
|
margin: '0px 0px',
|
|||
|
|
}}
|
|||
|
|
tooltipInfo={agentMap.get(agentName)}
|
|||
|
|
/>
|
|||
|
|
))}
|
|||
|
|
</Box>
|
|||
|
|
))}
|
|||
|
|
</Box>
|
|||
|
|
</Box>
|
|||
|
|
{/* comparison */}
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
width: '80%',
|
|||
|
|
backgroundColor: 'white',
|
|||
|
|
marginLeft: '4px',
|
|||
|
|
padding: '8px 6px',
|
|||
|
|
overflowY: 'auto',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Box sx={{ marginBottom: '4px', fontWeight: '600' }}>Comparison</Box>
|
|||
|
|
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
overflowX: 'auto',
|
|||
|
|
width: '-webkit-fill-available',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
display: 'grid',
|
|||
|
|
gridTemplateColumns: `repeat(${agentMap.size}, 35px) max-content`,
|
|||
|
|
alignItems: 'center',
|
|||
|
|
gridAutoFlow: 'column',
|
|||
|
|
gridTemplateRows: `35px repeat(${
|
|||
|
|
Object.keys(heatdata).length
|
|||
|
|
}, 35px)`, // 第一列设置为max-content，其余列为1fr
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{agentSelectedSet.size > 0 && (
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
gridColumn: `1 / ${1 + agentSelectedSet.size}`,
|
|||
|
|
gridRow: `1`,
|
|||
|
|
border: '2px dashed #508a87',
|
|||
|
|
borderRadius: '10px 10px 0px 10px',
|
|||
|
|
boxSizing: 'border-box',
|
|||
|
|
width: '100%',
|
|||
|
|
height: '100%',
|
|||
|
|
position: 'relative',
|
|||
|
|
pointerEvents: 'none',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<div
|
|||
|
|
style={{
|
|||
|
|
position: 'absolute',
|
|||
|
|
right: '-3px',
|
|||
|
|
bottom: '-3px',
|
|||
|
|
height: '50%',
|
|||
|
|
// width: '1.35px',
|
|||
|
|
aspectRatio: '1 / 1',
|
|||
|
|
backgroundColor: '#508a87',
|
|||
|
|
borderRadius: '10px 0px 0px 0px',
|
|||
|
|
pointerEvents: 'auto',
|
|||
|
|
display: 'flex',
|
|||
|
|
alignItems: 'center',
|
|||
|
|
justifyContent: 'center',
|
|||
|
|
cursor: 'pointer',
|
|||
|
|
}}
|
|||
|
|
onClick={() => {
|
|||
|
|
const findSelectionId = findSameSelectionId(
|
|||
|
|
agentSelections,
|
|||
|
|
agentSelectedSet,
|
|||
|
|
);
|
|||
|
|
if (findSelectionId) {
|
|||
|
|
globalStorage.setCurrentAgentSelection(findSelectionId);
|
|||
|
|
} else {
|
|||
|
|
globalStorage.addAgentSelection(
|
|||
|
|
Array.from(agentSelectedSet),
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<CheckIcon color="white" size="80%" />
|
|||
|
|
</div>
|
|||
|
|
</Box>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{agentKeyList.map((agentKey, agentIndex) => (
|
|||
|
|
<Box
|
|||
|
|
key={agentKey}
|
|||
|
|
sx={{
|
|||
|
|
gridColumn: `${agentIndex + 1}`,
|
|||
|
|
gridRow: `1 / ${2 + Object.keys(heatdata).length}`,
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Box
|
|||
|
|
key={agentKey}
|
|||
|
|
onClick={() => {
|
|||
|
|
handleAgentSelected(agentKey);
|
|||
|
|
}}
|
|||
|
|
style={{
|
|||
|
|
display: 'grid',
|
|||
|
|
placeItems: 'center',
|
|||
|
|
gridColumn: `${agentIndex + 1} / ${agentIndex + 2}`,
|
|||
|
|
gridRow: '1 / 2',
|
|||
|
|
height: '100%',
|
|||
|
|
width: '100%',
|
|||
|
|
padding: '0px 0px',
|
|||
|
|
cursor: 'pointer',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<AgentIcon
|
|||
|
|
key={`agentIcon.${agentKey}`}
|
|||
|
|
name={agentMap.get(agentKey)!.icon}
|
|||
|
|
style={{
|
|||
|
|
width: 'auto',
|
|||
|
|
height: '80%',
|
|||
|
|
userSelect: 'none',
|
|||
|
|
margin: '0px',
|
|||
|
|
}}
|
|||
|
|
tooltipInfo={agentMap.get(agentKey)}
|
|||
|
|
/>
|
|||
|
|
</Box>
|
|||
|
|
{Object.keys(heatdata).map(aspect => {
|
|||
|
|
return (
|
|||
|
|
<AgentScoreCell
|
|||
|
|
key={`${aspect}.${agentKey}`}
|
|||
|
|
data={
|
|||
|
|
heatdata[aspect][agentKey] || {
|
|||
|
|
reason: '',
|
|||
|
|
score: 0,
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
/>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</Box>
|
|||
|
|
))}
|
|||
|
|
|
|||
|
|
<AspectCell style={{ height: '100%' }} />
|
|||
|
|
{Object.keys(heatdata).map(aspect => (
|
|||
|
|
<AspectCell
|
|||
|
|
key={`aspect.${aspect}`}
|
|||
|
|
aspect={aspect}
|
|||
|
|
isSelected={aspectSelectedSet.has(aspect)}
|
|||
|
|
handleSelected={handleAspectSelected}
|
|||
|
|
style={{ height: '100%', fontSize: '12px' }}
|
|||
|
|
/>
|
|||
|
|
))}
|
|||
|
|
</Box>
|
|||
|
|
</Box>
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
display: 'flex',
|
|||
|
|
flexDirection: 'row',
|
|||
|
|
height: '35px',
|
|||
|
|
alignItems: 'center',
|
|||
|
|
marginTop: '8px',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<EmotionInput
|
|||
|
|
inputCallback={(arg0: string) => {
|
|||
|
|
globalStorage.addAgentSelectionAspects(arg0);
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
</Box>
|
|||
|
|
</Box>
|
|||
|
|
</Box>
|
|||
|
|
</Box>
|
|||
|
|
);
|
|||
|
|
// return <Box>hhh</Box>;
|
|||
|
|
});
|
|||
|
|
/* eslint-enable max-lines */
|