YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-04-03 20:31:10 +02: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 fetchingState = useLoading(false);
const [historyList, setHistoryList] = useState<History[]>([]); const [historyList, setHistoryList] = useState<History[]>([]);
const [isEnabled, setIsEnabled] = useState<boolean>(true); const [isEnabled, setIsEnabled] = useState<boolean>(true);
const [question, setQuestion] = useState<string>("");
useEffect(() => { useEffect(() => {
api.checkOpenAIEnabled().then(({ data }) => { api.checkOpenAIEnabled().then(({ data }) => {
@ -33,21 +34,20 @@ const AskAIDialog: React.FC<Props> = (props: Props) => {
destroy(); destroy();
}; };
const handleQuestionTextareaKeyDown = async (event: React.KeyboardEvent<HTMLTextAreaElement>) => { const handleQuestionTextareaChange = async (event: React.ChangeEvent<HTMLTextAreaElement>) => {
if (event.key === "Enter") { setQuestion(event.currentTarget.value);
event.preventDefault(); };
const question = event.currentTarget.value;
event.currentTarget.value = "";
fetchingState.setLoading(); const handleSendQuestionButtonClick = async () => {
try { fetchingState.setLoading();
await askQuestion(question); try {
} catch (error: any) { await askQuestion(question);
console.error(error); } catch (error: any) {
toastHelper.error(error.response.data.error); console.error(error);
} toastHelper.error(error.response.data.error);
fetchingState.setFinish();
} }
setQuestion("");
fetchingState.setFinish();
}; };
const askQuestion = async (question: string) => { const askQuestion = async (question: string) => {
@ -79,7 +79,13 @@ const AskAIDialog: React.FC<Props> = (props: Props) => {
</button> </button>
</div> </div>
<div className="dialog-content-container !w-112 max-w-full"> <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 && ( {fetchingState.isLoading && (
<p className="w-full py-2 mt-4 flex flex-row justify-center items-center"> <p className="w-full py-2 mt-4 flex flex-row justify-center items-center">
<Icon.Loader className="w-5 h-auto animate-spin" /> <Icon.Loader className="w-5 h-auto animate-spin" />
@ -88,10 +94,12 @@ const AskAIDialog: React.FC<Props> = (props: Props) => {
{historyList.map((history, index) => ( {historyList.map((history, index) => (
<div key={index} className="w-full flex flex-col justify-start items-start mt-4 space-y-2"> <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"> <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>
<div className="w-full flex flex-row justify-end items-start pl-8 space-x-2"> <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 className="memo-content-text">{marked(history.answer)}</div>
</div> </div>
<Icon.Bot className="mt-2 flex-shrink-0 mr-1 w-6 h-auto opacity-80" /> <Icon.Bot className="mt-2 flex-shrink-0 mr-1 w-6 h-auto opacity-80" />