From 21ef9a4567ec4f61a4d0db26f0e23815bb0f7924 Mon Sep 17 00:00:00 2001
From: Dogtiti <499960698@qq.com>
Date: Thu, 25 Jul 2024 17:37:21 +0800
Subject: [PATCH 1/2] feat: artifacts style

---
 .gitignore                          |  2 ++
 app/components/artifact.module.scss | 12 +++++++++
 app/components/artifact.tsx         | 25 +++++++++---------
 app/components/markdown.tsx         |  4 +--
 app/components/ui-lib.module.scss   |  1 +
 app/components/ui-lib.tsx           | 39 +++++++++++++++++++++--------
 6 files changed, 58 insertions(+), 25 deletions(-)
 create mode 100644 app/components/artifact.module.scss

diff --git a/.gitignore b/.gitignore
index a24c6e047..2ff556f64 100644
--- a/.gitignore
+++ b/.gitignore
@@ -44,3 +44,5 @@ dev
 
 *.key
 *.key.pub
+
+masks.json
diff --git a/app/components/artifact.module.scss b/app/components/artifact.module.scss
new file mode 100644
index 000000000..1e166f418
--- /dev/null
+++ b/app/components/artifact.module.scss
@@ -0,0 +1,12 @@
+.artifact {
+  display: block;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.artifact-iframe {
+  width: 100%;
+  border: var(--border-in-light);
+  border-radius: 6px;
+}
diff --git a/app/components/artifact.tsx b/app/components/artifact.tsx
index c06573b09..64a6ad652 100644
--- a/app/components/artifact.tsx
+++ b/app/components/artifact.tsx
@@ -13,6 +13,7 @@ import { Modal, showToast } from "./ui-lib";
 import { copyToClipboard, downloadAs } from "../utils";
 import { Path, ApiPath, REPO_URL } from "@/app/constant";
 import { Loading } from "./home";
+import styles from "./artifact.module.scss";
 
 export function HTMLPreview(props: {
   code: string;
@@ -61,17 +62,22 @@ export function HTMLPreview(props: {
     return props.code + script;
   }, [props.code]);
 
+  const handleOnLoad = () => {
+    if (props?.onLoad) {
+      props.onLoad(title);
+    }
+  };
+
   return (
     <iframe
+      className={styles["artifact-iframe"]}
       id={frameId.current}
       ref={ref}
-      frameBorder={0}
       sandbox="allow-forms allow-modals allow-scripts"
-      style={{ width: "100%", height }}
-      // src={`data:text/html,${encodeURIComponent(srcDoc)}`}
+      style={{ height }}
       srcDoc={srcDoc}
-      onLoad={(e) => props?.onLoad && props?.onLoad(title)}
-    ></iframe>
+      onLoad={handleOnLoad}
+    />
   );
 }
 
@@ -186,14 +192,7 @@ export function Artifact() {
   }, [id]);
 
   return (
-    <div
-      style={{
-        display: "block",
-        width: "100%",
-        height: "100%",
-        position: "relative",
-      }}
-    >
+    <div className={styles.artifact}>
       <div
         style={{
           height: 36,
diff --git a/app/components/markdown.tsx b/app/components/markdown.tsx
index 0918e7c5b..219c4c868 100644
--- a/app/components/markdown.tsx
+++ b/app/components/markdown.tsx
@@ -105,9 +105,9 @@ export function PreCode(props: { children: any }) {
         <Mermaid code={mermaidCode} key={mermaidCode} />
       )}
       {htmlCode.length > 0 && (
-        <FullScreen className="no-dark html" right={60}>
+        <FullScreen className="no-dark html" right={70}>
           <ArtifactShareButton
-            style={{ position: "absolute", right: 10, top: 10 }}
+            style={{ position: "absolute", right: 20, top: 10 }}
             getCode={() => htmlCode}
           />
           <HTMLPreview
diff --git a/app/components/ui-lib.module.scss b/app/components/ui-lib.module.scss
index 83c02f92a..817aa90be 100644
--- a/app/components/ui-lib.module.scss
+++ b/app/components/ui-lib.module.scss
@@ -292,6 +292,7 @@
   z-index: 999;
 
   &-content {
+    min-width: 300px;
     .list {
       max-height: 90vh;
       overflow-x: hidden;
diff --git a/app/components/ui-lib.tsx b/app/components/ui-lib.tsx
index 77223f5db..fe7af8af7 100644
--- a/app/components/ui-lib.tsx
+++ b/app/components/ui-lib.tsx
@@ -53,7 +53,7 @@ export function ListItem(props: {
   children?: JSX.Element | JSX.Element[];
   icon?: JSX.Element;
   className?: string;
-  onClick?: () => void;
+  onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
 }) {
   return (
     <div
@@ -454,25 +454,45 @@ export function Selector<T>(props: {
   onClose?: () => void;
   multiple?: boolean;
 }) {
+  const [selectedValues, setSelectedValues] = useState<T[]>(
+    Array.isArray(props.defaultSelectedValue)
+      ? props.defaultSelectedValue
+      : props.defaultSelectedValue !== undefined
+      ? [props.defaultSelectedValue]
+      : [],
+  );
+
+  const handleSelection = (
+    e: React.MouseEvent<HTMLDivElement, MouseEvent>,
+    value: T,
+  ) => {
+    if (props.multiple) {
+      e.stopPropagation();
+      const newSelectedValues = selectedValues.includes(value)
+        ? selectedValues.filter((v) => v !== value)
+        : [...selectedValues, value];
+      setSelectedValues(newSelectedValues);
+      props.onSelection?.(newSelectedValues);
+    } else {
+      setSelectedValues([value]);
+      props.onSelection?.([value]);
+      props.onClose?.();
+    }
+  };
+
   return (
     <div className={styles["selector"]} onClick={() => props.onClose?.()}>
       <div className={styles["selector-content"]}>
         <List>
           {props.items.map((item, i) => {
-            const selected = props.multiple
-              ? // @ts-ignore
-                props.defaultSelectedValue?.includes(item.value)
-              : props.defaultSelectedValue === item.value;
+            const selected = selectedValues.includes(item.value);
             return (
               <ListItem
                 className={styles["selector-item"]}
                 key={i}
                 title={item.title}
                 subTitle={item.subTitle}
-                onClick={() => {
-                  props.onSelection?.([item.value]);
-                  props.onClose?.();
-                }}
+                onClick={(e) => handleSelection(e, item.value)}
               >
                 {selected ? (
                   <div
@@ -494,7 +514,6 @@ export function Selector<T>(props: {
     </div>
   );
 }
-
 export function FullScreen(props: any) {
   const { children, right = 10, top = 10, ...rest } = props;
   const ref = useRef<HTMLDivElement>();

From c27ef6ffbf94be6bab2f6ba7cc9237b1125627a2 Mon Sep 17 00:00:00 2001
From: Dogtiti <499960698@qq.com>
Date: Thu, 25 Jul 2024 23:29:29 +0800
Subject: [PATCH 2/2] feat: artifacts style

---
 app/components/artifact.module.scss | 22 +++++++++++++--
 app/components/artifact.tsx         | 42 +++++++++++++----------------
 app/components/chat.tsx             |  5 ++--
 app/components/markdown.tsx         | 13 +++++++--
 4 files changed, 52 insertions(+), 30 deletions(-)

diff --git a/app/components/artifact.module.scss b/app/components/artifact.module.scss
index 1e166f418..2909008b0 100644
--- a/app/components/artifact.module.scss
+++ b/app/components/artifact.module.scss
@@ -1,8 +1,26 @@
 .artifact {
-  display: block;
+  display: flex;
   width: 100%;
   height: 100%;
-  position: relative;
+  flex-direction: column;
+  &-header {
+    display: flex;
+    align-items: center;
+    height: 36px;
+    padding: 20px;
+    background: var(--second);
+  }
+  &-title {
+    flex: 1;
+    text-align: center;
+    font-weight: bold;
+    font-size: 24px;
+  }
+  &-content {
+    flex-grow: 1;
+    padding: 0 20px 20px 20px;
+    background-color: var(--second);
+  }
 }
 
 .artifact-iframe {
diff --git a/app/components/artifact.tsx b/app/components/artifact.tsx
index b378cba37..3006fe012 100644
--- a/app/components/artifact.tsx
+++ b/app/components/artifact.tsx
@@ -18,7 +18,7 @@ import styles from "./artifact.module.scss";
 export function HTMLPreview(props: {
   code: string;
   autoHeight?: boolean;
-  height?: number;
+  height?: number | string;
   onLoad?: (title?: string) => void;
 }) {
   const ref = useRef<HTMLIFrameElement>(null);
@@ -185,7 +185,6 @@ export function Artifact() {
   const [code, setCode] = useState("");
   const [loading, setLoading] = useState(true);
   const [fileName, setFileName] = useState("");
-  const { height } = useWindowSize();
 
   useEffect(() => {
     if (id) {
@@ -205,33 +204,28 @@ export function Artifact() {
   }, [id]);
 
   return (
-    <div className={styles.artifact}>
-      <div
-        style={{
-          height: 36,
-          display: "flex",
-          alignItems: "center",
-          padding: 12,
-        }}
-      >
+    <div className={styles["artifact"]}>
+      <div className={styles["artifact-header"]}>
         <a href={REPO_URL} target="_blank" rel="noopener noreferrer">
           <IconButton bordered icon={<GithubIcon />} shadow />
         </a>
-        <div style={{ flex: 1, textAlign: "center" }}>NextChat Artifact</div>
+        <div className={styles["artifact-title"]}>NextChat Artifact</div>
         <ArtifactShareButton id={id} getCode={() => code} fileName={fileName} />
       </div>
-      {loading && <Loading />}
-      {code && (
-        <HTMLPreview
-          code={code}
-          autoHeight={false}
-          height={height - 36}
-          onLoad={(title) => {
-            setFileName(title as string);
-            setLoading(false);
-          }}
-        />
-      )}
+      <div className={styles["artifact-content"]}>
+        {loading && <Loading />}
+        {code && (
+          <HTMLPreview
+            code={code}
+            autoHeight={false}
+            height={"100%"}
+            onLoad={(title) => {
+              setFileName(title as string);
+              setLoading(false);
+            }}
+          />
+        )}
+      </div>
     </div>
   );
 }
diff --git a/app/components/chat.tsx b/app/components/chat.tsx
index 6bfd99b53..33956e6bc 100644
--- a/app/components/chat.tsx
+++ b/app/components/chat.tsx
@@ -641,12 +641,13 @@ export function ChatActions(props: {
           ]}
           onClose={() => setShowPluginSelector(false)}
           onSelection={(s) => {
-            if (s.length === 0) return;
             const plugin = s[0];
             chatStore.updateCurrentSession((session) => {
               session.mask.plugin = s;
             });
-            showToast(plugin);
+            if (plugin) {
+              showToast(plugin);
+            }
           }}
         />
       )}
diff --git a/app/components/markdown.tsx b/app/components/markdown.tsx
index 219c4c868..36c742902 100644
--- a/app/components/markdown.tsx
+++ b/app/components/markdown.tsx
@@ -14,7 +14,8 @@ import React from "react";
 import { useDebouncedCallback } from "use-debounce";
 import { showImageModal, FullScreen } from "./ui-lib";
 import { ArtifactShareButton, HTMLPreview } from "./artifact";
-
+import { Plugin } from "../constant";
+import { useChatStore } from "../store";
 export function Mermaid(props: { code: string }) {
   const ref = useRef<HTMLDivElement>(null);
   const [hasError, setHasError] = useState(false);
@@ -67,6 +68,9 @@ export function PreCode(props: { children: any }) {
   const [mermaidCode, setMermaidCode] = useState("");
   const [htmlCode, setHtmlCode] = useState("");
   const { height } = useWindowSize();
+  const chatStore = useChatStore();
+  const session = chatStore.currentSession();
+  const plugins = session.mask?.plugin;
 
   const renderArtifacts = useDebouncedCallback(() => {
     if (!ref.current) return;
@@ -87,6 +91,11 @@ export function PreCode(props: { children: any }) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [refText]);
 
+  const enableArtifacts = useMemo(
+    () => plugins?.includes(Plugin.Artifact),
+    [plugins],
+  );
+
   return (
     <>
       <pre ref={ref}>
@@ -104,7 +113,7 @@ export function PreCode(props: { children: any }) {
       {mermaidCode.length > 0 && (
         <Mermaid code={mermaidCode} key={mermaidCode} />
       )}
-      {htmlCode.length > 0 && (
+      {htmlCode.length > 0 && enableArtifacts && (
         <FullScreen className="no-dark html" right={70}>
           <ArtifactShareButton
             style={{ position: "absolute", right: 20, top: 10 }}