fix: #439 context prompt input with textarea

app/components/chat.tsx

@@ -32,11 +32,14 @@ import { IconButton } from "./button";
 import styles from "./home.module.scss";
 import chatStyle from "./chat.module.scss";
 
-import { Modal, showModal, showToast } from "./ui-lib";
+import { Input, Modal, showModal, showToast } from "./ui-lib";
 
-const Markdown = dynamic(async () => memo((await import("./markdown")).Markdown), {
-  loading: () => <LoadingIcon />,
-});
+const Markdown = dynamic(
+  async () => memo((await import("./markdown")).Markdown),
+  {
+    loading: () => <LoadingIcon />,
+  },
+);
 
 const Emoji = dynamic(async () => (await import("emoji-picker-react")).Emoji, {
   loading: () => <LoadingIcon />,
@@ -151,7 +154,6 @@ function PromptToast(props: {
             ]}
           >
             <>
-              {" "}
               <div className={chatStyle["context-prompt"]}>
                 {context.map((c, i) => (
                   <div className={chatStyle["context-prompt-row"]} key={i}>
@@ -171,17 +173,18 @@ function PromptToast(props: {
                         </option>
                       ))}
                     </select>
-                    <input
+                    <Input
                       value={c.content}
                       type="text"
                       className={chatStyle["context-content"]}
-                      onChange={(e) =>
+                      rows={1}
+                      onInput={(e) =>
                         updateContextPrompt(i, {
                           ...c,
-                          content: e.target.value as any,
+                          content: e.currentTarget.value as any,
                         })
                       }
-                    ></input>
+                    />
                     <IconButton
                       icon={<DeleteIcon />}
                       className={chatStyle["context-delete-button"]}

app/components/ui-lib.module.scss

@@ -141,6 +141,16 @@
   }
 }
 
+.input {
+  border: var(--border-in-light);
+  border-radius: 10px;
+  padding: 10px;
+  font-family: inherit;
+  background-color: var(--white);
+  color: var(--black);
+  resize: none;
+}
+
 @media only screen and (max-width: 600px) {
   .modal-container {
     width: 90vw;

app/components/ui-lib.tsx

@@ -2,6 +2,7 @@ import styles from "./ui-lib.module.scss";
 import LoadingIcon from "../icons/three-dots.svg";
 import CloseIcon from "../icons/close.svg";
 import { createRoot } from "react-dom/client";
+import React from "react";
 
 export function Popover(props: {
   children: JSX.Element;
@@ -140,3 +141,17 @@ export function showToast(content: string, delay = 3000) {
 
   root.render(<Toast content={content} />);
 }
+
+export type InputProps = React.HTMLProps<HTMLTextAreaElement> & {
+  autoHeight?: boolean;
+  rows?: number;
+};
+
+export function Input(props: InputProps) {
+  return (
+    <textarea
+      {...props}
+      className={`${styles["input"]} ${props.className}`}
+    ></textarea>
+  );
+}