general-assistant
Version:
General Assistant components
68 lines (67 loc) • 6.95 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useTranslation } from 'react-i18next';
import { Bubble, Tag } from 'datastellar-chatui';
import { useState, useEffect, useContext } from 'react';
import { useStore } from 'zustand';
import StoreContext from '../_store/StoreContext';
import CardActions from '../CardActions/index';
import './index.css';
import { isArray, toLower } from 'lodash';
import Tooltip from '../Tooltips';
import classNames from 'classnames';
import { getFileName } from '../_utils/tools';
export default function MessageCard({ children, option, refs, isLastMsg, }) {
const { t } = useTranslation();
const dataStore = useContext(StoreContext);
const { MyHandlers, GlobalCtxs } = useStore(dataStore, (state) => ({
MyHandlers: state.MyHandlers,
GlobalCtxs: state.GlobalCtxs
}));
const { onQuickReplyClick, onActionClick } = MyHandlers;
const { _id, position, content, type, actions, files, isTyping } = option;
const { source, quickReplies, alwaysShowQuickReplies } = content;
const { inputRef } = refs;
const isLeft = position === 'left';
const showOrigin = isLeft;
const showQuick = isLeft;
const [showActions, setShowActions] = useState(false);
const [mySource, setMySource] = useState(source);
const [myQuickReplies, setMyQuickReplies] = useState(quickReplies);
const MyQuickReplyClick = (item, ctx) => typeof onQuickReplyClick === 'function' ? onQuickReplyClick(item, ctx) : item.name;
function sendMsg(v) {
if (inputRef.current) {
inputRef.current.focus();
inputRef.current.value = v;
}
}
function delayShowActions(fn) {
setTimeout(() => {
fn();
}, 200);
}
useEffect(() => {
setMySource(source);
}, [source]);
useEffect(() => {
setMyQuickReplies(quickReplies);
}, [quickReplies]);
const [hasActions] = useState(actions !== false);
const [isShowActions, setIsShowActions] = useState(false);
useEffect(() => {
setIsShowActions(hasActions && (isLastMsg || showActions));
}, [isLastMsg, showActions]);
const [isOriginFold, setIsOriginFold] = useState(false);
const [isFilesFold, setIsFilesFold] = useState(false);
return (_jsxs("div", { className: classNames('msg-main DS-GA-relative', isTyping ? 'msg-typing' : ''), children: [showOrigin && Array.isArray(mySource) && mySource.length > 0 && (_jsxs("div", { className: classNames('msg-origin DS-GA-w-fit DS-GA-max-w-full DS-GA-h-fit DS-GA-mb-2 DS-GA-pl-2', 'DS-GA-bg-transparent DS-GA-text-sm DS-GA-text-nowrap DS-GA-text-text-midd-9', 'DS-GA-flex DS-GA-items-start'), children: [_jsxs("div", { className: classNames(isOriginFold ? 'DS-GA-mb-1' : ''), children: [_jsx("span", { className: 'DS-GA-mr-1', children: t('origin') }), mySource.length > 1 && !isOriginFold && (_jsxs(Tag, { children: [mySource.length - 1, "+"] })), mySource.length > 1 && _jsx("i", { className: classNames('iconfont-assistant DS-GA-cursor-pointer DS-GA-text-xs hover:DS-GA-bg-theme-shal-2 DS-GA-rounded-lg DS-GA-ml-1 DS-GA-p-[2px]', isOriginFold ? 'icon-down DS-GA-bg-theme-shal-2' : 'icon-right'), onClick: () => setIsOriginFold(!isOriginFold) })] }), _jsx("div", { className: classNames('DS-GA-flex-1 DS-GA-flex DS-GA-justify-start DS-GA-gap-1 DS-GA-flex-col o-text DS-GA-pl-2'), children: mySource.map((item, index) => (_jsx("div", { className: classNames('DS-GA-w-full DS-GA-text-theme-deep-8 DS-GA-cursor-pointer', (!index || isOriginFold) ? '' : 'DS-GA-hidden'), children: typeof item === 'string' ? (_jsx(Tooltip, { title: item, children: _jsx("div", { className: 'o-text DS-GA-inline-block', children: item }) })) : item }, index))) })] })), isArray(files) && files.length > 0 && (_jsxs("div", { className: classNames('msg-origin DS-GA-w-fit DS-GA-max-w-full DS-GA-h-fit DS-GA-mb-2 DS-GA-pl-2', 'DS-GA-bg-transparent DS-GA-text-sm DS-GA-text-nowrap DS-GA-text-text-midd-9', 'DS-GA-flex DS-GA-items-start DS-GA-content-end'), children: [_jsxs("div", { className: classNames(isFilesFold ? 'DS-GA-mb-1' : ''), children: [_jsx("span", { className: 'DS-GA-mr-1', children: t('files') }), files.length > 1 && !isFilesFold && (_jsxs(Tag, { children: [files.length - 1, "+"] })), files.length > 1 && _jsx("i", { className: classNames('iconfont-assistant DS-GA-cursor-pointer DS-GA-text-xs hover:DS-GA-bg-theme-shal-2 DS-GA-rounded-lg DS-GA-ml-1 DS-GA-p-[2px]', isFilesFold ? 'icon-down DS-GA-bg-theme-shal-2' : 'icon-right'), onClick: () => setIsFilesFold(!isFilesFold) })] }), _jsx("div", { className: classNames('DS-GA-flex-1 DS-GA-flex DS-GA-justify-start DS-GA-gap-1 DS-GA-flex-col o-text DS-GA-pl-2'), children: files.map((item, index) => (_jsx("div", { className: classNames('DS-GA-w-full DS-GA-text-theme-deep-8 DS-GA-cursor-pointer', (!index || isFilesFold) ? '' : 'DS-GA-hidden'), children: typeof item === 'string' ? (_jsx(Tooltip, { title: item, children: _jsx("div", { className: 'o-text DS-GA-inline-block', children: getFileName(item) }) })) : item }, index))) })] })), _jsxs("div", { onMouseEnter: () => hasActions && delayShowActions(() => setShowActions(true)), onMouseLeave: () => hasActions && delayShowActions(() => setShowActions(false)), children: [_jsx(Bubble, { className: classNames('allowCite Bubble DS-GA-max-w-full md:DS-GA-max-w-none'), type: toLower(type), children: children }), hasActions && !isTyping && (_jsx(CardActions, { option: option, show: isShowActions, callbackClick: (acK) => {
if (typeof onActionClick === 'function')
onActionClick({ data: { key: acK, msg: option }, ctx: GlobalCtxs });
} }))] }), !isTyping && showQuick && (isLastMsg || alwaysShowQuickReplies) && isArray(myQuickReplies) && myQuickReplies.length > 0 && (_jsx("div", { className: classNames('DS-GA-w-fit DS-GA-max-w-full'), children: myQuickReplies.map((item, index) => {
return (_jsx("div", { className: 'DS-GA-w-fit DS-GA-max-w-full DS-GA-h-9 DS-GA-pl-2 DS-GA-pr-2 DS-GA-mt-2 DS-GA-rounded-md DS-GA-text-sm DS-GA-flex DS-GA-items-center DS-GA-bg-theme-shal-1 DS-GA-text-text-midd-9 DS-GA-cursor-pointer hover:DS-GA-bg-theme-shal-2', onClick: () => {
const _next = MyQuickReplyClick(item, GlobalCtxs);
if (_next === false)
return;
sendMsg(_next);
inputRef?.current?.handleSend?.();
}, children: _jsx(Tooltip, { title: item.name, className: '!DS-GA-whitespace-normal !DS-GA-max-w-full', children: _jsxs("div", { className: 'DS-GA-flex DS-GA-w-full', children: [_jsx("span", { className: 'DS-GA-max-w-[calc(100% - 28px)] o-text', children: item.name }), _jsx("i", { className: 'iconfont-assistant icon-go DS-GA-ml-3' })] }) }) }, index));
}) }))] }));
}