106 lines
3.0 KiB
TypeScript
106 lines
3.0 KiB
TypeScript
import { useState, useEffect } from "react";
|
|
|
|
import HelloGIF from "/icons/hello.gif";
|
|
import WhatsThing from "/icons/whatsThing.png";
|
|
import CircleIcon from "/icons/circle.png";
|
|
import RightIcon from "/icons/right.png";
|
|
import styles from "./index.module.css";
|
|
import { fetchQuestions } from "@/apis/questions";
|
|
import { useAbortController } from "@/hooks/useAbortController";
|
|
|
|
type Props = {
|
|
toRoom: ({initMessage,fileUrl}:{initMessage?:string,fileUrl?:string}) =>void;
|
|
};
|
|
|
|
export default function HeaderGroup({ toRoom }: Props) {
|
|
const [isRotating, setIsRotating] = useState(false);
|
|
const [displayQuestions, setDisplayQuestions] = useState<string[]>([]);
|
|
const [allQuestions, setAllQuestions] = useState<string[]>([]);
|
|
|
|
const { getSignal } = useAbortController();
|
|
|
|
// 随机获取4个问题的函数
|
|
const getRandomQuestions = () => {
|
|
const _allQuestions = Array.from(allQuestions);
|
|
const result: string[] = [];
|
|
const questionCount = Math.min(4, _allQuestions.length);
|
|
|
|
for (let i = 0; i < questionCount; i++) {
|
|
const randomIndex = Math.floor(Math.random() * _allQuestions.length);
|
|
result.push(_allQuestions.splice(randomIndex, 1)[0]);
|
|
}
|
|
|
|
return result;
|
|
};
|
|
|
|
const getQuestion = async () => {
|
|
const { result, message } = await fetchQuestions({ options: { signal:getSignal() } });
|
|
if (message) {
|
|
console.log(message);
|
|
} else {
|
|
setAllQuestions(result as string[]);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
setDisplayQuestions(getRandomQuestions());
|
|
}, [allQuestions]);
|
|
|
|
// 组件初始化时获取随机问题
|
|
useEffect(() => {
|
|
getQuestion();
|
|
}, []);
|
|
|
|
const handleClick = () => {
|
|
setIsRotating(true);
|
|
|
|
// 更新随机问题
|
|
setDisplayQuestions(getRandomQuestions());
|
|
|
|
// 动画结束后重置状态
|
|
setTimeout(() => {
|
|
setIsRotating(false);
|
|
}, 1000);
|
|
};
|
|
|
|
const handleQuestion = async (question: string) => {
|
|
toRoom({initMessage:question});
|
|
};
|
|
|
|
return (
|
|
<div className={styles.headerWrapper}>
|
|
<div className={styles.wrapper}>
|
|
<img className={styles.img} src={HelloGIF} alt="hello" />
|
|
<div className={styles.text}>Hey,我是您的六纬AI小助手</div>
|
|
</div>
|
|
<div className={styles["main-wrapper"]}>
|
|
<div className={styles.main} onClick={handleClick}>
|
|
<img className={styles.thing} src={WhatsThing} alt="whatsThing" />
|
|
<div className={styles.circle}>
|
|
<img
|
|
src={CircleIcon}
|
|
className={isRotating ? styles.rotating : ""}
|
|
alt="circle"
|
|
/>
|
|
<div className={styles.change}>换一批</div>
|
|
</div>
|
|
</div>
|
|
{displayQuestions.map((item, index) => (
|
|
<div
|
|
className={styles.tip}
|
|
key={index}
|
|
onClick={() => handleQuestion(item)}
|
|
>
|
|
<div>{item}</div>
|
|
<img
|
|
src={RightIcon}
|
|
alt="right-icon"
|
|
className={styles.rightIcon}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|