feat: add mask crud

app/components/chat-list.tsx

@@ -57,7 +57,9 @@ export function ChatItem(props: {
                 <div className={styles["chat-item-count"]}>
                   {Locale.ChatItem.ChatItemCount(props.count)}
                 </div>
-                <div className={styles["chat-item-date"]}>{props.time}</div>
+                <div className={styles["chat-item-date"]}>
+                  {new Date(props.time).toLocaleString()}
+                </div>
               </div>
             </>
           )}

app/components/chat.tsx

@@ -9,8 +9,8 @@ import ReturnIcon from "../icons/return.svg";
 import CopyIcon from "../icons/copy.svg";
 import DownloadIcon from "../icons/download.svg";
 import LoadingIcon from "../icons/three-dots.svg";
-import AddIcon from "../icons/add.svg";
-import DeleteIcon from "../icons/delete.svg";
+import PromptIcon from "../icons/prompt.svg";
+import MaskIcon from "../icons/mask.svg";
 import MaxIcon from "../icons/max.svg";
 import MinIcon from "../icons/min.svg";
 
@@ -261,9 +261,11 @@ function useScrollToBottom() {
 export function ChatActions(props: {
   showPromptModal: () => void;
   scrollToBottom: () => void;
+  showPromptHints: () => void;
   hitBottom: boolean;
 }) {
   const config = useAppConfig();
+  const navigate = useNavigate();
 
   // switch themes
   const theme = config.theme;
@@ -318,6 +320,22 @@ export function ChatActions(props: {
           <DarkIcon />
         ) : null}
       </div>
+
+      <div
+        className={`${chatStyle["chat-input-action"]} clickable`}
+        onClick={props.showPromptHints}
+      >
+        <PromptIcon />
+      </div>
+
+      <div
+        className={`${chatStyle["chat-input-action"]} clickable`}
+        onClick={() => {
+          navigate(Path.Masks);
+        }}
+      >
+        <MaskIcon />
+      </div>
     </div>
   );
 }
@@ -360,9 +378,9 @@ export function Chat() {
   );
 
   const onPromptSelect = (prompt: Prompt) => {
-    setUserInput(prompt.content);
     setPromptHints([]);
     inputRef.current?.focus();
+    setUserInput(prompt.content);
   };
 
   // auto grow input
@@ -723,6 +741,10 @@ export function Chat() {
           showPromptModal={() => setShowPromptModal(true)}
           scrollToBottom={scrollToBottom}
           hitBottom={hitBottom}
+          showPromptHints={() => {
+            inputRef.current?.focus();
+            onSearch("");
+          }}
         />
         <div className={styles["chat-input-panel-inner"]}>
           <textarea
@@ -734,8 +756,12 @@ export function Chat() {
             onKeyDown={onInputKeyDown}
             onFocus={() => setAutoScroll(true)}
             onBlur={() => {
-              setAutoScroll(false);
-              setTimeout(() => setPromptHints([]), 500);
+              setTimeout(() => {
+                if (document.activeElement !== inputRef.current) {
+                  setAutoScroll(false);
+                  setPromptHints([]);
+                }
+              }, 100);
             }}
             autoFocus
             rows={inputRows}

app/components/emoji.tsx

@@ -33,16 +33,16 @@ export function Avatar(props: { model?: ModelType; avatar?: string }) {
     return (
       <div className="no-dark">
         {props.model?.startsWith("gpt-4") ? (
-          <BlackBotIcon className="user-avtar" />
+          <BlackBotIcon className="user-avatar" />
         ) : (
-          <BotIcon className="user-avtar" />
+          <BotIcon className="user-avatar" />
         )}
       </div>
     );
   }
 
   return (
-    <div className="user-avtar">
+    <div className="user-avatar">
       {props.avatar && <EmojiAvatar avatar={props.avatar} />}
     </div>
   );

app/components/mask.module.scss

@@ -1,3 +1,16 @@
+@import "../styles/animation.scss";
+
+@keyframes search-in {
+  from {
+    opacity: 0;
+    transform: translateY(5vh) scaleX(0.5);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scaleX(1);
+  }
+}
+
 .mask-page {
   height: 100%;
   display: flex;
@@ -11,23 +24,76 @@
       width: 100%;
       max-width: 100%;
       margin-bottom: 20px;
+      animation: search-in ease 0.3s;
     }
 
     .mask-item {
-      .mask-icon {
+      display: flex;
+      justify-content: space-between;
+      padding: 20px;
+      border: var(--border-in-light);
+      animation: slide-in ease 0.3s;
+
+      &:not(:last-child) {
+        border-bottom: 0;
+      }
+
+      &:first-child {
+        border-top-left-radius: 10px;
+        border-top-right-radius: 10px;
+      }
+
+      &:last-child {
+        border-bottom-left-radius: 10px;
+        border-bottom-right-radius: 10px;
+      }
+
+      .mask-header {
         display: flex;
         align-items: center;
-        justify-content: center;
-        border: var(--border-in-light);
-        border-radius: 10px;
-        padding: 6px;
+
+        .mask-icon {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-right: 10px;
+        }
+
+        .mask-title {
+          .mask-name {
+            font-size: 14px;
+            font-weight: bold;
+          }
+          .mask-info {
+            font-size: 12px;
+          }
+        }
       }
 
       .mask-actions {
         display: flex;
         flex-wrap: nowrap;
         transition: all ease 0.3s;
       }
+
+      @media screen and (max-width: 600px) {
+        display: flex;
+        flex-direction: column;
+        padding-bottom: 10px;
+        border-radius: 10px;
+        margin-bottom: 20px;
+        box-shadow: var(--card-shadow);
+
+        &:not(:last-child) {
+          border-bottom: var(--border-in-light);
+        }
+
+        .mask-actions {
+          width: 100%;
+          justify-content: space-between;
+          padding-top: 10px;
+        }
+      }
     }
   }
 }