Commit 97edc264 authored by Kantz's avatar Kantz
Browse files

chatfokus wird wieder aktiviert wenn Chat ausgabe fertig

parent f0a41d4d
import { useRef } from "react"; import { useEffect, useRef } from "react";
import { EditPencil, Send, Upload } from "iconoir-react"; import { EditPencil, Send, Upload } from "iconoir-react";
import { t } from "../../i18n"; import { t } from "../../i18n";
...@@ -23,6 +23,21 @@ export default function MessageInput({ ...@@ -23,6 +23,21 @@ export default function MessageInput({
}: MessageInputProps) { }: MessageInputProps) {
const canSend = value.trim().length > 0; const canSend = value.trim().length > 0;
const uploadInputRef = useRef<HTMLInputElement | null>(null); const uploadInputRef = useRef<HTMLInputElement | null>(null);
const textareaRef = useRef<HTMLTextAreaElement | null>(null);
const wasSendingRef = useRef(isSending);
const shouldRestoreFocusRef = useRef(false);
const sendButtonStartedFromTextareaRef = useRef(false);
useEffect(() => {
if (wasSendingRef.current && !isSending) {
if (shouldRestoreFocusRef.current) {
textareaRef.current?.focus({ preventScroll: true });
}
shouldRestoreFocusRef.current = false;
}
wasSendingRef.current = isSending;
}, [isSending]);
const handleUploadClick = () => { const handleUploadClick = () => {
uploadInputRef.current?.click(); uploadInputRef.current?.click();
...@@ -39,6 +54,11 @@ export default function MessageInput({ ...@@ -39,6 +54,11 @@ export default function MessageInput({
await onUploadSolution?.(file); await onUploadSolution?.(file);
}; };
const handleSend = (restoreFocus = document.activeElement === textareaRef.current) => {
shouldRestoreFocusRef.current = restoreFocus;
onSend();
};
return ( return (
<div className="composer"> <div className="composer">
<div className="composer-row"> <div className="composer-row">
...@@ -72,7 +92,14 @@ export default function MessageInput({ ...@@ -72,7 +92,14 @@ export default function MessageInput({
<button <button
className="btn primary" className="btn primary"
type="button" type="button"
onClick={onSend} onPointerDown={() => {
sendButtonStartedFromTextareaRef.current =
document.activeElement === textareaRef.current;
}}
onClick={() => {
handleSend(sendButtonStartedFromTextareaRef.current);
sendButtonStartedFromTextareaRef.current = false;
}}
disabled={!canSend || isSending} disabled={!canSend || isSending}
aria-label={t("send")} aria-label={t("send")}
title={t("send")} title={t("send")}
...@@ -89,6 +116,7 @@ export default function MessageInput({ ...@@ -89,6 +116,7 @@ export default function MessageInput({
</button> </button>
</div> </div>
<textarea <textarea
ref={textareaRef}
className="composer-input" className="composer-input"
placeholder={t("typeQuestionOrLatex")} placeholder={t("typeQuestionOrLatex")}
rows={3} rows={3}
...@@ -116,7 +144,7 @@ export default function MessageInput({ ...@@ -116,7 +144,7 @@ export default function MessageInput({
if (event.key === "Enter" && !event.shiftKey) { if (event.key === "Enter" && !event.shiftKey) {
event.preventDefault(); event.preventDefault();
onSend(); handleSend(true);
} }
}} }}
/> />
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment