Merge branch 'Yidadaa:main' into main

2025-11-16 05:53:42 +08:00 · 2023-09-01 04:14:19 +08:00
parent 6d7e536758 1f94ae7888
commit 1bea5604a7
55 changed files with 2123 additions and 321 deletions
--- a/app/components/auth.tsx
+++ b/app/components/auth.tsx
@@ -7,6 +7,8 @@ import { useAccessStore } from "../store";
 import Locale from "../locales";

 import BotIcon from "../icons/bot.svg";
+import { useEffect } from "react";
+import { getClientConfig } from "../config/client";

 export function AuthPage() {
  const navigate = useNavigate();
@@ -14,6 +16,13 @@ export function AuthPage() {

  const goHome = () => navigate(Path.Home);

+  useEffect(() => {
+    if (getClientConfig()?.isApp) {
+      navigate(Path.Settings);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
  return (
    <div className={styles["auth-page"]}>
      <div className={`no-dark ${styles["auth-logo"]}`}>
--- a/app/components/chat.module.scss
+++ b/app/components/chat.module.scss
@@ -14,10 +14,11 @@
    padding: 4px 10px;
    animation: slide-in ease 0.3s;
    box-shadow: var(--card-shadow);
-    transition: all ease 0.3s;
+    transition: width ease 0.3s;
    align-items: center;
    height: 16px;
    width: var(--icon-width);
+    overflow: hidden;

    &:not(:last-child) {
      margin-right: 5px;
@@ -29,14 +30,16 @@
      opacity: 0;
      transform: translateX(-5px);
      transition: all ease 0.3s;
-      transition-delay: 0.1s;
      pointer-events: none;
    }

    &:hover {
+      --delay: 0.5s;
      width: var(--full-width);
+      transition-delay: var(--delay);

      .text {
+        transition-delay: var(--delay);
        opacity: 1;
        transform: translate(0);
      }
@@ -346,6 +349,14 @@
      padding: 7px;
    }
  }
+  /* Specific styles for iOS devices */
+  @media screen and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 2) {
+    @supports (-webkit-touch-callout: none) {
+      .chat-message-edit {
+        top: -8%;
+      }
+    }
+  }
 }

 .chat-message-status {
--- a/app/components/chat.tsx
+++ b/app/components/chat.tsx
@@ -74,7 +74,13 @@ import {
  showToast,
 } from "./ui-lib";
 import { useLocation, useNavigate } from "react-router-dom";
-import { LAST_INPUT_KEY, Path, REQUEST_TIMEOUT_MS } from "../constant";
+import {
+  CHAT_PAGE_SIZE,
+  LAST_INPUT_KEY,
+  MAX_RENDER_MSG_COUNT,
+  Path,
+  REQUEST_TIMEOUT_MS,
+} from "../constant";
 import { Avatar } from "./emoji";
 import { ContextPrompts, MaskAvatar, MaskConfig } from "./mask";
 import { useMaskStore } from "../store/mask";
@@ -371,23 +377,29 @@ function useScrollToBottom() {
  // for auto-scroll
  const scrollRef = useRef<HTMLDivElement>(null);
  const [autoScroll, setAutoScroll] = useState(true);
-  const scrollToBottom = useCallback(() => {
+
+  function scrollDomToBottom() {
    const dom = scrollRef.current;
    if (dom) {
-      requestAnimationFrame(() => dom.scrollTo(0, dom.scrollHeight));
+      requestAnimationFrame(() => {
+        setAutoScroll(true);
+        dom.scrollTo(0, dom.scrollHeight);
+      });
    }
-  }, []);
+  }

  // auto scroll
  useEffect(() => {
-    autoScroll && scrollToBottom();
+    if (autoScroll) {
+      scrollDomToBottom();
+    }
  });

  return {
    scrollRef,
    autoScroll,
    setAutoScroll,
-    scrollToBottom,
+    scrollDomToBottom,
  };
 }

@@ -504,6 +516,7 @@ export function ChatActions(props: {

      {showModelSelector && (
        <Selector
+          defaultSelectedValue={currentModel}
          items={models.map((m) => ({
            title: m,
            value: m,
@@ -531,7 +544,7 @@ export function EditMessageModal(props: { onClose: () => void }) {
  return (
    <div className="modal-mask">
      <Modal
-        title={Locale.UI.Edit}
+        title={Locale.Chat.EditMessage.Title}
        onClose={props.onClose}
        actions={[
          <IconButton
@@ -585,14 +598,11 @@ export function EditMessageModal(props: { onClose: () => void }) {
  );
 }

-export function Chat() {
+function _Chat() {
  type RenderMessage = ChatMessage & { preview?: boolean };

  const chatStore = useChatStore();
-  const [session, sessionIndex] = useChatStore((state) => [
-    state.currentSession(),
-    state.currentSessionIndex,
-  ]);
+  const session = chatStore.currentSession();
  const config = useAppConfig();
  const fontSize = config.fontSize;

@@ -602,16 +612,11 @@ export function Chat() {
  const [userInput, setUserInput] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const { submitKey, shouldSubmit } = useSubmitHandler();
-  const { scrollRef, setAutoScroll, scrollToBottom } = useScrollToBottom();
+  const { scrollRef, setAutoScroll, scrollDomToBottom } = useScrollToBottom();
  const [hitBottom, setHitBottom] = useState(true);
  const isMobileScreen = useMobileScreen();
  const navigate = useNavigate();

-  const onChatBodyScroll = (e: HTMLElement) => {
-    const isTouchBottom = e.scrollTop + e.clientHeight >= e.scrollHeight - 10;
-    setHitBottom(isTouchBottom);
-  };
-
  // prompt hints
  const promptStore = usePromptStore();
  const [promptHints, setPromptHints] = useState<RenderPompt[]>([]);
@@ -797,7 +802,7 @@ export function Chat() {
      (m) => m.id === message.id,
    );

-    if (resendingIndex <= 0 || resendingIndex >= session.messages.length) {
+    if (resendingIndex < 0 || resendingIndex >= session.messages.length) {
      console.error("[Chat] failed to find resending message", message);
      return;
    }
@@ -853,10 +858,9 @@ export function Chat() {
    });
  };

-  const context: RenderMessage[] = session.mask.hideContext
-    ? []
-    : session.mask.context.slice();
-
+  const context: RenderMessage[] = useMemo(() => {
+    return session.mask.hideContext ? [] : session.mask.context.slice();
+  }, [session.mask.context, session.mask.hideContext]);
  const accessStore = useAccessStore();

  if (
@@ -870,50 +874,98 @@ export function Chat() {
    context.push(copiedHello);
  }

+  // preview messages
+  const renderMessages = useMemo(() => {
+    return context
+      .concat(session.messages as RenderMessage[])
+      .concat(
+        isLoading
+          ? [
+              {
+                ...createMessage({
+                  role: "assistant",
+                  content: "……",
+                }),
+                preview: true,
+              },
+            ]
+          : [],
+      )
+      .concat(
+        userInput.length > 0 && config.sendPreviewBubble
+          ? [
+              {
+                ...createMessage({
+                  role: "user",
+                  content: userInput,
+                }),
+                preview: true,
+              },
+            ]
+          : [],
+      );
+  }, [
+    config.sendPreviewBubble,
+    context,
+    isLoading,
+    session.messages,
+    userInput,
+  ]);
+
+  const [msgRenderIndex, _setMsgRenderIndex] = useState(
+    Math.max(0, renderMessages.length - CHAT_PAGE_SIZE),
+  );
+  function setMsgRenderIndex(newIndex: number) {
+    newIndex = Math.min(renderMessages.length - CHAT_PAGE_SIZE, newIndex);
+    newIndex = Math.max(0, newIndex);
+    _setMsgRenderIndex(newIndex);
+  }
+
+  const messages = useMemo(() => {
+    const endRenderIndex = Math.min(
+      msgRenderIndex + 3 * CHAT_PAGE_SIZE,
+      renderMessages.length,
+    );
+    return renderMessages.slice(msgRenderIndex, endRenderIndex);
+  }, [msgRenderIndex, renderMessages]);
+
+  const onChatBodyScroll = (e: HTMLElement) => {
+    const bottomHeight = e.scrollTop + e.clientHeight;
+    const edgeThreshold = e.clientHeight;
+
+    const isTouchTopEdge = e.scrollTop <= edgeThreshold;
+    const isTouchBottomEdge = bottomHeight >= e.scrollHeight - edgeThreshold;
+    const isHitBottom = bottomHeight >= e.scrollHeight - (isMobileScreen ? 0 : 10);
+
+    const prevPageMsgIndex = msgRenderIndex - CHAT_PAGE_SIZE;
+    const nextPageMsgIndex = msgRenderIndex + CHAT_PAGE_SIZE;
+
+    if (isTouchTopEdge && !isTouchBottomEdge) {
+      setMsgRenderIndex(prevPageMsgIndex);
+    } else if (isTouchBottomEdge) {
+      setMsgRenderIndex(nextPageMsgIndex);
+    }
+
+    setHitBottom(isHitBottom);
+    setAutoScroll(isHitBottom);
+  };
+
+  function scrollToBottom() {
+    setMsgRenderIndex(renderMessages.length - CHAT_PAGE_SIZE);
+    scrollDomToBottom();
+  }
+
  // clear context index = context length + index in messages
  const clearContextIndex =
    (session.clearContextIndex ?? -1) >= 0
-      ? session.clearContextIndex! + context.length
+      ? session.clearContextIndex! + context.length - msgRenderIndex
      : -1;

-  // preview messages
-  const messages = context
-    .concat(session.messages as RenderMessage[])
-    .concat(
-      isLoading
-        ? [
-            {
-              ...createMessage({
-                role: "assistant",
-                content: "……",
-              }),
-              preview: true,
-            },
-          ]
-        : [],
-    )
-    .concat(
-      userInput.length > 0 && config.sendPreviewBubble
-        ? [
-            {
-              ...createMessage({
-                role: "user",
-                content: userInput,
-              }),
-              preview: true,
-            },
-          ]
-        : [],
-    );
-
  const [showPromptModal, setShowPromptModal] = useState(false);

  const clientConfig = useMemo(() => getClientConfig(), []);

-  const location = useLocation();
-  const isChat = location.pathname === Path.Chat;
-
-  const autoFocus = !isMobileScreen || isChat; // only focus in chat page
+  const autoFocus = !isMobileScreen; // wont auto focus on mobile screen
  const showMaxIcon = !isMobileScreen && !clientConfig?.isApp;

  useCommand({
@@ -1035,7 +1087,6 @@ export function Chat() {
        ref={scrollRef}
        onScroll={(e) => onChatBodyScroll(e.currentTarget)}
        onMouseDown={() => inputRef.current?.blur()}
-        onWheel={(e) => setAutoScroll(hitBottom && e.deltaY > 0)}
        onTouchStart={() => {
          inputRef.current?.blur();
          setAutoScroll(false);
@@ -1053,7 +1104,7 @@ export function Chat() {
          const shouldShowClearContextDivider = i === clearContextIndex - 1;

          return (
-            <Fragment key={i}>
+            <Fragment key={message.id}>
              <div
                className={
                  isUser ? styles["chat-message-user"] : styles["chat-message"]
@@ -1072,9 +1123,9 @@ export function Chat() {
                              10,
                            );
                            chatStore.updateCurrentSession((session) => {
-                              const m = session.messages.find(
-                                (m) => m.id === message.id,
-                              );
+                              const m = session.mask.context
+                                .concat(session.messages)
+                                .find((m) => m.id === message.id);
                              if (m) {
                                m.content = newMessage;
                              }
@@ -1137,7 +1188,8 @@ export function Chat() {
                    <Markdown
                      content={message.content}
                      loading={
-                        (message.preview || message.content.length === 0) &&
+                        (message.preview || message.streaming) &&
+                        message.content.length === 0 &&
                        !isUser
                      }
                      onContextMenu={(e) => onRightClick(e, message)}
@@ -1147,7 +1199,7 @@ export function Chat() {
                      }}
                      fontSize={fontSize}
                      parentRef={scrollRef}
-                      defaultShow={i >= messages.length - 10}
+                      defaultShow={i >= messages.length - 6}
                    />
                  </div>

@@ -1191,8 +1243,8 @@ export function Chat() {
            onInput={(e) => onInput(e.currentTarget.value)}
            value={userInput}
            onKeyDown={onInputKeyDown}
-            onFocus={() => setAutoScroll(true)}
-            onBlur={() => setAutoScroll(false)}
+            onFocus={scrollToBottom}
+            onClick={scrollToBottom}
            rows={inputRows}
            autoFocus={autoFocus}
            style={{
@@ -1223,3 +1275,9 @@ export function Chat() {
    </div>
  );
 }
+
+export function Chat() {
+  const chatStore = useChatStore();
+  const sessionIndex = chatStore.currentSessionIndex;
+  return <_Chat key={sessionIndex}></_Chat>;
+}
--- a/app/components/exporter.tsx
+++ b/app/components/exporter.tsx
@@ -127,7 +127,7 @@ export function MessageExporter() {
  ];
  const { currentStep, setCurrentStepIndex, currentStepIndex } =
    useSteps(steps);
-  const formats = ["text", "image"] as const;
+  const formats = ["text", "image", "json"] as const;
  type ExportFormat = (typeof formats)[number];

  const [exportConfig, setExportConfig] = useState({
@@ -157,7 +157,21 @@ export function MessageExporter() {
    session.mask.context,
    selection,
  ]);
-
+  function preview() {
+    if (exportConfig.format === "text") {
+      return (
+        <MarkdownPreviewer messages={selectedMessages} topic={session.topic} />
+      );
+    } else if (exportConfig.format === "json") {
+      return (
+        <JsonPreviewer messages={selectedMessages} topic={session.topic} />
+      );
+    } else {
+      return (
+        <ImagePreviewer messages={selectedMessages} topic={session.topic} />
+      );
+    }
+  }
  return (
    <>
      <Steps
@@ -212,16 +226,7 @@ export function MessageExporter() {
        />
      </div>
      {currentStep.value === "preview" && (
-        <div className={styles["message-exporter-body"]}>
-          {exportConfig.format === "text" ? (
-            <MarkdownPreviewer
-              messages={selectedMessages}
-              topic={session.topic}
-            />
-          ) : (
-            <ImagePreviewer messages={selectedMessages} topic={session.topic} />
-          )}
-        </div>
+        <div className={styles["message-exporter-body"]}>{preview()}</div>
      )}
    </>
  );
@@ -378,7 +383,7 @@ export function PreviewActions(props: {
 function ExportAvatar(props: { avatar: string }) {
  if (props.avatar === DEFAULT_MASK_AVATAR) {
    return (
-      <NextImage
+      <img
        src={BotIcon.src}
        width={30}
        height={30}
@@ -388,7 +393,7 @@ function ExportAvatar(props: { avatar: string }) {
    );
  }

-  return <Avatar avatar={props.avatar}></Avatar>;
+  return <Avatar avatar={props.avatar} />;
 }

 export function ImagePreviewer(props: {
@@ -417,6 +422,7 @@ export function ImagePreviewer(props: {
          ])
          .then(() => {
            showToast(Locale.Copy.Success);
+            refreshPreview();
          });
      } catch (e) {
        console.error("[Copy Image] ", e);
@@ -442,11 +448,19 @@ export function ImagePreviewer(props: {
          link.download = `${props.topic}.png`;
          link.href = blob;
          link.click();
+          refreshPreview();
        }
      })
      .catch((e) => console.log("[Export Image] ", e));
  };

+  const refreshPreview = () => {
+    const dom = previewRef.current;
+    if (dom) {
+      dom.innerHTML = dom.innerHTML; // Refresh the content of the preview by resetting its HTML for fix a bug glitching
+    }
+  };
+
  return (
    <div className={styles["image-previewer"]}>
      <PreviewActions
@@ -545,12 +559,12 @@ export function MarkdownPreviewer(props: {
  const download = () => {
    downloadAs(mdText, `${props.topic}.md`);
  };
-
  return (
    <>
      <PreviewActions
        copy={copy}
        download={download}
+        showCopy={true}
        messages={props.messages}
      />
      <div className="markdown-body">
@@ -559,3 +573,46 @@ export function MarkdownPreviewer(props: {
    </>
  );
 }
+
+// modified by BackTrackZ now it's looks better
+
+export function JsonPreviewer(props: {
+  messages: ChatMessage[];
+  topic: string;
+}) {
+  const msgs = {
+    messages: [
+      {
+        role: "system",
+        content: `${Locale.FineTuned.Sysmessage} ${props.topic}`,
+      },
+      ...props.messages.map((m) => ({
+        role: m.role,
+        content: m.content,
+      })),
+    ],
+  };
+  const mdText = "```json\n" + JSON.stringify(msgs, null, 2) + "\n```";
+  const minifiedJson = JSON.stringify(msgs);
+
+  const copy = () => {
+    copyToClipboard(minifiedJson);
+  };
+  const download = () => {
+    downloadAs(JSON.stringify(msgs), `${props.topic}.json`);
+  };
+
+  return (
+    <>
+      <PreviewActions
+        copy={copy}
+        download={download}
+        showCopy={false}
+        messages={props.messages}
+      />
+      <div className="markdown-body" onClick={copy}>
+        <Markdown content={mdText} />
+      </div>
+    </>
+  );
+}
--- a/app/components/home.module.scss
+++ b/app/components/home.module.scss
@@ -174,6 +174,7 @@
  user-select: none;
  border: 2px solid transparent;
  position: relative;
+  content-visibility: auto;
 }

 .chat-item:hover {
--- a/app/components/home.tsx
+++ b/app/components/home.tsx
@@ -15,7 +15,7 @@ import dynamic from "next/dynamic";
 import { Path, SlotID } from "../constant";
 import { ErrorBoundary } from "./error";

-import { getLang } from "../locales";
+import { getISOLang, getLang } from "../locales";

 import {
  HashRouter as Router,
@@ -86,6 +86,17 @@ export function useSwitchTheme() {
  }, [config.theme]);
 }

+function useHtmlLang() {
+  useEffect(() => {
+    const lang = getISOLang();
+    const htmlLang = document.documentElement.lang;
+
+    if (lang !== htmlLang) {
+      document.documentElement.lang = lang;
+    }
+  }, []);
+}
+
 const useHasHydrated = () => {
  const [hasHydrated, setHasHydrated] = useState<boolean>(false);

@@ -104,8 +115,7 @@ const loadAsyncGoogleFont = () => {
    getClientConfig()?.buildMode === "export" ? remoteFontUrl : proxyFontUrl;
  linkEl.rel = "stylesheet";
  linkEl.href =
-    googleFontUrl +
-    "/css2?family=Noto+Sans+SC:wght@300;400;700;900&display=swap";
+    googleFontUrl + "/css2?family=Noto+Sans:wght@300;400;700;900&display=swap";
  document.head.appendChild(linkEl);
 };

@@ -169,6 +179,7 @@ export function useLoadData() {
 export function Home() {
  useSwitchTheme();
  useLoadData();
+  useHtmlLang();

  useEffect(() => {
    console.log("[Config] got config from build time", getClientConfig());
--- a/app/components/markdown.tsx
+++ b/app/components/markdown.tsx
@@ -38,12 +38,6 @@ export function Mermaid(props: { code: string }) {
    if (!svg) return;
    const text = new XMLSerializer().serializeToString(svg);
    const blob = new Blob([text], { type: "image/svg+xml" });
-    console.log(blob);
-    // const url = URL.createObjectURL(blob);
-    // const win = window.open(url);
-    // if (win) {
-    //   win.onload = () => URL.revokeObjectURL(url);
-    // }
    showImageModal(URL.createObjectURL(blob));
  }

@@ -121,6 +115,7 @@ function _MarkDownContent(props: { content: string }) {
      ]}
      components={{
        pre: PreCode,
+        p: (pProps) => <p {...pProps} dir="auto" />,
        a: (aProps) => {
          const href = aProps.href || "";
          const isInternal = /^\/#/i.test(href);
@@ -146,70 +141,22 @@ export function Markdown(
  } & React.DOMAttributes<HTMLDivElement>,
 ) {
  const mdRef = useRef<HTMLDivElement>(null);
-  const renderedHeight = useRef(0);
-  const renderedWidth = useRef(0);
-  const inView = useRef(!!props.defaultShow);
-  const [_, triggerRender] = useState(0);
-  const checkInView = useThrottledCallback(
-    () => {
-      const parent = props.parentRef?.current;
-      const md = mdRef.current;
-      if (parent && md && !props.defaultShow) {
-        const parentBounds = parent.getBoundingClientRect();
-        const twoScreenHeight = Math.max(500, parentBounds.height * 2);
-        const mdBounds = md.getBoundingClientRect();
-        const parentTop = parentBounds.top - twoScreenHeight;
-        const parentBottom = parentBounds.bottom + twoScreenHeight;
-        const isOverlap =
-          Math.max(parentTop, mdBounds.top) <=
-          Math.min(parentBottom, mdBounds.bottom);
-        inView.current = isOverlap;
-        triggerRender(Date.now());
-      }
-
-      if (inView.current && md) {
-        const rect = md.getBoundingClientRect();
-        renderedHeight.current = Math.max(renderedHeight.current, rect.height);
-        renderedWidth.current = Math.max(renderedWidth.current, rect.width);
-      }
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    },
-    300,
-    {
-      leading: true,
-      trailing: true,
-    },
-  );
-
-  useEffect(() => {
-    props.parentRef?.current?.addEventListener("scroll", checkInView);
-    checkInView();
-    return () =>
-      props.parentRef?.current?.removeEventListener("scroll", checkInView);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const getSize = (x: number) => (!inView.current && x > 0 ? x : "auto");

  return (
    <div
      className="markdown-body"
      style={{
        fontSize: `${props.fontSize ?? 14}px`,
-        height: getSize(renderedHeight.current),
-        width: getSize(renderedWidth.current),
-        direction: /[\u0600-\u06FF]/.test(props.content) ? "rtl" : "ltr",
      }}
      ref={mdRef}
      onContextMenu={props.onContextMenu}
      onDoubleClickCapture={props.onDoubleClickCapture}
    >
-      {inView.current &&
-        (props.loading ? (
-          <LoadingIcon />
-        ) : (
-          <MarkdownContent content={props.content} />
-        ))}
+      {props.loading ? (
+        <LoadingIcon />
+      ) : (
+        <MarkdownContent content={props.content} />
+      )}
    </div>
  );
 }
--- a/app/components/model-config.tsx
+++ b/app/components/model-config.tsx
@@ -76,7 +76,7 @@ export function ModelConfigList(props: {
        <input
          type="number"
          min={100}
-          max={32000}
+          max={100000}
          value={props.modelConfig.max_tokens}
          onChange={(e) =>
            props.updateConfig(
@@ -169,7 +169,7 @@ export function ModelConfigList(props: {
          title={props.modelConfig.historyMessageCount.toString()}
          value={props.modelConfig.historyMessageCount}
          min="0"
-          max="32"
+          max="64"
          step="1"
          onChange={(e) =>
            props.updateConfig(
--- a/app/components/settings.tsx
+++ b/app/components/settings.tsx
@@ -529,6 +529,22 @@ export function Settings() {
            ></InputRange>
          </ListItem>

+          <ListItem
+            title={Locale.Settings.AutoGenerateTitle.Title}
+            subTitle={Locale.Settings.AutoGenerateTitle.SubTitle}
+          >
+            <input
+              type="checkbox"
+              checked={config.enableAutoGenerateTitle}
+              onChange={(e) =>
+                updateConfig(
+                  (config) =>
+                    (config.enableAutoGenerateTitle = e.currentTarget.checked),
+                )
+              }
+            ></input>
+          </ListItem>
+
          <ListItem
            title={Locale.Settings.SendPreviewBubble.Title}
            subTitle={Locale.Settings.SendPreviewBubble.SubTitle}
--- a/app/components/sidebar.tsx
+++ b/app/components/sidebar.tsx
@@ -174,7 +174,7 @@ export function SideBar(props: { className?: string }) {
            </Link>
          </div>
          <div className={styles["sidebar-action"]}>
-            <a href={REPO_URL} target="_blank">
+            <a href={REPO_URL} target="_blank" rel="noopener noreferrer">
              <IconButton icon={<GithubIcon />} shadow />
            </a>
          </div>
--- a/app/components/ui-lib.tsx
+++ b/app/components/ui-lib.tsx
@@ -377,7 +377,7 @@ export function showPrompt(content: any, value = "", rows = 3) {
  };

  return new Promise<string>((resolve) => {
-    let userInput = "";
+    let userInput = value;

    root.render(
      <Modal
@@ -443,6 +443,7 @@ export function Selector<T>(props: {
    subTitle?: string;
    value: T;
  }>;
+  defaultSelectedValue?: T;
  onSelection?: (selection: T[]) => void;
  onClose?: () => void;
  multiple?: boolean;
@@ -452,6 +453,7 @@ export function Selector<T>(props: {
      <div className={styles["selector-content"]}>
        <List>
          {props.items.map((item, i) => {
+            const selected = props.defaultSelectedValue === item.value;
            return (
              <ListItem
                className={styles["selector-item"]}
@@ -462,7 +464,20 @@ export function Selector<T>(props: {
                  props.onSelection?.([item.value]);
                  props.onClose?.();
                }}
-              ></ListItem>
+              >
+                {selected ? (
+                  <div
+                    style={{
+                      height: 10,
+                      width: 10,
+                      backgroundColor: "var(--primary)",
+                      borderRadius: 10,
+                    }}
+                  ></div>
+                ) : (
+                  <></>
+                )}
+              </ListItem>
            );
          })}
        </List>