diff --git a/app/src/assets/pages/home.less b/app/src/assets/pages/home.less index 5dbb3a7..401ad75 100644 --- a/app/src/assets/pages/home.less +++ b/app/src/assets/pages/home.less @@ -678,14 +678,15 @@ .chat-box { position: relative; flex-grow: 1; - margin-right: 4px; } .input-box { + resize: none; width: 100%; color: hsl(var(--text)); white-space: pre-wrap; - padding-right: 0.25rem; + scrollbar-width: thin; + padding-right: 3rem; &.align { text-align: center; @@ -719,7 +720,10 @@ } .action-button { + position: absolute; padding: 0 6px; + right: 0.5rem; + bottom: 0.5rem; .send-icon { fill: hsl(var(--text)); diff --git a/app/src/components/home/assemblies/ChatInput.tsx b/app/src/components/home/assemblies/ChatInput.tsx index 20c0762..51f5675 100644 --- a/app/src/components/home/assemblies/ChatInput.tsx +++ b/app/src/components/home/assemblies/ChatInput.tsx @@ -1,11 +1,11 @@ -import { Input } from "@/components/ui/input.tsx"; import React from "react"; import { setMemory } from "@/utils/memory.ts"; import { useTranslation } from "react-i18next"; +import {Textarea} from "@/components/ui/textarea.tsx"; type ChatInputProps = { className?: string; - target?: React.RefObject; + target?: React.RefObject; value: string; onValueChange: (value: string) => void; onEnterPressed: () => void; @@ -19,20 +19,29 @@ function ChatInput({ onEnterPressed, }: ChatInputProps) { const { t } = useTranslation(); + const [stamp, setStamp] = React.useState(0); return ( - ) => { + rows={3} + onChange={(e) => { onValueChange(e.target.value); setMemory("history", e.target.value); }} placeholder={t("chat.placeholder")} - onKeyDown={async (e: React.KeyboardEvent) => { - if (e.key === "Enter") onEnterPressed(); + onKeyDown={async (e) => { + if (e.key === "Control") { + setStamp(Date.now()); + } else if (e.key === "Enter" && !e.shiftKey) { + if (stamp > 0 && Date.now() - stamp < 200) { + e.preventDefault(); + onEnterPressed(); + } + } }} /> ); diff --git a/app/src/store/settings.ts b/app/src/store/settings.ts index a279898..581b0fd 100644 --- a/app/src/store/settings.ts +++ b/app/src/store/settings.ts @@ -7,7 +7,7 @@ export const settingsSlice = createSlice({ initialState: { dialog: false, context: getMemory("context") !== "false", - align: getMemory("align") !== "false", + align: getMemory("align") === "true", }, reducers: { toggleDialog: (state) => {