mirror of
https://github.com/tencentmusic/supersonic.git
synced 2025-12-19 00:37:08 +00:00
Integrate Chat and Copilot into chat-sdk, and add SQL parse display (#166)
This commit is contained in:
williamhliu
11
webapp/packages/chat-sdk/src/Copilot/constants.ts
Normal file
11
webapp/packages/chat-sdk/src/Copilot/constants.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
export const MODEL_PATH_MAP = {
|
||||
song: '歌曲库',
|
||||
'song-detail': '歌曲库',
|
||||
singer: '艺人库',
|
||||
'singer-detail': '艺人库',
|
||||
album: '专辑库',
|
||||
'album-detail': '专辑库',
|
||||
'digital-album': '专辑库',
|
||||
brand: '厂牌库',
|
||||
'brand-detail': '厂牌库',
|
||||
};
|
||||
148
webapp/packages/chat-sdk/src/Copilot/index.tsx
Normal file
148
webapp/packages/chat-sdk/src/Copilot/index.tsx
Normal file
@@ -0,0 +1,148 @@
|
||||
import IconFont from '../components/IconFont';
|
||||
import { CaretRightOutlined, CloseOutlined } from '@ant-design/icons';
|
||||
import classNames from 'classnames';
|
||||
import {
|
||||
ForwardRefRenderFunction,
|
||||
forwardRef,
|
||||
useEffect,
|
||||
useImperativeHandle,
|
||||
useRef,
|
||||
useState,
|
||||
} from 'react';
|
||||
import Chat from '../Chat';
|
||||
import { AgentType } from '../Chat/type';
|
||||
import { setToken } from '../utils/utils';
|
||||
import { SendMsgParamsType } from '../common/type';
|
||||
import styles from './style.module.less';
|
||||
|
||||
type Props = {
|
||||
token?: string;
|
||||
agentIds?: number[];
|
||||
noInput?: boolean;
|
||||
isDeveloper?: boolean;
|
||||
integrateSystem?: string;
|
||||
apiUrl?: string;
|
||||
onReportMsgEvent?: (msg: string, valid: boolean) => void;
|
||||
onOpenChatPage?: (agentId?: number) => void;
|
||||
};
|
||||
|
||||
const Copilot: ForwardRefRenderFunction<any, Props> = (
|
||||
{
|
||||
token,
|
||||
agentIds,
|
||||
noInput,
|
||||
isDeveloper,
|
||||
integrateSystem,
|
||||
apiUrl,
|
||||
onReportMsgEvent,
|
||||
onOpenChatPage,
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
const [chatVisible, setChatVisible] = useState(false);
|
||||
const [copilotMinimized, setCopilotMinimized] = useState(false);
|
||||
const [currentAgent, setCurrentAgent] = useState<AgentType>();
|
||||
|
||||
const chatRef = useRef<any>();
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
sendCopilotMsg,
|
||||
}));
|
||||
|
||||
useEffect(() => {
|
||||
if (token) {
|
||||
setToken(token);
|
||||
}
|
||||
}, [token]);
|
||||
|
||||
useEffect(() => {
|
||||
if (apiUrl) {
|
||||
localStorage.setItem('SUPERSONIC_CHAT_API_URL', apiUrl);
|
||||
}
|
||||
}, [apiUrl]);
|
||||
|
||||
const sendCopilotMsg = (params: SendMsgParamsType) => {
|
||||
chatRef?.current?.sendCopilotMsg(params);
|
||||
updateChatVisible(true);
|
||||
};
|
||||
|
||||
const updateChatVisible = (visible: boolean) => {
|
||||
setChatVisible(visible);
|
||||
};
|
||||
|
||||
const onToggleChatVisible = () => {
|
||||
updateChatVisible(!chatVisible);
|
||||
};
|
||||
|
||||
const onCloseChat = () => {
|
||||
updateChatVisible(false);
|
||||
};
|
||||
|
||||
const onTransferChat = () => {
|
||||
onOpenChatPage?.(currentAgent?.id);
|
||||
};
|
||||
|
||||
const onMinimizeCopilot = (e: any) => {
|
||||
e.stopPropagation();
|
||||
updateChatVisible(false);
|
||||
setCopilotMinimized(true);
|
||||
};
|
||||
|
||||
const copilotClass = classNames(styles.copilot, {
|
||||
[styles.copilotMinimized]: copilotMinimized,
|
||||
});
|
||||
|
||||
const chatPopoverClass = classNames(styles.chatPopover, {
|
||||
[styles.c2System]: integrateSystem === 'c2',
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={copilotClass}
|
||||
onMouseEnter={() => {
|
||||
setCopilotMinimized(false);
|
||||
}}
|
||||
onClick={onToggleChatVisible}
|
||||
>
|
||||
<IconFont type="icon-copilot-fill" />
|
||||
<div className={styles.minimizeWrapper} onClick={onMinimizeCopilot}>
|
||||
<div className={styles.minimize}>-</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.copilotContent} style={{ display: chatVisible ? 'block' : 'none' }}>
|
||||
<div className={chatPopoverClass}>
|
||||
<div className={styles.header}>
|
||||
<div className={styles.leftSection}>
|
||||
<CloseOutlined className={styles.close} onClick={onCloseChat} />
|
||||
{onOpenChatPage && (
|
||||
<IconFont
|
||||
type="icon-weibiaoti-"
|
||||
className={styles.transfer}
|
||||
onClick={onTransferChat}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className={styles.title}>内容库问答</div>
|
||||
</div>
|
||||
<div className={styles.chat}>
|
||||
<Chat
|
||||
chatVisible={chatVisible}
|
||||
agentIds={agentIds}
|
||||
noInput={noInput}
|
||||
isDeveloper={isDeveloper}
|
||||
integrateSystem={integrateSystem}
|
||||
isCopilot
|
||||
onCurrentAgentChange={setCurrentAgent}
|
||||
onReportMsgEvent={onReportMsgEvent}
|
||||
ref={chatRef}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<CaretRightOutlined className={styles.rightArrow} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default forwardRef(Copilot);
|
||||
151
webapp/packages/chat-sdk/src/Copilot/style.module.less
Normal file
151
webapp/packages/chat-sdk/src/Copilot/style.module.less
Normal file
@@ -0,0 +1,151 @@
|
||||
.copilot {
|
||||
position: fixed;
|
||||
right: 8px;
|
||||
bottom: 220px;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
color: #fff;
|
||||
font-size: 26px;
|
||||
background-color: var(--chat-blue);
|
||||
background-clip: padding-box;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 50%;
|
||||
box-shadow: 8px 8px 20px 0 rgba(55, 99, 170, 0.1);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
&.copilotMinimized {
|
||||
right: -40px;
|
||||
}
|
||||
|
||||
.minimizeWrapper {
|
||||
position: absolute;
|
||||
top: -18px;
|
||||
right: -6px;
|
||||
display: none;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
padding: 4px;
|
||||
cursor: pointer;
|
||||
|
||||
.minimize {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-bottom: 5px;
|
||||
background-color: var(--text-color-fifth-4);
|
||||
border-radius: 50%;
|
||||
transition: all 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.minimize {
|
||||
background-color: var(--text-color-fifth);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
box-shadow: 8px 8px 20px rgba(55, 99, 170, 0.3);
|
||||
|
||||
.minimizeWrapper {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chatPopover {
|
||||
position: fixed;
|
||||
right: 90px;
|
||||
bottom: 5vh;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 70vw;
|
||||
min-width: 1100px;
|
||||
height: 90vh;
|
||||
overflow: hidden;
|
||||
box-shadow: 4px 4px 10px rgba(55, 99, 170, 0.3), -2px -2px 16px rgba(55, 99, 170, 0.3);
|
||||
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out,
|
||||
-webkit-transform 0.3s ease-in-out;
|
||||
|
||||
&.c2System {
|
||||
width: calc(100vw - 180px);
|
||||
}
|
||||
|
||||
.header {
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 40px;
|
||||
padding-right: 16px;
|
||||
padding-left: 16px;
|
||||
background: linear-gradient(81.62deg, #2870ea 8.72%, var(--chat-blue) 85.01%);
|
||||
box-shadow: 1px 1px 8px #1b4aef5c;
|
||||
|
||||
.title {
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.leftSection {
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
column-gap: 20px;
|
||||
|
||||
.close {
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.transfer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.fullscreen {
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat {
|
||||
height: calc(90vh - 40px);
|
||||
}
|
||||
|
||||
&.fullscreen {
|
||||
bottom: 0;
|
||||
left: 60px;
|
||||
width: calc(100vw - 150px);
|
||||
height: 100vh;
|
||||
|
||||
.chat {
|
||||
height: calc(100vh - 50px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rightArrow {
|
||||
position: fixed;
|
||||
right: 69px;
|
||||
bottom: 232px;
|
||||
z-index: 999;
|
||||
color: var(--chat-blue);
|
||||
font-size: 30px;
|
||||
}
|
||||
Reference in New Issue
Block a user