Improve UX

This commit is contained in:
2025-09-17 21:54:05 +03:00
Unverified
parent 39677f695f
commit ef4d09556e
3 changed files with 10 additions and 6 deletions
+3
View File
@@ -189,6 +189,7 @@
.message-content { .message-content {
word-wrap: break-word; word-wrap: break-word;
margin-bottom: 0.3rem; margin-bottom: 0.3rem;
white-space: pre-wrap;
} }
.message-reply { .message-reply {
@@ -197,6 +198,7 @@
padding: 0.5rem; padding: 0.5rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
border-left: 3px solid $color-dark-primary; border-left: 3px solid $color-dark-primary;
user-select: none;
.reply-content { .reply-content {
display: flex; display: flex;
@@ -225,6 +227,7 @@
color: $color-dark-on-surface-variant; color: $color-dark-on-surface-variant;
margin-top: 0.3rem; margin-top: 0.3rem;
text-align: right; text-align: right;
user-select: none;
} }
} }
@@ -8,7 +8,7 @@ interface ChatInputWrapperProps {
export function ChatInputWrapper({ onSendMessage }: ChatInputWrapperProps) { export function ChatInputWrapper({ onSendMessage }: ChatInputWrapperProps) {
const [message, setMessage] = useState(""); const [message, setMessage] = useState("");
const handleSubmit = async (e: React.FormEvent) => { const handleSubmit = async (e: React.FormEvent | Event) => {
e.preventDefault(); e.preventDefault();
if (message.trim()) { if (message.trim()) {
onSendMessage(message); onSendMessage(message);
@@ -27,7 +27,8 @@ export function ChatInputWrapper({ onSendMessage }: ChatInputWrapperProps) {
autoComplete="off" autoComplete="off"
text={message} text={message}
rows={1} rows={1}
onTextChange={(value) => setMessage(value)} /> onTextChange={(value) => setMessage(value)}
onEnter={handleSubmit} />
<button type="submit" className="send-btn"> <button type="submit" className="send-btn">
<span className="material-symbols filled">send</span> <span className="material-symbols filled">send</span>
</button> </button>
@@ -3,8 +3,8 @@ import { useEffect, useRef, useCallback, useLayoutEffect } from "react";
interface RichTextAreaProps { interface RichTextAreaProps {
text: string; text: string;
onTextChange: (value: string) => void; onTextChange: (value: string) => void;
onEnter?: "newLine" | null | (() => void); onEnter?: "newLine" | null | ((e: React.KeyboardEvent<HTMLTextAreaElement>) => void);
onCtrlEnter?: (() => void) | null; onCtrlEnter?: ((e: React.KeyboardEvent<HTMLTextAreaElement>) => void) | null;
placeholder?: string; placeholder?: string;
id?: string; id?: string;
className?: string; className?: string;
@@ -155,7 +155,7 @@ export function RichTextArea({
if (isCtrlEnter) { if (isCtrlEnter) {
e.preventDefault(); e.preventDefault();
if (typeof onCtrlEnter === "function") { if (typeof onCtrlEnter === "function") {
onCtrlEnter(); onCtrlEnter(e);
} }
return; return;
} }
@@ -171,7 +171,7 @@ export function RichTextArea({
} }
if (typeof onEnter === "function") { if (typeof onEnter === "function") {
e.preventDefault(); e.preventDefault();
onEnter(); onEnter(e);
return; return;
} }
} }