general-assistant
Version:
General Assistant components
256 lines (255 loc) • 12 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { useTranslation } from 'react-i18next';
import cn from 'classnames';
import { useEffect, useState, useContext } from 'react';
import { useStore } from 'zustand';
import StoreContext from '../_store/StoreContext';
import { copyToClipboard, sendRequestWithConfig, showToast } from '../_utils/tools';
import './index.css';
import { compact, extend, get, map } from 'lodash';
import classNames from 'classnames';
import Tooltip from '../Tooltips';
import { FaQuoteLeft } from "react-icons/fa";
let controller = null;
export default function CardActions({ option, callbackClick, show, }) {
const { t } = useTranslation();
const dataStore = useContext(StoreContext);
const { getRequestConfig, GlobalCtxs, MyHandlers, broadFlag, broadActiveText, broadAudio: databroadAudio, changeBroadFlag, webApiBroad, getToolbarlist, setCitationInfo } = useStore(dataStore, (state) => ({
getRequestConfig: state.getRequestConfig,
GlobalCtxs: state.GlobalCtxs,
MyHandlers: state.MyHandlers,
broadFlag: state.broadFlag,
broadActiveText: state.broadActiveText,
broadAudio: state.broadAudio,
changeBroadFlag: state.changeBroadFlag,
webApiBroad: state.webApiBroad,
getToolbarlist: state.getToolbarlist,
setCitationInfo: state.setCitationInfo,
}));
const { timeout, method, headers, feedback, voice } = getRequestConfig();
const toolbarlist = getToolbarlist();
const { position, type, content, _id } = option;
const { getMsgActionOptions, onFeedback, onBroad } = MyHandlers;
const MyOnFeedback = (options) => (typeof onFeedback === 'function' ? onFeedback(options) : { next: true });
const MyOnBroad = (options) => (typeof onBroad === 'function' ? onBroad(options) : { next: true });
function openToast(_t) {
showToast(t(_t));
}
function broadAudio(arg1, arg2) {
return databroadAudio(openToast, arg1, arg2);
}
function getShowText(_opt) {
const { content } = _opt;
const { data } = content;
const _showText = typeof data === 'string' ? data : Array.isArray(data) ? data.map(e => e.content.data).join('\n\n') : '';
return _showText;
}
function broadChange(ev) {
ev.stopPropagation && ev.stopPropagation();
ev.defaultPrevented && ev.defaultPrevented();
if (typeof onBroad !== 'function' && typeof voice !== 'function') {
webApiBroad(openToast, getShowText(option));
return;
}
broadAudio(getShowText(option));
}
async function citeClick() {
if (typeof setCitationInfo === 'function') {
let _opt = { _id, originData: option };
if (['Text', 'System'].includes(type))
_opt = Object.assign(_opt, { snapshoot: content.data });
setCitationInfo(_opt);
}
}
const [repel, setRepel] = useState('');
const defaultIcons = [
{
key: 'copy',
icon: _jsx("span", { className: 'iconfont-assistant icon-copy' }),
alt: 'actionCopy',
async click(ev, _opt) {
const iconElem = ev.currentTarget.querySelector('.iconfont-assistant');
const _allowCopyData = getShowText(_opt);
const _isSuccess = await copyToClipboard(_allowCopyData);
const { classList } = iconElem;
classList.remove('icon-copy');
classList.add(_isSuccess ? 'active' : 'failed');
classList.add(_isSuccess ? 'icon-copy-succeed' : 'icon-del');
setTimeout(() => {
classList.remove(_isSuccess ? 'icon-copy-succeed' : 'icon-del');
classList.add('icon-copy');
classList.remove(_isSuccess ? 'active' : 'failed');
}, 3000);
},
},
{
key: 'broad',
icon: _jsx("span", { className: 'iconfont-assistant icon-bobao' }),
alt: 'actionBroad',
async click(ev, _opt) {
ev.stopPropagation && ev.stopPropagation();
ev.defaultPrevented && ev.defaultPrevented();
const _allowBroadData = getShowText(_opt);
if (typeof onBroad !== 'function' && typeof voice !== 'function') {
webApiBroad(openToast, _allowBroadData);
return;
}
const _find = broadAudio(_allowBroadData);
if (_find)
return;
const _opts = { data: { text: _allowBroadData }, ctx: GlobalCtxs };
const _flag = await MyOnBroad(_opts);
if (!_flag.next) {
if (_flag.succeed && _flag.data) {
broadAudio(_allowBroadData, _flag.data);
}
else {
changeBroadFlag('bobao');
}
return;
}
if (typeof voice !== 'function') {
showToast(t('missKey'));
changeBroadFlag('bobao');
return;
}
const _reqConfig = voice(_opts);
controller = new AbortController();
sendRequestWithConfig({
commonOpt: { timeout, method, headers },
parameter: _reqConfig,
isFecth: _reqConfig.body?.get('streaming') === 'true',
controller,
onResponse(_blob) {
console.log('voice onResponse', _blob);
broadAudio(_allowBroadData, _blob);
},
onCatch(err) {
console.log('voice onCatch', err);
showToast(err);
},
onFinally() {
console.log('voice onFinally');
},
});
},
},
{
key: 'likes',
icon: _jsx("span", { className: classNames('iconfont-assistant icon-zan', repel === 'likes' ? 'active' : '') }),
alt: 'actionLike',
async click(ev, _opt) {
const _sta = repel === 'likes' ? '' : 'likes';
const _opts = { data: { msg: _opt, likes: _sta === 'likes' }, ctx: GlobalCtxs };
const _flag = MyOnFeedback(_opts);
if (!_flag.next) {
if (_flag.succeed)
setRepel(_sta);
return;
}
if (typeof feedback !== 'function') {
showToast(t('missKey'));
return;
}
const _reqConfig = feedback(_opts);
sendRequestWithConfig({
commonOpt: { timeout, method, headers },
parameter: _reqConfig,
isFecth: false,
controller: null,
onResponse(boo) {
console.log('likes onResponse', boo);
if (!boo)
return;
setRepel(_sta);
},
onCatch(err) {
console.log('likes onCatch', err);
},
onFinally() {
console.log('likes onFinally');
},
});
},
},
{
key: 'dislikes',
icon: _jsx("span", { className: classNames('iconfont-assistant icon-cai', repel === 'dislikes' ? 'high' : '') }),
alt: 'actionDislike',
async click(ev, _opt) {
const _sta = repel === 'dislikes' ? '' : 'dislikes';
const _opts = { data: { msg: _opt, dislikes: _sta === 'dislikes' }, ctx: GlobalCtxs };
const _flag = MyOnFeedback(_opts);
if (!_flag.next) {
if (_flag.succeed)
setRepel(_sta);
return;
}
if (typeof feedback !== 'function') {
showToast(t('missKey'));
return;
}
const _reqConfig = feedback(_opts);
sendRequestWithConfig({
commonOpt: { timeout, method, headers },
parameter: _reqConfig,
isFecth: false,
controller: null,
onResponse(boo) {
console.log('dislikes onResponse', boo);
if (!boo)
return;
setRepel(_sta);
},
onCatch(err) {
console.log('dislikes onCatch', err);
},
onFinally() {
console.log('dislikes onFinally');
},
});
},
},
{
key: 'cite',
alt: 'actionCite',
icon: _jsx(FaQuoteLeft, {}),
},
];
const allowActions = Array.isArray(toolbarlist) ? toolbarlist : [];
const msgTypes = Array.isArray(content.data) ? content.data.map((e) => e.cardId).filter((e) => e) : [];
const notText = [type].concat(msgTypes).filter((e) => !['Text', 'Markdown', 'Combine'].includes(e)).length > 0;
const [myActions, setMyActions] = useState(position === 'left'
? compact(map(allowActions, (e) => {
if (typeof e === 'string') {
return defaultIcons.find((item) => item.key === e);
}
else if (get(e, 'key')) {
return e;
}
}))
: allowActions.includes('copy')
? [defaultIcons[0]]
: []);
useEffect(() => {
const _nmap = myActions.map((e) => e.key === 'likes' || e.key === 'dislikes' ? defaultIcons.find(b => b.key === e.key) : e);
setMyActions(_nmap);
}, [repel]);
return (_jsx("div", { className: cn(show ? 'DS-GA-visible' : 'DS-GA-invisible', 'card-actions DS-GA-w-full DS-GA-rounded-md DS-GA-flex DS-GA-gap-2 DS-GA-translate-y-1 DS-GA-mt-0.5', position === 'left' ? 'DS-GA-justify-start' : 'DS-GA-justify-end'), children: Array.isArray(myActions) &&
myActions.length > 0 &&
myActions.map(item => {
if (item.key === 'copy' && notText)
return null;
const actionOptions = { className: '' };
if (typeof getMsgActionOptions === 'function') {
extend(actionOptions, {}, getMsgActionOptions({ msg: option, key: item.key, ctx: GlobalCtxs }));
}
if (item.key === 'split')
return _jsx("div", { className: 'DS-GA-h-4 DS-GA-w-px DS-GA-bg-text-shal-8' }, item.key);
return (_jsx(Tooltip, { title: t(item.alt), children: _jsx("div", { className: classNames('action-item DS-GA-cursor-pointer', actionOptions.className), onClick: ev => (item.click?.(ev, option), callbackClick(item.key)), children: item.icon ? (item.key === 'broad' &&
broadActiveText === getShowText(option) &&
(broadFlag === 'play' || broadFlag === 'pause' || broadFlag === 'loading') ? (_jsx("i", { className: classNames('iconfont-assistant active', `icon-${broadFlag}`, broadFlag === 'loading' ? 'is-spin DS-GA-block' : ''), onClick: broadChange })) : (item.key === 'cite'
? _jsx("i", { onClick: citeClick, children: item.icon })
: _jsx("i", { children: item.icon }))) : (_jsx("img", { src: item.src, className: 'hover:DS-GA-brightness-50' })) }) }, item.key));
}) }));
}