GithubProxy/coai
1
0
Fork 0
mirror of https://github.com/coaidev/coai.git synced 2025-05-29 01:40:17 +09:00
Code Issues Actions Packages Projects Releases Wiki Activity

use textarea instead of chat input

Browse Source
This commit is contained in:
Zhang Minghan 2023-11-17 21:53:20 +08:00
parent b417368184
commit 574f26dfee
3 changed files with 22 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/src/assets/pages/home.less
View File

@ -678,14 +678,15 @@
.chat-box { .chat-box {
position: relative; position: relative;
flex-grow: 1; flex-grow: 1;
margin-right: 4px;
} }
.input-box { .input-box {
resize: none;
width: 100%; width: 100%;
color: hsl(var(--text)); color: hsl(var(--text));
white-space: pre-wrap; white-space: pre-wrap;
padding-right: 0.25rem; scrollbar-width: thin;
padding-right: 3rem;
&.align { &.align {
text-align: center; text-align: center;
@ -719,7 +720,10 @@
} }
.action-button { .action-button {
position: absolute;
padding: 0 6px; padding: 0 6px;
right: 0.5rem;
bottom: 0.5rem;
.send-icon { .send-icon {
fill: hsl(var(--text)); fill: hsl(var(--text));

21
app/src/components/home/assemblies/ChatInput.tsx
View File

@ -1,11 +1,11 @@
import { Input } from "@/components/ui/input.tsx";
import React from "react"; import React from "react";
import { setMemory } from "@/utils/memory.ts"; import { setMemory } from "@/utils/memory.ts";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import {Textarea} from "@/components/ui/textarea.tsx";
type ChatInputProps = { type ChatInputProps = {
className?: string; className?: string;
target?: React.RefObject<HTMLInputElement>; target?: React.RefObject<HTMLTextAreaElement>;
value: string; value: string;
onValueChange: (value: string) => void; onValueChange: (value: string) => void;
onEnterPressed: () => void; onEnterPressed: () => void;
@ -19,20 +19,29 @@ function ChatInput({
onEnterPressed, onEnterPressed,
}: ChatInputProps) { }: ChatInputProps) {
const { t } = useTranslation(); const { t } = useTranslation();
const [stamp, setStamp] = React.useState(0);
return ( return (
<Input <Textarea
id={`input`} id={`input`}
className={`input-box ${className || ""}`} className={`input-box ${className || ""}`}
ref={target} ref={target}
value={value} value={value}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => { rows={3}
onChange={(e) => {
onValueChange(e.target.value); onValueChange(e.target.value);
setMemory("history", e.target.value); setMemory("history", e.target.value);
}} }}
placeholder={t("chat.placeholder")} placeholder={t("chat.placeholder")}
onKeyDown={async (e: React.KeyboardEvent<HTMLInputElement>) => { onKeyDown={async (e) => {
if (e.key === "Enter") onEnterPressed(); if (e.key === "Control") {
setStamp(Date.now());
} else if (e.key === "Enter" && !e.shiftKey) {
if (stamp > 0 && Date.now() - stamp < 200) {
e.preventDefault();
onEnterPressed();
}
}
}} }}
/> />
); );

2
app/src/store/settings.ts
View File

@ -7,7 +7,7 @@ export const settingsSlice = createSlice({
initialState: { initialState: {
dialog: false, dialog: false,
context: getMemory("context") !== "false", context: getMemory("context") !== "false",
align: getMemory("align") !== "false", align: getMemory("align") === "true",
}, },
reducers: { reducers: {
toggleDialog: (state) => { toggleDialog: (state) => {