chore: artifact => artifacts

app/components/artifacts.module.scss

@@ -1,4 +1,4 @@
-.artifact {
+.artifacts {
   display: flex;
   width: 100%;
   height: 100%;
@@ -23,7 +23,7 @@
   }
 }
 
-.artifact-iframe {
+.artifacts-iframe {
   width: 100%;
   border: var(--border-in-light);
   border-radius: 6px;

app/components/artifacts.tsx

@@ -13,7 +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";
+import styles from "./artifacts.module.scss";
 
 export function HTMLPreview(props: {
   code: string;
@@ -72,7 +72,7 @@ export function HTMLPreview(props: {
 
   return (
     <iframe
-      className={styles["artifact-iframe"]}
+      className={styles["artifacts-iframe"]}
       id={frameId.current}
       ref={ref}
       sandbox="allow-forms allow-modals allow-scripts"
@@ -83,7 +83,7 @@ export function HTMLPreview(props: {
   );
 }
 
-export function ArtifactShareButton({
+export function ArtifactsShareButton({
   getCode,
   id,
   style,
@@ -98,13 +98,13 @@ export function ArtifactShareButton({
   const [name, setName] = useState(id);
   const [show, setShow] = useState(false);
   const shareUrl = useMemo(
-    () => [location.origin, "#", Path.Artifact, "/", name].join(""),
+    () => [location.origin, "#", Path.Artifacts, "/", name].join(""),
     [name],
   );
   const upload = (code: string) =>
     id
       ? Promise.resolve({ id })
-      : fetch(ApiPath.Artifact, {
+      : fetch(ApiPath.Artifacts, {
           method: "POST",
           body: code,
         })
@@ -116,7 +116,7 @@ export function ArtifactShareButton({
             throw Error();
           })
           .catch((e) => {
-            showToast(Locale.Export.Artifact.Error);
+            showToast(Locale.Export.Artifacts.Error);
           });
   return (
     <>
@@ -124,7 +124,7 @@ export function ArtifactShareButton({
         <IconButton
           icon={loading ? <LoadingButtonIcon /> : <ExportIcon />}
           bordered
-          title={Locale.Export.Artifact.Title}
+          title={Locale.Export.Artifacts.Title}
           onClick={() => {
             if (loading) return;
             setLoading(true);
@@ -142,7 +142,7 @@ export function ArtifactShareButton({
       {show && (
         <div className="modal-mask">
           <Modal
-            title={Locale.Export.Artifact.Title}
+            title={Locale.Export.Artifacts.Title}
             onClose={() => setShow(false)}
             actions={[
               <IconButton
@@ -179,7 +179,7 @@ export function ArtifactShareButton({
   );
 }
 
-export function Artifact() {
+export function Artifacts() {
   const { id } = useParams();
   const [code, setCode] = useState("");
   const [loading, setLoading] = useState(true);
@@ -187,7 +187,7 @@ export function Artifact() {
 
   useEffect(() => {
     if (id) {
-      fetch(`${ApiPath.Artifact}?id=${id}`)
+      fetch(`${ApiPath.Artifacts}?id=${id}`)
         .then((res) => {
           if (res.status > 300) {
             throw Error("can not get content");
@@ -197,21 +197,25 @@ export function Artifact() {
         .then((res) => res.text())
         .then(setCode)
         .catch((e) => {
-          showToast(Locale.Export.Artifact.Error);
+          showToast(Locale.Export.Artifacts.Error);
         });
     }
   }, [id]);
 
   return (
-    <div className={styles["artifact"]}>
+    <div className={styles["artifacts"]}>
-      <div className={styles["artifact-header"]}>
+      <div className={styles["artifacts-header"]}>
         <a href={REPO_URL} target="_blank" rel="noopener noreferrer">
           <IconButton bordered icon={<GithubIcon />} shadow />
         </a>
-        <div className={styles["artifact-title"]}>NextChat Artifact</div>
+        <div className={styles["artifacts-title"]}>NextChat Artifacts</div>
-        <ArtifactShareButton id={id} getCode={() => code} fileName={fileName} />
+        <ArtifactsShareButton
+          id={id}
+          getCode={() => code}
+          fileName={fileName}
+        />
       </div>
-      <div className={styles["artifact-content"]}>
+      <div className={styles["artifacts-content"]}>
         {loading && <Loading />}
         {code && (
           <HTMLPreview

app/components/chat.tsx

@@ -635,8 +635,8 @@ export function ChatActions(props: {
           defaultSelectedValue={chatStore.currentSession().mask?.plugin}
           items={[
             {
-              title: Locale.Plugin.Artifact,
+              title: Locale.Plugin.Artifacts,
-              value: Plugin.Artifact,
+              value: Plugin.Artifacts,
             },
           ]}
           onClose={() => setShowPluginSelector(false)}

app/components/home.tsx

@@ -39,7 +39,7 @@ export function Loading(props: { noLogo?: boolean }) {
   );
 }
 
-const Artifact = dynamic(async () => (await import("./artifact")).Artifact, {
+const Artifacts = dynamic(async () => (await import("./artifacts")).Artifacts, {
   loading: () => <Loading noLogo />,
 });
 
@@ -141,7 +141,7 @@ export function WindowContent(props: { children: React.ReactNode }) {
 function Screen() {
   const config = useAppConfig();
   const location = useLocation();
-  const isArtifact = location.pathname.includes(Path.Artifact);
+  const isArtifact = location.pathname.includes(Path.Artifacts);
   const isHome = location.pathname === Path.Home;
   const isAuth = location.pathname === Path.Auth;
   const isSd = location.pathname === Path.Sd;
@@ -158,7 +158,7 @@ function Screen() {
   if (isArtifact) {
     return (
       <Routes>
-        <Route path="/artifact/:id" element={<Artifact />} />
+        <Route path="/artifacts/:id" element={<Artifacts />} />
       </Routes>
     );
   }

app/components/markdown.tsx

@@ -13,7 +13,7 @@ import LoadingIcon from "../icons/three-dots.svg";
 import React from "react";
 import { useDebouncedCallback } from "use-debounce";
 import { showImageModal, FullScreen } from "./ui-lib";
-import { ArtifactShareButton, HTMLPreview } from "./artifact";
+import { ArtifactsShareButton, HTMLPreview } from "./artifacts";
 import { Plugin } from "../constant";
 import { useChatStore } from "../store";
 export function Mermaid(props: { code: string }) {
@@ -92,7 +92,7 @@ export function PreCode(props: { children: any }) {
   }, [refText]);
 
   const enableArtifacts = useMemo(
-    () => plugins?.includes(Plugin.Artifact),
+    () => plugins?.includes(Plugin.Artifacts),
     [plugins],
   );
 
@@ -115,7 +115,7 @@ export function PreCode(props: { children: any }) {
       )}
       {htmlCode.length > 0 && enableArtifacts && (
         <FullScreen className="no-dark html" right={70}>
-          <ArtifactShareButton
+          <ArtifactsShareButton
             style={{ position: "absolute", right: 20, top: 10 }}
             getCode={() => htmlCode}
           />

app/constant.ts

@@ -35,7 +35,7 @@ export enum Path {
   Auth = "/auth",
   Sd = "/sd",
   SdNew = "/sd-new",
-  Artifact = "/artifact",
+  Artifacts = "/artifacts",
 }
 
 export enum ApiPath {
@@ -48,7 +48,7 @@ export enum ApiPath {
   ByteDance = "/api/bytedance",
   Alibaba = "/api/alibaba",
   Stability = "/api/stability",
-  Artifact = "/api/artifact",
+  Artifacts = "/api/artifacts",
 }
 
 export enum SlotID {
@@ -62,7 +62,7 @@ export enum FileName {
 }
 
 export enum Plugin {
-  Artifact = "artifact",
+  Artifacts = "artifacts",
 }
 
 export enum StoreKey {

app/locales/cn.ts

@@ -104,7 +104,7 @@ const cn = {
       Toast: "正在生成截图",
       Modal: "长按或右键保存图片",
     },
-    Artifact: {
+    Artifacts: {
       Title: "分享页面",
       Error: "分享失败",
     },
@@ -461,7 +461,7 @@ const cn = {
   },
   Plugin: {
     Name: "插件",
-    Artifact: "Artifact",
+    Artifacts: "Artifacts",
   },
   Discovery: {
     Name: "发现",

app/locales/en.ts

@@ -106,8 +106,8 @@ const en: LocaleType = {
       Toast: "Capturing Image...",
       Modal: "Long press or right click to save image",
     },
-    Artifact: {
+    Artifacts: {
-      Title: "Share Artifact",
+      Title: "Share Artifacts",
       Error: "Share Error",
     },
   },
@@ -468,7 +468,7 @@ const en: LocaleType = {
   },
   Plugin: {
     Name: "Plugin",
-    Artifact: "Artifact",
+    Artifacts: "Artifacts",
   },
   Discovery: {
     Name: "Discovery",