feat: add mask crud

2025-08-08 19:26:54 +08:00 · 2023-04-26 02:02:46 +08:00
parent ffa7302571
commit a7a8aad9bc
15 changed files with 313 additions and 101 deletions
--- a/app/components/chat-list.tsx
+++ b/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>
            </>
          )}
--- a/app/components/chat.tsx
+++ b/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}
--- a/app/components/emoji.tsx
+++ b/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>
  );
--- a/app/components/mask.module.scss
+++ b/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,16 +24,50 @@
      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 {
@@ -28,6 +75,25 @@
        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;
+        }
+      }
    }
  }
 }
--- a/app/components/mask.tsx
+++ b/app/components/mask.tsx
@@ -8,9 +8,15 @@ import EditIcon from "../icons/edit.svg";
 import AddIcon from "../icons/add.svg";
 import CloseIcon from "../icons/close.svg";
 import DeleteIcon from "../icons/delete.svg";
+import BotIcon from "../icons/bot.svg";
 import CopyIcon from "../icons/copy.svg";

-import { DEFAULT_MASK_AVATAR, DEFAULT_MASK_ID, Mask } from "../store/mask";
+import {
+  DEFAULT_MASK_AVATAR,
+  DEFAULT_MASK_ID,
+  Mask,
+  useMaskStore,
+} from "../store/mask";
 import {
  Message,
  ModelConfig,
@@ -18,7 +24,7 @@ import {
  useAppConfig,
  useChatStore,
 } from "../store";
-import { Input, List, ListItem, Modal, Popover } from "./ui-lib";
+import { Input, List, ListItem, Modal, Popover, showToast } from "./ui-lib";
 import { Avatar, AvatarPicker, EmojiAvatar } from "./emoji";
 import Locale from "../locales";
 import { useNavigate } from "react-router-dom";
@@ -28,6 +34,15 @@ import { useState } from "react";
 import { copyToClipboard } from "../utils";
 import { Updater } from "../api/openai/typing";
 import { ModelConfigList } from "./model-config";
+import { Path } from "../constant";
+
+export function MaskAvatar(props: { mask: Mask }) {
+  return props.mask.avatar !== DEFAULT_MASK_AVATAR ? (
+    <Avatar avatar={props.mask.avatar} />
+  ) : (
+    <Avatar model={props.mask.modelConfig.model} />
+  );
+}

 export function MaskConfig(props: {
  mask: Mask;
@@ -71,11 +86,7 @@ export function MaskConfig(props: {
              onClick={() => setShowPicker(true)}
              style={{ cursor: "pointer" }}
            >
-              {props.mask.avatar !== DEFAULT_MASK_AVATAR ? (
-                <Avatar avatar={props.mask.avatar} />
-              ) : (
-                <Avatar model={props.mask.modelConfig.model} />
-              )}
+              <MaskAvatar mask={props.mask} />
            </div>
          </Popover>
        </ListItem>
@@ -182,18 +193,15 @@ export function ContextPrompts(props: {
 }

 export function MaskPage() {
-  const config = useAppConfig();
  const navigate = useNavigate();
-  const masks: Mask[] = new Array(10).fill(0).map((m, i) => ({
-    id: i,
-    avatar: "1f606",
-    name: "预设角色 " + i.toString(),
-    context: [
-      { role: "assistant", content: "你好，有什么可以帮忙的吗", date: "" },
-    ],
-    modelConfig: config.modelConfig,
-    lang: "cn",
-  }));
+
+  const maskStore = useMaskStore();
+  const chatStore = useChatStore();
+  const masks = maskStore.getAll();
+
+  const [editingMaskId, setEditingMaskId] = useState<number | undefined>();
+  const editingMask = maskStore.get(editingMaskId);
+  const closeMaskModal = () => setEditingMaskId(undefined);

  return (
    <ErrorBoundary>
@@ -201,12 +209,18 @@ export function MaskPage() {
        <div className="window-header">
          <div className="window-header-title">
            <div className="window-header-main-title">预设角色面具</div>
-            <div className="window-header-submai-title">编辑预设角色定义</div>
+            <div className="window-header-submai-title">
+              共有{masks.length} 个预设角色定义
+            </div>
          </div>

          <div className="window-actions">
            <div className="window-action-button">
-              <IconButton icon={<AddIcon />} bordered />
+              <IconButton
+                icon={<AddIcon />}
+                bordered
+                onClick={() => maskStore.create()}
+              />
            </div>
            <div className="window-action-button">
              <IconButton icon={<DownloadIcon />} bordered />
@@ -225,34 +239,68 @@ export function MaskPage() {
          <input
            type="text"
            className={styles["search-bar"]}
-            placeholder="搜索面具"
+            placeholder="搜索"
+            autoFocus
          />

-          <List>
+          <div>
            {masks.map((m) => (
-              <ListItem
-                title={m.name}
-                key={m.id}
-                subTitle={`包含 ${m.context.length} 条预设对话 / ${
-                  Locale.Settings.Lang.Options[m.lang]
-                } / ${m.modelConfig.model}`}
-                icon={
+              <div className={styles["mask-item"]} key={m.id}>
+                <div className={styles["mask-header"]}>
                  <div className={styles["mask-icon"]}>
-                    <EmojiAvatar avatar={m.avatar} size={20} />
+                    <MaskAvatar mask={m} />
+                  </div>
+                  <div className={styles["mask-title"]}>
+                    <div className={styles["mask-name"]}>{m.name}</div>
+                    <div className={styles["mask-info"] + " one-line"}>
+                      {`包含 ${m.context.length} 条预设对话 / ${
+                        Locale.Settings.Lang.Options[m.lang]
+                      } / ${m.modelConfig.model}`}
+                    </div>
                  </div>
-                }
-                className={styles["mask-item"]}
-              >
-                <div className={styles["mask-actions"]}>
-                  <IconButton icon={<AddIcon />} text="对话" />
-                  <IconButton icon={<EditIcon />} text="编辑" />
-                  <IconButton icon={<DeleteIcon />} text="删除" />
                </div>
-              </ListItem>
+                <div className={styles["mask-actions"]}>
+                  <IconButton
+                    icon={<AddIcon />}
+                    text="对话"
+                    onClick={() => {
+                      chatStore.newSession(m);
+                      navigate(Path.Chat);
+                    }}
+                  />
+                  <IconButton
+                    icon={<EditIcon />}
+                    text="编辑"
+                    onClick={() => setEditingMaskId(m.id)}
+                  />
+                  <IconButton
+                    icon={<DeleteIcon />}
+                    text="删除"
+                    onClick={() => {
+                      if (confirm("确认删除？")) {
+                        maskStore.delete(m.id);
+                      }
+                    }}
+                  />
+                </div>
+              </div>
            ))}
-          </List>
+          </div>
        </div>
      </div>
+
+      {editingMask && (
+        <div className="modal-mask">
+          <Modal title="编辑预设面具" onClose={closeMaskModal}>
+            <MaskConfig
+              mask={editingMask!}
+              updateMask={(updater) =>
+                maskStore.update(editingMaskId!, updater)
+              }
+            />
+          </Modal>
+        </div>
+      )}
    </ErrorBoundary>
  );
 }
--- a/app/components/new-chat.module.scss
+++ b/app/components/new-chat.module.scss
@@ -81,13 +81,13 @@
      .mask {
        display: flex;
        align-items: center;
-        padding: 10px 16px;
+        padding: 10px 14px;
        border: var(--border-in-light);
        box-shadow: var(--card-shadow);
        background-color: var(--white);
        border-radius: 10px;
        margin-right: 10px;
-        width: 100px;
+        max-width: 8em;
        transform: scale(1);
        cursor: pointer;
        transition: all ease 0.3s;
@@ -98,16 +98,9 @@
          border-color: var(--primary);
        }

-        .mask-avatar {
-          display: flex;
-          min-width: 18px;
-          min-height: 18px;
-          background-color: #eee;
-          border-radius: 20px;
-        }
-
        .mask-name {
          margin-left: 10px;
+          font-size: 14px;
        }
      }
    }
--- a/app/components/new-chat.tsx
+++ b/app/components/new-chat.tsx
@@ -1,10 +1,14 @@
-import { useEffect, useRef } from "react";
-import { SlotID } from "../constant";
+import { useEffect, useRef, useState } from "react";
+import { Path, SlotID } from "../constant";
 import { IconButton } from "./button";
 import { EmojiAvatar } from "./emoji";
 import styles from "./new-chat.module.scss";
 import LeftIcon from "../icons/left.svg";
 import { useNavigate } from "react-router-dom";
+import { createEmptyMask, Mask, useMaskStore } from "../store/mask";
+import { useWindowSize } from "../utils";
+import { useChatStore } from "../store";
+import { MaskAvatar } from "./mask";

 function getIntersectionArea(aRect: DOMRect, bRect: DOMRect) {
  const xmin = Math.max(aRect.x, bRect.x);
@@ -17,7 +21,7 @@ function getIntersectionArea(aRect: DOMRect, bRect: DOMRect) {
  return intersectionArea;
 }

-function Mask(props: { avatar: string; name: string }) {
+function MaskItem(props: { mask: Mask; onClick?: () => void }) {
  const domRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
@@ -43,27 +47,62 @@ function Mask(props: { avatar: string; name: string }) {
  }, [domRef]);

  return (
-    <div className={styles["mask"]} ref={domRef}>
-      <div className={styles["mask-avatar"]}>
-        <EmojiAvatar avatar={props.avatar} />
-      </div>
-      <div className={styles["mask-name"] + " one-line"}>{props.name}</div>
+    <div className={styles["mask"]} ref={domRef} onClick={props.onClick}>
+      <MaskAvatar mask={props.mask} />
+      <div className={styles["mask-name"] + " one-line"}>{props.mask.name}</div>
    </div>
  );
 }

+function useMaskGroup(masks: Mask[]) {
+  const [groups, setGroups] = useState<Mask[][]>([]);
+
+  useEffect(() => {
+    const appBody = document.getElementById(SlotID.AppBody);
+    if (!appBody) return;
+
+    const rect = appBody.getBoundingClientRect();
+    const maxWidth = rect.width;
+    const maxHeight = rect.height * 0.6;
+    const maskItemWidth = 120;
+    const maskItemHeight = 50;
+
+    const randomMask = () => masks[Math.floor(Math.random() * masks.length)];
+    let maskIndex = 0;
+    const nextMask = () => masks[maskIndex++ % masks.length];
+
+    const rows = Math.ceil(maxHeight / maskItemHeight);
+    const cols = Math.ceil(maxWidth / maskItemWidth);
+
+    const newGroups = new Array(rows)
+      .fill(0)
+      .map((_, _i) =>
+        new Array(cols)
+          .fill(0)
+          .map((_, j) => (j < 1 || j > cols - 2 ? randomMask() : nextMask())),
+      );
+
+    setGroups(newGroups);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return groups;
+}
+
 export function NewChat() {
-  const masks = new Array(20).fill(0).map(() =>
-    new Array(10).fill(0).map((_, i) => ({
-      avatar: "1f" + (Math.round(Math.random() * 50) + 600).toString(),
-      name: ["撩妹达人", "编程高手", "情感大师", "健康医生", "数码通"][
-        Math.floor(Math.random() * 4)
-      ],
-    })),
-  );
+  const chatStore = useChatStore();
+  const maskStore = useMaskStore();
+  const masks = maskStore.getAll();
+  const groups = useMaskGroup(masks);

  const navigate = useNavigate();

+  const startChat = (mask?: Mask) => {
+    chatStore.newSession(mask);
+    navigate(Path.Chat);
+  };
+
  return (
    <div className={styles["new-chat"]}>
      <div className={styles["mask-header"]}>
@@ -72,7 +111,7 @@ export function NewChat() {
          text="返回"
          onClick={() => navigate(-1)}
        ></IconButton>
-        <IconButton text="跳过"></IconButton>
+        <IconButton text="跳过" onClick={() => startChat()}></IconButton>
      </div>
      <div className={styles["mask-cards"]}>
        <div className={styles["mask-card"]}>
@@ -91,13 +130,18 @@ export function NewChat() {
        现在开始，与面具背后的灵魂思维碰撞
      </div>

-      <input className={styles["search-bar"]} placeholder="搜索" type="text" />
+      <input
+        className={styles["search-bar"]}
+        placeholder="搜索"
+        type="text"
+        onClick={() => navigate(Path.Masks)}
+      />

      <div className={styles["masks"]}>
-        {masks.map((masks, i) => (
+        {groups.map((masks, i) => (
          <div key={i} className={styles["mask-row"]}>
            {masks.map((mask, index) => (
-              <Mask key={index} {...mask} />
+              <MaskItem key={index} mask={mask} onClick={startChat} />
            ))}
          </div>
        ))}