Merge branch 'main' of https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web

app/components/markdown.tsx

@@ -21,6 +21,7 @@ import {
 } from "./artifacts";
 import { useChatStore } from "../store";
 import { IconButton } from "./button";
+import { useAppConfig } from "../store/config";
 
 export function Mermaid(props: { code: string }) {
   const ref = useRef<HTMLDivElement>(null);
@@ -92,7 +93,9 @@ export function PreCode(props: { children: any }) {
     }
   }, 600);
 
-  const enableArtifacts = session.mask?.enableArtifacts !== false;
+  const config = useAppConfig();
+  const enableArtifacts =
+    session.mask?.enableArtifacts !== false && config.enableArtifacts;
 
   //Wrap the paragraph for plain-text
   useEffect(() => {
@@ -279,6 +282,20 @@ function _MarkDownContent(props: { content: string }) {
         p: (pProps) => <p {...pProps} dir="auto" />,
         a: (aProps) => {
           const href = aProps.href || "";
+          if (/\.(aac|mp3|opus|wav)$/.test(href)) {
+            return (
+              <figure>
+                <audio controls src={href}></audio>
+              </figure>
+            );
+          }
+          if (/\.(3gp|3g2|webm|ogv|mpeg|mp4|avi)$/.test(href)) {
+            return (
+              <video controls width="99.9%">
+                <source src={href} />
+              </video>
+            );
+          }
           const isInternal = /^\/#/i.test(href);
           const target = isInternal ? "_self" : aProps.target ?? "_blank";
           return <a {...aProps} target={target} />;

app/components/mask.tsx

@@ -166,21 +166,23 @@ export function MaskConfig(props: {
           ></input>
         </ListItem>
 
-        <ListItem
+        {globalConfig.enableArtifacts && (
-          title={Locale.Mask.Config.Artifacts.Title}
+          <ListItem
-          subTitle={Locale.Mask.Config.Artifacts.SubTitle}
+            title={Locale.Mask.Config.Artifacts.Title}
-        >
+            subTitle={Locale.Mask.Config.Artifacts.SubTitle}
-          <input
+          >
-            aria-label={Locale.Mask.Config.Artifacts.Title}
+            <input
-            type="checkbox"
+              aria-label={Locale.Mask.Config.Artifacts.Title}
-            checked={props.mask.enableArtifacts !== false}
+              type="checkbox"
-            onChange={(e) => {
+              checked={props.mask.enableArtifacts !== false}
-              props.updateMask((mask) => {
+              onChange={(e) => {
-                mask.enableArtifacts = e.currentTarget.checked;
+                props.updateMask((mask) => {
-              });
+                  mask.enableArtifacts = e.currentTarget.checked;
-            }}
+                });
-          ></input>
+              }}
-        </ListItem>
+            ></input>
+          </ListItem>
+        )}
 
         {!props.shouldSyncFromGlobal ? (
           <ListItem

app/components/plugin.module.scss

@@ -10,7 +10,29 @@
     max-height: 240px;
     overflow-y: auto;
     white-space: pre-wrap;
-    min-width: 300px;
+    min-width: 280px;
   }
 }
 
+.plugin-schema {
+  display: flex;
+  justify-content: flex-end;
+  flex-direction: row;
+
+  input {
+    margin-right: 20px;
+
+    @media screen and (max-width: 600px) {
+        margin-right: 0px;
+      }
+  }
+
+  @media screen and (max-width: 600px) {
+    flex-direction: column;
+    gap: 5px;
+
+    button {
+      padding: 10px;
+    }
+  }
+}

app/components/plugin.tsx

@@ -12,7 +12,6 @@ import EditIcon from "../icons/edit.svg";
 import AddIcon from "../icons/add.svg";
 import CloseIcon from "../icons/close.svg";
 import DeleteIcon from "../icons/delete.svg";
-import EyeIcon from "../icons/eye.svg";
 import ConfirmIcon from "../icons/confirm.svg";
 import ReloadIcon from "../icons/reload.svg";
 import GithubIcon from "../icons/github.svg";
@@ -29,7 +28,6 @@ import {
 import Locale from "../locales";
 import { useNavigate } from "react-router-dom";
 import { useState } from "react";
-import { getClientConfig } from "../config/client";
 
 export function PluginPage() {
   const navigate = useNavigate();
@@ -209,19 +207,11 @@ export function PluginPage() {
                   </div>
                 </div>
                 <div className={styles["mask-actions"]}>
-                  {m.builtin ? (
+                  <IconButton
-                    <IconButton
+                    icon={<EditIcon />}
-                      icon={<EyeIcon />}
+                    text={Locale.Plugin.Item.Edit}
-                      text={Locale.Plugin.Item.View}
+                    onClick={() => setEditingPluginId(m.id)}
-                      onClick={() => setEditingPluginId(m.id)}
+                  />
-                    />
-                  ) : (
-                    <IconButton
-                      icon={<EditIcon />}
-                      text={Locale.Plugin.Item.Edit}
-                      onClick={() => setEditingPluginId(m.id)}
-                    />
-                  )}
                   {!m.builtin && (
                     <IconButton
                       icon={<DeleteIcon />}
@@ -325,30 +315,13 @@ export function PluginPage() {
                   ></PasswordInput>
                 </ListItem>
               )}
-              {!getClientConfig()?.isApp && (
-                <ListItem
-                  title={Locale.Plugin.Auth.Proxy}
-                  subTitle={Locale.Plugin.Auth.ProxyDescription}
-                >
-                  <input
-                    type="checkbox"
-                    checked={editingPlugin?.usingProxy}
-                    style={{ minWidth: 16 }}
-                    onChange={(e) => {
-                      pluginStore.updatePlugin(editingPlugin.id, (plugin) => {
-                        plugin.usingProxy = e.currentTarget.checked;
-                      });
-                    }}
-                  ></input>
-                </ListItem>
-              )}
             </List>
             <List>
               <ListItem title={Locale.Plugin.EditModal.Content}>
-                <div style={{ display: "flex", justifyContent: "flex-end" }}>
+                <div className={pluginStyles["plugin-schema"]}>
                   <input
                     type="text"
-                    style={{ minWidth: 200, marginRight: 20 }}
+                    style={{ minWidth: 200 }}
                     onInput={(e) => setLoadUrl(e.currentTarget.value)}
                   ></input>
                   <IconButton

app/components/settings.tsx

@@ -1465,6 +1465,23 @@ export function Settings() {
               }
             ></input>
           </ListItem>
+
+          <ListItem
+            title={Locale.Mask.Config.Artifacts.Title}
+            subTitle={Locale.Mask.Config.Artifacts.SubTitle}
+          >
+            <input
+              aria-label={Locale.Mask.Config.Artifacts.Title}
+              type="checkbox"
+              checked={config.enableArtifacts}
+              onChange={(e) =>
+                updateConfig(
+                  (config) =>
+                    (config.enableArtifacts = e.currentTarget.checked),
+                )
+              }
+            ></input>
+          </ListItem>
         </List>
 
         <SyncItems />

app/store/config.ts

@@ -50,6 +50,8 @@ export const DEFAULT_CONFIG = {
   enableAutoGenerateTitle: true,
   sidebarWidth: DEFAULT_SIDEBAR_WIDTH,
 
+  enableArtifacts: true, // show artifacts config
+
   disablePromptHint: false,
 
   dontShowMaskSplashScreen: false, // dont show splash screen when create chat

app/store/plugin.ts

@@ -2,8 +2,12 @@ import OpenAPIClientAxios from "openapi-client-axios";
 import { StoreKey } from "../constant";
 import { nanoid } from "nanoid";
 import { createPersistStore } from "../utils/store";
+import { getClientConfig } from "../config/client";
 import yaml from "js-yaml";
 import { adapter } from "../utils";
+import { useAccessStore } from "./access";
+
+const isApp = getClientConfig()?.isApp;
 
 export type Plugin = {
   id: string;
@@ -16,7 +20,6 @@ export type Plugin = {
   authLocation?: string;
   authHeader?: string;
   authToken?: string;
-  usingProxy?: boolean;
 };
 
 export type FunctionToolItem = {
@@ -46,18 +49,25 @@ export const FunctionToolService = {
       plugin?.authType == "basic"
         ? `Basic ${plugin?.authToken}`
         : plugin?.authType == "bearer"
-        ? ` Bearer ${plugin?.authToken}`
+        ? `Bearer ${plugin?.authToken}`
         : plugin?.authToken;
     const authLocation = plugin?.authLocation || "header";
     const definition = yaml.load(plugin.content) as any;
     const serverURL = definition?.servers?.[0]?.url;
-    const baseURL = !!plugin?.usingProxy ? "/api/proxy" : serverURL;
+    const baseURL = !isApp ? "/api/proxy" : serverURL;
     const headers: Record<string, string | undefined> = {
-      "X-Base-URL": !!plugin?.usingProxy ? serverURL : undefined,
+      "X-Base-URL": !isApp ? serverURL : undefined,
     };
     if (authLocation == "header") {
       headers[headerName] = tokenValue;
     }
+    // try using openaiApiKey for Dalle3 Plugin.
+    if (!tokenValue && plugin.id === "dalle3") {
+      const openaiApiKey = useAccessStore.getState().openaiApiKey;
+      if (openaiApiKey) {
+        headers[headerName] = `Bearer ${openaiApiKey}`;
+      }
+    }
     const api = new OpenAPIClientAxios({
       definition: yaml.load(plugin.content) as any,
       axiosConfigDefaults: {
@@ -165,7 +175,7 @@ export const usePluginStore = createPersistStore(
   (set, get) => ({
     create(plugin?: Partial<Plugin>) {
       const plugins = get().plugins;
-      const id = nanoid();
+      const id = plugin?.id || nanoid();
       plugins[id] = {
         ...createEmptyPlugin(),
         ...plugin,
@@ -220,5 +230,42 @@ export const usePluginStore = createPersistStore(
   {
     name: StoreKey.Plugin,
     version: 1,
+    onRehydrateStorage(state) {
+      // Skip store rehydration on server side
+      if (typeof window === "undefined") {
+        return;
+      }
+
+      fetch("./plugins.json")
+        .then((res) => res.json())
+        .then((res) => {
+          Promise.all(
+            res.map((item: any) =>
+              // skip get schema
+              state.get(item.id)
+                ? item
+                : fetch(item.schema)
+                    .then((res) => res.text())
+                    .then((content) => ({
+                      ...item,
+                      content,
+                    }))
+                    .catch((e) => item),
+            ),
+          ).then((builtinPlugins: any) => {
+            builtinPlugins
+              .filter((item: any) => item?.content)
+              .forEach((item: any) => {
+                const plugin = state.create(item);
+                state.updatePlugin(plugin.id, (plugin) => {
+                  const tool = FunctionToolService.add(plugin, true);
+                  plugin.title = tool.api.definition.info.title;
+                  plugin.version = tool.api.definition.info.version;
+                  plugin.builtin = true;
+                });
+              });
+          });
+        });
+    },
   },
 );

public/plugins.json

@@ -0,0 +1,17 @@
+[
+  {
+    "id": "dalle3",
+    "name": "Dalle3",
+    "schema": "https://ghp.ci/https://raw.githubusercontent.com/ChatGPTNextWeb/NextChat-Awesome-Plugins/main/plugins/dalle/openapi.json"
+  },
+  {
+    "id": "arxivsearch",
+    "name": "ArxivSearch",
+    "schema": "https://ghp.ci/https://raw.githubusercontent.com/ChatGPTNextWeb/NextChat-Awesome-Plugins/main/plugins/arxivsearch/openapi.json"
+  },
+  {
+    "id": "duckduckgolite",
+    "name": "DuckDuckGoLiteSearch",
+    "schema": "https://ghp.ci/https://raw.githubusercontent.com/ChatGPTNextWeb/NextChat-Awesome-Plugins/main/plugins/duckduckgolite/openapi.json"
+  }
+]