YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-03-25 23:20:12 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore: update ask AI trigger (#1316)

Browse Source
This commit is contained in:
boojack 2023-03-08 23:09:15 +08:00 committed by GitHub
parent 390e29f850
commit 70a187cc18
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 24 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
web/src/components/AskAIDialog.tsx
View File

@ -20,6 +20,7 @@ const AskAIDialog: React.FC<Props> = (props: Props) => {
const fetchingState = useLoading(false);
const [historyList, setHistoryList] = useState<History[]>([]);
const [isEnabled, setIsEnabled] = useState<boolean>(true);
const [question, setQuestion] = useState<string>("");
useEffect(() => {
api.checkOpenAIEnabled().then(({ data }) => {
@ -33,21 +34,20 @@ const AskAIDialog: React.FC<Props> = (props: Props) => {
destroy();
};
const handleQuestionTextareaKeyDown = async (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
if (event.key === "Enter") {
event.preventDefault();
const question = event.currentTarget.value;
event.currentTarget.value = "";
const handleQuestionTextareaChange = async (event: React.ChangeEvent<HTMLTextAreaElement>) => {
setQuestion(event.currentTarget.value);
};
fetchingState.setLoading();
try {
await askQuestion(question);
} catch (error: any) {
console.error(error);
toastHelper.error(error.response.data.error);
}
fetchingState.setFinish();
const handleSendQuestionButtonClick = async () => {
fetchingState.setLoading();
try {
await askQuestion(question);
} catch (error: any) {
console.error(error);
toastHelper.error(error.response.data.error);
}
setQuestion("");
fetchingState.setFinish();
};
const askQuestion = async (question: string) => {
@ -79,7 +79,13 @@ const AskAIDialog: React.FC<Props> = (props: Props) => {
</button>
</div>
<div className="dialog-content-container !w-112 max-w-full">
<Textarea className="w-full" placeholder="Ask anything…" onKeyDown={handleQuestionTextareaKeyDown} />
<div className="w-full relative">
<Textarea className="w-full" placeholder="Ask anything…" value={question} onChange={handleQuestionTextareaChange} />
<Icon.Send
className="cursor-pointer w-7 p-1 h-auto rounded-md bg-gray-100 dark:bg-zinc-800 absolute right-2 bottom-1.5 shadow hover:opacity-80"
onClick={handleSendQuestionButtonClick}
/>
</div>
{fetchingState.isLoading && (
<p className="w-full py-2 mt-4 flex flex-row justify-center items-center">
<Icon.Loader className="w-5 h-auto animate-spin" />
@ -88,10 +94,12 @@ const AskAIDialog: React.FC<Props> = (props: Props) => {
{historyList.map((history, index) => (
<div key={index} className="w-full flex flex-col justify-start items-start mt-4 space-y-2">
<div className="w-full flex flex-row justify-start items-start pr-6">
<span className="word-break rounded shadow px-3 py-2 opacity-80 bg-gray-100 dark:bg-zinc-700">{history.question}</span>
<span className="word-break rounded-lg rounded-tl-none px-3 py-2 opacity-80 bg-gray-100 dark:bg-zinc-700">
{history.question}
</span>
</div>
<div className="w-full flex flex-row justify-end items-start pl-8 space-x-2">
<div className="memo-content-wrapper !w-auto flex flex-col justify-start items-start rounded shadow px-3 py-2 bg-gray-100 dark:bg-zinc-700">
<div className="memo-content-wrapper !w-auto flex flex-col justify-start items-start rounded-lg rounded-tr-none px-3 py-2 bg-gray-100 dark:bg-zinc-700">
<div className="memo-content-text">{marked(history.answer)}</div>
</div>
<Icon.Bot className="mt-2 flex-shrink-0 mr-1 w-6 h-auto opacity-80" />