From 9e6617e3ca251260943ce0ebc15f2fff1022df26 Mon Sep 17 00:00:00 2001 From: Yidadaa Date: Thu, 6 Jul 2023 01:11:50 +0800 Subject: [PATCH 1/5] feat: add max icon for modals --- app/components/exporter.module.scss | 2 +- app/components/ui-lib.module.scss | 29 +++++++++++++++++++++++++---- app/components/ui-lib.tsx | 25 ++++++++++++++++++++++--- 3 files changed, 48 insertions(+), 8 deletions(-) diff --git a/app/components/exporter.module.scss b/app/components/exporter.module.scss index 3fde363f..c2046ffc 100644 --- a/app/components/exporter.module.scss +++ b/app/components/exporter.module.scss @@ -186,7 +186,7 @@ box-shadow: var(--card-shadow); border: var(--border-in-light); - * { + *:not(li) { overflow: hidden; } } diff --git a/app/components/ui-lib.module.scss b/app/components/ui-lib.module.scss index d2ddb7df..86b467e5 100644 --- a/app/components/ui-lib.module.scss +++ b/app/components/ui-lib.module.scss @@ -79,6 +79,19 @@ --modal-padding: 20px; + &-max { + width: 95vw; + max-width: unset; + height: 95vh; + display: flex; + flex-direction: column; + + .modal-content { + max-height: unset !important; + flex-grow: 1; + } + } + .modal-header { padding: var(--modal-padding); display: flex; @@ -91,11 +104,19 @@ font-size: 16px; } - .modal-close-btn { - cursor: pointer; + .modal-header-actions { + display: flex; - &:hover { - filter: brightness(1.2); + .modal-header-action { + cursor: pointer; + + &:not(:last-child) { + margin-right: 20px; + } + + &:hover { + filter: brightness(1.2); + } } } } diff --git a/app/components/ui-lib.tsx b/app/components/ui-lib.tsx index e02051c0..5e6a50dc 100644 --- a/app/components/ui-lib.tsx +++ b/app/components/ui-lib.tsx @@ -6,6 +6,8 @@ import EyeOffIcon from "../icons/eye-off.svg"; import DownIcon from "../icons/down.svg"; import ConfirmIcon from "../icons/confirm.svg"; import CancelIcon from "../icons/cancel.svg"; +import MaxIcon from "../icons/max.svg"; +import MinIcon from "../icons/min.svg"; import Locale from "../locales"; @@ -111,13 +113,30 @@ export function Modal(props: ModalProps) { // eslint-disable-next-line react-hooks/exhaustive-deps }, []); + const [isMax, setMax] = useState(false); + return ( -
+
{props.title}
-
- +
+
setMax(!isMax)} + > + {isMax ? : } +
+
+ +
From 6c6a2d08db4b8f74ded430c93125ffbc8f1d0eaf Mon Sep 17 00:00:00 2001 From: Yidadaa Date: Thu, 6 Jul 2023 01:26:06 +0800 Subject: [PATCH 2/5] feat: close #2267 display a modal to export image --- app/components/exporter.tsx | 31 +++++++++++++++++++++++++------ app/components/ui-lib.tsx | 3 ++- app/locales/cn.ts | 4 ++++ app/locales/en.ts | 4 ++++ 4 files changed, 35 insertions(+), 7 deletions(-) diff --git a/app/components/exporter.tsx b/app/components/exporter.tsx index 7765b77a..f26b3a7d 100644 --- a/app/components/exporter.tsx +++ b/app/components/exporter.tsx @@ -1,7 +1,8 @@ +/* eslint-disable @next/next/no-img-element */ import { ChatMessage, useAppConfig, useChatStore } from "../store"; import Locale from "../locales"; import styles from "./exporter.module.scss"; -import { List, ListItem, Modal, Select, showToast } from "./ui-lib"; +import { List, ListItem, Modal, Select, showModal, showToast } from "./ui-lib"; import { IconButton } from "./button"; import { copyToClipboard, downloadAs, useMobileScreen } from "../utils"; @@ -23,6 +24,7 @@ import { DEFAULT_MASK_AVATAR } from "../store/mask"; import { api } from "../client/api"; import { prettyObject } from "../utils/format"; import { EXPORT_MESSAGE_CLASS_NAME } from "../constant"; +import { getClientConfig } from "../config/client"; const Markdown = dynamic(async () => (await import("./markdown")).Markdown, { loading: () => , @@ -357,6 +359,24 @@ function ExportAvatar(props: { avatar: string }) { return ; } +export function showImageModal(img: string) { + showModal({ + title: Locale.Export.Image.Modal, + children: ( +
+ preview +
+ ), + defaultMax: true, + }); +} + export function ImagePreviewer(props: { messages: ChatMessage[]; topic: string; @@ -369,6 +389,7 @@ export function ImagePreviewer(props: { const previewRef = useRef(null); const copy = () => { + showToast(Locale.Export.Image.Toast); const dom = previewRef.current; if (!dom) return; toBlob(dom).then((blob) => { @@ -393,17 +414,15 @@ export function ImagePreviewer(props: { const isMobile = useMobileScreen(); const download = () => { + showToast(Locale.Export.Image.Toast); const dom = previewRef.current; if (!dom) return; toPng(dom) .then((blob) => { if (!blob) return; - if (isMobile) { - const image = new Image(); - image.src = blob; - const win = window.open(""); - win?.document.write(image.outerHTML); + if (isMobile || getClientConfig()?.isApp) { + showImageModal(blob); } else { const link = document.createElement("a"); link.download = `${props.topic}.png`; diff --git a/app/components/ui-lib.tsx b/app/components/ui-lib.tsx index 5e6a50dc..da520bd8 100644 --- a/app/components/ui-lib.tsx +++ b/app/components/ui-lib.tsx @@ -95,6 +95,7 @@ interface ModalProps { title: string; children?: any; actions?: JSX.Element[]; + defaultMax?: boolean; onClose?: () => void; } export function Modal(props: ModalProps) { @@ -113,7 +114,7 @@ export function Modal(props: ModalProps) { // eslint-disable-next-line react-hooks/exhaustive-deps }, []); - const [isMax, setMax] = useState(false); + const [isMax, setMax] = useState(!!props.defaultMax); return (
Date: Thu, 6 Jul 2023 01:33:30 +0800 Subject: [PATCH 3/5] feat: improve svg viewer --- app/components/exporter.tsx | 28 +++++++++------------------- app/components/markdown.tsx | 13 ++++++++----- app/components/ui-lib.tsx | 18 ++++++++++++++++++ 3 files changed, 35 insertions(+), 24 deletions(-) diff --git a/app/components/exporter.tsx b/app/components/exporter.tsx index f26b3a7d..f9d86a55 100644 --- a/app/components/exporter.tsx +++ b/app/components/exporter.tsx @@ -2,7 +2,15 @@ import { ChatMessage, useAppConfig, useChatStore } from "../store"; import Locale from "../locales"; import styles from "./exporter.module.scss"; -import { List, ListItem, Modal, Select, showModal, showToast } from "./ui-lib"; +import { + List, + ListItem, + Modal, + Select, + showImageModal, + showModal, + showToast, +} from "./ui-lib"; import { IconButton } from "./button"; import { copyToClipboard, downloadAs, useMobileScreen } from "../utils"; @@ -359,24 +367,6 @@ function ExportAvatar(props: { avatar: string }) { return ; } -export function showImageModal(img: string) { - showModal({ - title: Locale.Export.Image.Modal, - children: ( -
- preview -
- ), - defaultMax: true, - }); -} - export function ImagePreviewer(props: { messages: ChatMessage[]; topic: string; diff --git a/app/components/markdown.tsx b/app/components/markdown.tsx index 4db5f573..3168641c 100644 --- a/app/components/markdown.tsx +++ b/app/components/markdown.tsx @@ -12,6 +12,7 @@ import mermaid from "mermaid"; import LoadingIcon from "../icons/three-dots.svg"; import React from "react"; import { useDebouncedCallback, useThrottledCallback } from "use-debounce"; +import { showImageModal } from "./ui-lib"; export function Mermaid(props: { code: string }) { const ref = useRef(null); @@ -37,11 +38,13 @@ export function Mermaid(props: { code: string }) { if (!svg) return; const text = new XMLSerializer().serializeToString(svg); const blob = new Blob([text], { type: "image/svg+xml" }); - const url = URL.createObjectURL(blob); - const win = window.open(url); - if (win) { - win.onload = () => URL.revokeObjectURL(url); - } + console.log(blob); + // const url = URL.createObjectURL(blob); + // const win = window.open(url); + // if (win) { + // win.onload = () => URL.revokeObjectURL(url); + // } + showImageModal(URL.createObjectURL(blob)); } if (hasError) { diff --git a/app/components/ui-lib.tsx b/app/components/ui-lib.tsx index da520bd8..512044dc 100644 --- a/app/components/ui-lib.tsx +++ b/app/components/ui-lib.tsx @@ -1,3 +1,4 @@ +/* eslint-disable @next/next/no-img-element */ import styles from "./ui-lib.module.scss"; import LoadingIcon from "../icons/three-dots.svg"; import CloseIcon from "../icons/close.svg"; @@ -414,3 +415,20 @@ export function showPrompt(content: any, value = "", rows = 3) { ); }); } + +export function showImageModal(img: string) { + showModal({ + title: Locale.Export.Image.Modal, + children: ( +
+ preview +
+ ), + }); +} From 0373b2c9dd646c288e7027fcd3e93a9fecf94658 Mon Sep 17 00:00:00 2001 From: Yidadaa Date: Thu, 6 Jul 2023 02:03:31 +0800 Subject: [PATCH 4/5] feat: close #2266 use modal to switch model --- app/components/chat.tsx | 44 ++++++++++++++++++++++--------- app/components/ui-lib.module.scss | 32 ++++++++++++++++++++++ app/components/ui-lib.tsx | 40 +++++++++++++++++++++++++++- 3 files changed, 103 insertions(+), 13 deletions(-) diff --git a/app/components/chat.tsx b/app/components/chat.tsx index 26716150..13105e84 100644 --- a/app/components/chat.tsx +++ b/app/components/chat.tsx @@ -61,7 +61,14 @@ import Locale from "../locales"; import { IconButton } from "./button"; import styles from "./chat.module.scss"; -import { ListItem, Modal, showConfirm, showPrompt, showToast } from "./ui-lib"; +import { + ListItem, + Modal, + Selector, + showConfirm, + showPrompt, + showToast, +} from "./ui-lib"; import { useLocation, useNavigate } from "react-router-dom"; import { LAST_INPUT_KEY, Path, REQUEST_TIMEOUT_MS } from "../constant"; import { Avatar } from "./emoji"; @@ -404,16 +411,11 @@ export function ChatActions(props: { // switch model const currentModel = chatStore.currentSession().mask.modelConfig.model; - function nextModel() { - const models = config.models.filter((m) => m.available).map((m) => m.name); - const modelIndex = models.indexOf(currentModel); - const nextIndex = (modelIndex + 1) % models.length; - const nextModel = models[nextIndex]; - chatStore.updateCurrentSession((session) => { - session.mask.modelConfig.model = nextModel as ModelType; - session.mask.syncGlobalConfig = false; - }); - } + const models = useMemo( + () => config.models.filter((m) => m.available).map((m) => m.name), + [config.models], + ); + const [showModelSelector, setShowModelSelector] = useState(false); return (
@@ -485,10 +487,28 @@ export function ChatActions(props: { /> setShowModelSelector(true)} text={currentModel} icon={} /> + + {showModelSelector && ( + ({ + title: m, + value: m, + }))} + onClose={() => setShowModelSelector(false)} + onSelection={(s) => { + if (s.length === 0) return; + chatStore.updateCurrentSession((session) => { + session.mask.modelConfig.model = s[0] as ModelType; + session.mask.syncGlobalConfig = false; + }); + showToast(s[0]); + }} + /> + )}
); } diff --git a/app/components/ui-lib.module.scss b/app/components/ui-lib.module.scss index 86b467e5..6e8b64e8 100644 --- a/app/components/ui-lib.module.scss +++ b/app/components/ui-lib.module.scss @@ -62,6 +62,7 @@ box-shadow: var(--card-shadow); margin-bottom: 20px; animation: slide-in ease 0.3s; + background: var(--white); } .list .list-item:last-child { @@ -270,3 +271,34 @@ border: 1px solid var(--primary); } } + +.selector { + position: fixed; + top: 0; + left: 0; + height: 100vh; + width: 100vw; + background-color: rgba(0, 0, 0, 0.5); + display: flex; + align-items: center; + justify-content: center; + + &-content { + .list { + overflow: hidden; + + .list-item { + cursor: pointer; + background-color: var(--white); + + &:hover { + filter: brightness(0.95); + } + + &:active { + filter: brightness(0.9); + } + } + } + } +} diff --git a/app/components/ui-lib.tsx b/app/components/ui-lib.tsx index 512044dc..814c0dd1 100644 --- a/app/components/ui-lib.tsx +++ b/app/components/ui-lib.tsx @@ -47,9 +47,13 @@ export function ListItem(props: { children?: JSX.Element | JSX.Element[]; icon?: JSX.Element; className?: string; + onClick?: () => void; }) { return ( -
+
{props.icon &&
{props.icon}
}
@@ -432,3 +436,37 @@ export function showImageModal(img: string) { ), }); } + +export function Selector(props: { + items: Array<{ + title: string; + subTitle?: string; + value: T; + }>; + onSelection?: (selection: T[]) => void; + onClose?: () => void; + multiple?: boolean; +}) { + return ( +
+
+ + {props.items.map((item, i) => { + return ( + { + props.onSelection?.([item.value]); + props.onClose?.(); + }} + > + ); + })} + +
+
+ ); +} From 52203b50eb9cdf94a8395a02006749fde0e82d27 Mon Sep 17 00:00:00 2001 From: Yidadaa Date: Thu, 6 Jul 2023 02:07:35 +0800 Subject: [PATCH 5/5] fixup --- app/components/ui-lib.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/ui-lib.tsx b/app/components/ui-lib.tsx index 814c0dd1..b9680912 100644 --- a/app/components/ui-lib.tsx +++ b/app/components/ui-lib.tsx @@ -448,7 +448,7 @@ export function Selector(props: { multiple?: boolean; }) { return ( -
+
props.onClose?.()}>
{props.items.map((item, i) => {