Fix UI / UX Page [Markdown] (#87)

* fix: Yidadaa#3189 should correct math eq in exporter * fix: Yidadaa#2841 dollar sign conflict with latex math --------- Co-authored-by: Yidadaa <[email protected]>
H0llyW00dzZ · Nov 12, 2023 · 328bcea · 328bcea
1 parent cab9cff
commit 328bcea
Show file tree

Hide file tree

Showing 10 changed files with 57 additions and 73 deletions.
diff --git a/app/components/chat-list.tsx b/app/components/chat-list.tsx
@@ -61,7 +61,10 @@ export function ChatItem(props: {
           {props.narrow ? (
             <div className={styles["chat-item-narrow"]}>
               <div className={styles["chat-item-avatar"] + " no-dark"}>
-                <MaskAvatar mask={props.mask} />
+                <MaskAvatar
+                  avatar={props.mask.avatar}
+                  model={props.mask.modelConfig.model}
+                />
               </div>
               <div className={styles["chat-item-narrow-count"]}>
                 {props.count}

diff --git a/app/components/chat.tsx b/app/components/chat.tsx
@@ -1318,7 +1318,12 @@ function _Chat() {
                           {["system"].includes(message.role) ? (
                             <Avatar avatar="2699-fe0f" />
                           ) : (
-                            <MaskAvatar mask={session.mask} />
+                            <MaskAvatar
+                              avatar={session.mask.avatar}
+                              model={
+                                message.model || session.mask.modelConfig.model
+                              }
+                            />
                           )}
                         </>
                       )}

diff --git a/app/components/exporter.module.scss b/app/components/exporter.module.scss
@@ -186,7 +186,8 @@
         box-shadow: var(--card-shadow);
         border: var(--border-in-light);
 
-        *:not(li) {
+        code,
+        pre {
           overflow: hidden;
         }
       }

diff --git a/app/components/exporter.tsx b/app/components/exporter.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable @next/next/no-img-element */
-import { ChatMessage, useAppConfig, useChatStore } from "../store";
+import { ChatMessage, ModelType, useAppConfig, useChatStore } from "../store";
 import Locale from "../locales";
 import styles from "./exporter.module.scss";
 import {
@@ -276,7 +276,8 @@ export function RenderExport(props: {
     });
 
     props.onRender(renderMsgs);
-  });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   return (
     <div ref={domRef}>
@@ -679,8 +680,6 @@ export function MarkdownPreviewer(props: {
   );
 }
 
-// modified by BackTrackZ now it's looks better
-
 export function JsonPreviewer(props: {
   messages: ChatMessage[];
   topic: string;

diff --git a/app/components/markdown.tsx b/app/components/markdown.tsx
@@ -11,9 +11,8 @@ import mermaid from "mermaid";
 
 import LoadingIcon from "../icons/three-dots.svg";
 import React from "react";
-import { useDebouncedCallback, useThrottledCallback } from "use-debounce";
+import { useDebouncedCallback } from "use-debounce";
 import { showImageModal } from "./ui-lib";
-import { isIOS, isMacOS } from "../utils"; // Import the isIOS & isMacOS functions from the utils file
 
 export function Mermaid(props: { code: string }) {
   const ref = useRef<HTMLDivElement>(null);
@@ -100,54 +99,28 @@ export function PreCode(props: { children: any }) {
   );
 }
 
-function escapeMarkdownContent(content: string): string {
-  const userAgent = navigator.userAgent.toLowerCase();
-  const isAppleIosDevice = isIOS() || isMacOS(); // Load isAppleDevice from isIOS functions
-  // According to this post: https://www.drupal.org/project/next_webform/issues/3358901
-  // iOS 16.4 is the first version to support lookbehind
-  const iosVersionSupportsLookBehind = 16.4;
-  let doesIosSupportLookBehind = false;
-
-  if (isAppleIosDevice) {
-    const match = /os (\d+([_.]\d+)+)/.exec(userAgent);
-    if (match && match[1]) {
-      const iosVersion = parseFloat(match[1].replace("_", "."));
-      doesIosSupportLookBehind = iosVersion >= iosVersionSupportsLookBehind;
+function escapeDollarNumber(text: string) {
+  let escapedText = "";
+
+  for (let i = 0; i < text.length; i += 1) {
+    let char = text[i];
+    const nextChar = text[i + 1] || " ";
+
+    if (char === "$" && nextChar >= "0" && nextChar <= "9") {
+      char = "\\$";
     }
-  }
 
-  if (isAppleIosDevice && !doesIosSupportLookBehind) {
-    return content.replace(
-      // Exclude code blocks & math block from replacement
-      // custom-regex for unsupported Apple devices
-      /(`{3}[\s\S]*?`{3}|`[^`]*`)|(\$(?!\$))/g,
-      (match, codeBlock) => {
-        if (codeBlock) {
-          return match; // Return the code block as it is
-        } else {
-          return "&#36;"; // Escape dollar signs outside of code blocks
-        }
-      }
-    );
-  } else {
-    return content.replace(
-      // Exclude code blocks & math block from replacement
-      /(`{3}[\s\S]*?`{3}|`[^`]*`)|(?<!\$)(\$(?!\$))/g,
-      (match, codeBlock) => {
-        if (codeBlock) {
-          return match; // Return the code block as it is
-        } else {
-          return "&#36;"; // Escape dollar signs outside of code blocks
-        }
-      }
-    );
+    escapedText += char;
   }
+
+  return escapedText;
 }
 
 function _MarkDownContent(props: { content: string }) {
-  const escapedContent = useMemo(() => escapeMarkdownContent(props.content), [
-    props.content,
-  ]);
+  const escapedContent = useMemo(
+    () => escapeDollarNumber(props.content),
+    [props.content],
+  );
 
   return (
     <ReactMarkdown

diff --git a/app/components/mask.tsx b/app/components/mask.tsx
@@ -18,6 +18,7 @@ import {
   ChatMessage,
   createMessage,
   ModelConfig,
+  ModelType,
   useAppConfig,
   useChatStore,
 } from "../store";
@@ -58,11 +59,11 @@ function reorder<T>(list: T[], startIndex: number, endIndex: number): T[] {
   return result;
 }
 
-export function MaskAvatar(props: { mask: Mask }) {
-  return props.mask.avatar !== DEFAULT_MASK_AVATAR ? (
-    <Avatar avatar={props.mask.avatar} />
+export function MaskAvatar(props: { avatar: string; model?: ModelType }) {
+  return props.avatar !== DEFAULT_MASK_AVATAR ? (
+    <Avatar avatar={props.avatar} />
   ) : (
-    <Avatar model={props.mask.modelConfig.model} />
+    <Avatar model={props.model} />
   );
 }
 
@@ -123,7 +124,10 @@ export function MaskConfig(props: {
               onClick={() => setShowPicker(true)}
               style={{ cursor: "pointer" }}
             >
-              <MaskAvatar mask={props.mask} />
+              <MaskAvatar
+                avatar={props.mask.avatar}
+                model={props.mask.modelConfig.model}
+              />
             </div>
           </Popover>
         </ListItem>
@@ -397,7 +401,9 @@ export function MaskPage() {
   const onSearch = (text: string) => {
     setSearchText(text);
     if (text.length > 0) {
-      const result = allMasks.filter((m) => m.name.includes(text));
+      const result = allMasks.filter((m) =>
+        m.name.toLowerCase().includes(text.toLowerCase()),
+      );
       setSearchMasks(result);
     } else {
       setSearchMasks(allMasks);
@@ -524,7 +530,7 @@ export function MaskPage() {
               <div className={styles["mask-item"]} key={m.id}>
                 <div className={styles["mask-header"]}>
                   <div className={styles["mask-icon"]}>
-                    <MaskAvatar mask={m} />
+                    <MaskAvatar avatar={m.avatar} model={m.modelConfig.model} />
                   </div>
                   <div className={styles["mask-title"]}>
                     <div className={styles["mask-name"]}>{m.name}</div>

diff --git a/app/components/message-selector.tsx b/app/components/message-selector.tsx
@@ -208,7 +208,10 @@ export function MessageSelector(props: {
                 {m.role === "user" ? (
                   <Avatar avatar={config.avatar}></Avatar>
                 ) : (
-                  <MaskAvatar mask={session.mask} />
+                  <MaskAvatar
+                    avatar={session.mask.avatar}
+                    model={m.model || session.mask.modelConfig.model}
+                  />
                 )}
               </div>
               <div className={styles["body"]}>

diff --git a/app/components/new-chat.tsx b/app/components/new-chat.tsx
@@ -17,21 +17,13 @@ import { useCommand } from "../command";
 import { showConfirm } from "./ui-lib";
 import { BUILTIN_MASK_STORE } from "../masks";
 
-function getIntersectionArea(aRect: DOMRect, bRect: DOMRect) {
-  const xmin = Math.max(aRect.x, bRect.x);
-  const xmax = Math.min(aRect.x + aRect.width, bRect.x + bRect.width);
-  const ymin = Math.max(aRect.y, bRect.y);
-  const ymax = Math.min(aRect.y + aRect.height, bRect.y + bRect.height);
-  const width = xmax - xmin;
-  const height = ymax - ymin;
-  const intersectionArea = width < 0 || height < 0 ? 0 : width * height;
-  return intersectionArea;
-}
-
 function MaskItem(props: { mask: Mask; onClick?: () => void }) {
   return (
     <div className={styles["mask"]} onClick={props.onClick}>
-      <MaskAvatar mask={props.mask} />
+      <MaskAvatar
+        avatar={props.mask.avatar}
+        model={props.mask.modelConfig.model}
+      />
       <div className={styles["mask-name"] + " one-line"}>{props.mask.name}</div>
     </div>
   );

diff --git a/app/constant.ts b/app/constant.ts
@@ -97,6 +97,8 @@ You are ChatGPT, a large language model trained by OpenAI.
 Knowledge cutoff: {{cutoff}}
 Current model: {{model}}
 Current time: {{time}}
+Latex inline: $x^2$ 
+Latex block: $$e=mc^2$$
 `;
 
 export const SUMMARIZE_MODEL = "gpt-3.5-turbo";

diff --git a/app/locales/cn.ts b/app/locales/cn.ts
@@ -118,8 +118,8 @@ const cn = {
     Copy: "全部复制",
     Download: "下载文件",
     Share: "分享到 ShareGPT",
-    MessageFromYou: "来自你的消息",
-    MessageFromChatGPT: "来自 ChatGPT 的消息",
+    MessageFromYou: "用户",
+    MessageFromChatGPT: "ChatGPT",
     Format: {
       Title: "导出格式",
       SubTitle: "可以导出 Markdown 文本或者 PNG 图片",