Skip to content
This repository has been archived by the owner on Sep 15, 2024. It is now read-only.

Fix UI / UX Page [Markdown] #87

Merged
merged 2 commits into from
Nov 12, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion app/components/chat-list.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
7 changes: 6 additions & 1 deletion app/components/chat.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
/>
)}
</>
)}
Expand Down
3 changes: 2 additions & 1 deletion app/components/exporter.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -186,7 +186,8 @@
box-shadow: var(--card-shadow);
border: var(--border-in-light);

*:not(li) {
code,
pre {
overflow: hidden;
}
}
Expand Down
7 changes: 3 additions & 4 deletions app/components/exporter.tsx
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down Expand Up @@ -276,7 +276,8 @@ export function RenderExport(props: {
});

props.onRender(renderMsgs);
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

return (
<div ref={domRef}>
Expand Down Expand Up @@ -679,8 +680,6 @@ export function MarkdownPreviewer(props: {
);
}

// modified by BackTrackZ now it's looks better

export function JsonPreviewer(props: {
messages: ChatMessage[];
topic: string;
Expand Down
61 changes: 17 additions & 44 deletions app/components/markdown.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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
Expand Down
20 changes: 13 additions & 7 deletions app/components/mask.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import {
ChatMessage,
createMessage,
ModelConfig,
ModelType,
useAppConfig,
useChatStore,
} from "../store";
Expand Down Expand Up @@ -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} />
);
}

Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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>
Expand Down
5 changes: 4 additions & 1 deletion app/components/message-selector.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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"]}>
Expand Down
16 changes: 4 additions & 12 deletions app/components/new-chat.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
2 changes: 2 additions & 0 deletions app/constant.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
4 changes: 2 additions & 2 deletions app/locales/cn.ts
Original file line number Diff line number Diff line change
Expand Up @@ -118,8 +118,8 @@ const cn = {
Copy: "全部复制",
Download: "下载文件",
Share: "分享到 ShareGPT",
MessageFromYou: "来自你的消息",
MessageFromChatGPT: "来自 ChatGPT 的消息",
MessageFromYou: "用户",
MessageFromChatGPT: "ChatGPT",
Format: {
Title: "导出格式",
SubTitle: "可以导出 Markdown 文本或者 PNG 图片",
Expand Down