feat: #1303 improve long text input ux and mobile modal

app/components/mask.tsx

@@ -106,35 +106,22 @@ export function MaskConfig(props: {
   );
 }
 
-export function ContextPrompts(props: {
+function ContextPromptItem(props: {
-  context: Message[];
+  prompt: Message;
-  updateContext: (updater: (context: Message[]) => void) => void;
+  update: (prompt: Message) => void;
+  remove: () => void;
 }) {
-  const context = props.context;
+  const [focusingInput, setFocusingInput] = useState(false);
-
-  const addContextPrompt = (prompt: Message) => {
-    props.updateContext((context) => context.push(prompt));
-  };
-
-  const removeContextPrompt = (i: number) => {
-    props.updateContext((context) => context.splice(i, 1));
-  };
-
-  const updateContextPrompt = (i: number, prompt: Message) => {
-    props.updateContext((context) => (context[i] = prompt));
-  };
 
   return (
-    <>
+    <div className={chatStyle["context-prompt-row"]}>
-      <div className={chatStyle["context-prompt"]} style={{ marginBottom: 20 }}>
+      {!focusingInput && (
-        {context.map((c, i) => (
-          <div className={chatStyle["context-prompt-row"]} key={i}>
         <select
-              value={c.role}
+          value={props.prompt.role}
           className={chatStyle["context-role"]}
           onChange={(e) =>
-                updateContextPrompt(i, {
+            props.update({
-                  ...c,
+              ...props.prompt,
               role: e.target.value as any,
             })
           }
@@ -145,25 +132,61 @@ export function ContextPrompts(props: {
             </option>
           ))}
         </select>
+      )}
       <Input
-              value={c.content}
+        value={props.prompt.content}
         type="text"
         className={chatStyle["context-content"]}
-              rows={1}
+        rows={focusingInput ? 5 : 1}
+        onFocus={() => setFocusingInput(true)}
+        onBlur={() => setFocusingInput(false)}
         onInput={(e) =>
-                updateContextPrompt(i, {
+          props.update({
-                  ...c,
+            ...props.prompt,
             content: e.currentTarget.value as any,
           })
         }
       />
+      {!focusingInput && (
         <IconButton
           icon={<DeleteIcon />}
           className={chatStyle["context-delete-button"]}
-              onClick={() => removeContextPrompt(i)}
+          onClick={() => props.remove()}
           bordered
         />
+      )}
     </div>
+  );
+}
+
+export function ContextPrompts(props: {
+  context: Message[];
+  updateContext: (updater: (context: Message[]) => void) => void;
+}) {
+  const context = props.context;
+
+  const addContextPrompt = (prompt: Message) => {
+    props.updateContext((context) => context.push(prompt));
+  };
+
+  const removeContextPrompt = (i: number) => {
+    props.updateContext((context) => context.splice(i, 1));
+  };
+
+  const updateContextPrompt = (i: number, prompt: Message) => {
+    props.updateContext((context) => (context[i] = prompt));
+  };
+
+  return (
+    <>
+      <div className={chatStyle["context-prompt"]} style={{ marginBottom: 20 }}>
+        {context.map((c, i) => (
+          <ContextPromptItem
+            key={i}
+            prompt={c}
+            update={(prompt) => updateContextPrompt(i, prompt)}
+            remove={() => removeContextPrompt(i)}
+          />
         ))}
 
         <div className={chatStyle["context-prompt-row"]}>

app/components/model-config.tsx

@@ -1,4 +1,3 @@
-import styles from "./settings.module.scss";
 import { ALL_MODELS, ModalConfigValidator, ModelConfig } from "../store";
 
 import Locale from "../locales";

app/components/ui-lib.module.scss

@@ -124,6 +124,18 @@
   }
 }
 
+@media screen and (max-width: 600px) {
+  .modal-container {
+    width: 100vw;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+
+    .modal-content {
+      max-height: 50vh;
+    }
+  }
+}
+
 .show {
   opacity: 1;
   transition: all ease 0.3s;
@@ -191,13 +203,3 @@
   resize: none;
   min-width: 50px;
 }
-
-@media only screen and (max-width: 600px) {
-  .modal-container {
-    width: 90vw;
-
-    .modal-content {
-      max-height: 50vh;
-    }
-  }
-}

app/store/chat.ts

@@ -33,7 +33,7 @@ export function createMessage(override: Partial<Message>): Message {
   };
 }
 
-export const ROLES: Message["role"][] = ["system", "user", "assistant"];
+export const ROLES: Message["role"][] = ["user", "system", "assistant"];
 
 export interface ChatStat {
   tokenCount: number;

app/styles/globals.scss

@@ -248,6 +248,10 @@ div.math {
   display: flex;
   align-items: center;
   justify-content: center;
+
+  @media screen and (max-width: 600px) {
+    align-items: flex-end;
+  }
 }
 
 .link {