Spaces:
Running
Running
| import styles from './index.module.less'; | |
| import MindMapGraph from '../mind-map'; | |
| import { MindsearchContext } from '../../provider/context'; | |
| import MindSearchAvatar from '../../assets/mindsearch-avatar.svg'; | |
| import CustomMarkdown from '../custom-markdown'; | |
| import { useState, useEffect, useContext } from 'react'; | |
| import classNames from 'classnames'; | |
| interface IProps { | |
| adjList: any; | |
| isEnd: boolean; | |
| response: string; | |
| refList: any; | |
| listId: number; | |
| question: string; | |
| handleNodeClick: (info: any, idx: number) => void; | |
| } | |
| const Answer = ({ refList = null, adjList, isEnd, response = '', listId, handleNodeClick, question = '' }: IProps) => { | |
| const { chatIsOver } = useContext(MindsearchContext); | |
| const [showGraph, setShowGraph] = useState(true); | |
| // ๆดไฝ็ๆธฒๆๆ | |
| const [renderData, setRenderData] = useState<any[]>([]); | |
| const toggleGraph = () => { | |
| setShowGraph(!showGraph); | |
| }; | |
| const handleClick = (node: string) => { | |
| handleNodeClick(node, listId); | |
| }; | |
| const generateMapData = (arr: []) => { | |
| const tempArr: any[] = arr.map((item: { name: string; id: number; state: number }) => { | |
| if (item.name && adjList[item.name]) { | |
| return { | |
| ...item, | |
| children: generateMapData(adjList?.[item.name]), | |
| }; | |
| } | |
| }); | |
| return tempArr; | |
| }; | |
| const convertTreeData = () => { | |
| const root: any = { | |
| id: 0, | |
| name: 'ๅๅง้ฎ้ข', | |
| state: 3, | |
| children: generateMapData(adjList?.root || []), | |
| }; | |
| // ่ฟๅๅ ๅซๆ น่็น็ๆฐ็ป | |
| // console.log('renderData-----------', [root]); | |
| setRenderData([root]); | |
| }; | |
| useEffect(() => { | |
| if (!adjList || Object.keys(adjList)?.length < 2) { | |
| setRenderData([]); | |
| return; | |
| }; | |
| convertTreeData(); | |
| }, [adjList]); | |
| return <div className={styles.answer}> | |
| <div className={styles.avatar}> | |
| <img src={MindSearchAvatar} alt="mindsearch-avatar" /> | |
| </div> | |
| <div className={styles.reaponseAarea}> | |
| { | |
| showGraph ? <> | |
| { | |
| (renderData?.length > 0) && <div className={styles.inner}> | |
| <MindMapGraph | |
| listId={listId} | |
| isEnd={isEnd} | |
| renderData={renderData} | |
| handleNodeClick={handleClick} | |
| key={`graph-${question}`} | |
| /> | |
| <div className={classNames(styles.graphIcon, styles.closeGraph)} onClick={toggleGraph}> | |
| ๆถ่ตท | |
| <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"> | |
| <path fillRule="evenodd" clipRule="evenodd" d="M2.66667 2C2.29848 2 2 2.29848 2 2.66667V6C2 6.36819 2.29848 6.66667 2.66667 6.66667C3.03486 6.66667 3.33333 6.36819 3.33333 6V3.33333H6C6.36819 3.33333 6.66667 3.03486 6.66667 2.66667C6.66667 2.29848 6.36819 2 6 2H2.66667ZM13.3333 14C13.7015 14 14 13.7015 14 13.3333V10C14 9.63181 13.7015 9.33333 13.3333 9.33333C12.9651 9.33333 12.6667 9.63181 12.6667 10V12.6667H10C9.63181 12.6667 9.33333 12.9651 9.33333 13.3333C9.33333 13.7015 9.63181 14 10 14H13.3333ZM6.25519 9.38392C6.17658 9.35132 6.09039 9.33333 6 9.33333H2.66667C2.29848 9.33333 2 9.63181 2 10C2 10.3682 2.29848 10.6667 2.66667 10.6667H4.39052L2.19526 12.8619C1.93491 13.1223 1.93491 13.5444 2.19526 13.8047C2.45561 14.0651 2.87772 14.0651 3.13807 13.8047L5.33333 11.6095L5.33333 13.3333C5.33333 13.7015 5.63181 14 6 14C6.36819 14 6.66667 13.7015 6.66667 13.3333V10C6.66667 9.81812 6.59383 9.65325 6.47574 9.53297L6.46703 9.52426C6.40414 9.46249 6.33203 9.41571 6.25519 9.38392ZM10.6667 2.66667C10.6667 2.29848 10.3682 2 10 2C9.63181 2 9.33333 2.29848 9.33333 2.66667V6C9.33333 6.36819 9.63181 6.66667 10 6.66667L13.3333 6.66667C13.7015 6.66667 14 6.36819 14 6C14 5.63181 13.7015 5.33333 13.3333 5.33333L11.6095 5.33333L13.8047 3.13807C14.0651 2.87772 14.0651 2.45561 13.8047 2.19526C13.5444 1.93491 13.1223 1.93491 12.8619 2.19526L10.6667 4.39053V2.66667Z" fill="#121316" fillOpacity="0.8" /> | |
| </svg> | |
| </div> | |
| </div> | |
| } | |
| </> | |
| : <div className={classNames(styles.graphIcon, styles.showGraph)} onClick={toggleGraph}> | |
| ๆฅ็ๆ่่็น | |
| <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"> | |
| <path fillRule="evenodd" clipRule="evenodd" d="M2.66667 2C2.29848 2 2 2.29848 2 2.66667V6C2 6.36819 2.29848 6.66667 2.66667 6.66667C3.03486 6.66667 3.33333 6.36819 3.33333 6V3.33333H6C6.36819 3.33333 6.66667 3.03486 6.66667 2.66667C6.66667 2.29848 6.36819 2 6 2H2.66667ZM13.3333 14C13.7015 14 14 13.7015 14 13.3333V10C14 9.63181 13.7015 9.33333 13.3333 9.33333C12.9651 9.33333 12.6667 9.63181 12.6667 10V12.6667H10C9.63181 12.6667 9.33333 12.9651 9.33333 13.3333C9.33333 13.7015 9.63181 14 10 14H13.3333ZM6.25519 9.38392C6.17658 9.35132 6.09039 9.33333 6 9.33333H2.66667C2.29848 9.33333 2 9.63181 2 10C2 10.3682 2.29848 10.6667 2.66667 10.6667H4.39052L2.19526 12.8619C1.93491 13.1223 1.93491 13.5444 2.19526 13.8047C2.45561 14.0651 2.87772 14.0651 3.13807 13.8047L5.33333 11.6095L5.33333 13.3333C5.33333 13.7015 5.63181 14 6 14C6.36819 14 6.66667 13.7015 6.66667 13.3333V10C6.66667 9.81812 6.59383 9.65325 6.47574 9.53297L6.46703 9.52426C6.40414 9.46249 6.33203 9.41571 6.25519 9.38392ZM10.6667 2.66667C10.6667 2.29848 10.3682 2 10 2C9.63181 2 9.33333 2.29848 9.33333 2.66667V6C9.33333 6.36819 9.63181 6.66667 10 6.66667L13.3333 6.66667C13.7015 6.66667 14 6.36819 14 6C14 5.63181 13.7015 5.33333 13.3333 5.33333L11.6095 5.33333L13.8047 3.13807C14.0651 2.87772 14.0651 2.45561 13.8047 2.19526C13.5444 1.93491 13.1223 1.93491 12.8619 2.19526L10.6667 4.39053V2.66667Z" fill="#121316" fillOpacity="0.8" /> | |
| </svg> | |
| </div> | |
| } | |
| {response && ( | |
| <div className={styles.response}> | |
| <CustomMarkdown source={response} refList={chatIsOver ? refList : null} quoType="merge" /> | |
| </div> | |
| )} | |
| </div> | |
| </div> | |
| }; | |
| export default Answer; | |