Merge remote-tracking branch 'upstream/main' into enhance-message-con…

…text-menu
ChatGPTNextWeb · Aug 16, 2024 · 0416c44 · 0416c44
2 parents cec7ca6 + 495b321
commit 0416c44
Show file tree

Hide file tree

Showing 29 changed files with 5,878 additions and 1,693 deletions.
diff --git a/README.md b/README.md
@@ -91,7 +91,8 @@ For enterprise inquiries, please contact: **[email protected]**
 - [x] Artifacts: Easily preview, copy and share generated content/webpages through a separate window [#5092](https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web/pull/5092)
 - [x] Plugins: support artifacts, network search, calculator, any other apis etc. [#165](https://github.com/Yidadaa/ChatGPT-Next-Web/issues/165)
   - [x] artifacts
-  - [ ] network search, network search, calculator, any other apis etc. [#165](https://github.com/Yidadaa/ChatGPT-Next-Web/issues/165)
+  - [ ] network search, calculator, any other apis etc. [#165](https://github.com/Yidadaa/ChatGPT-Next-Web/issues/165)
+- [ ] local knowledge base
 
 ## What's New
 
@@ -128,6 +129,7 @@ For enterprise inquiries, please contact: **[email protected]**
 - [x] 插件机制，支持 artifacts，联网搜索、计算器、调用其他平台 api [#165](https://github.com/Yidadaa/ChatGPT-Next-Web/issues/165)
    - [x] artifacts
    - [ ] 支持联网搜索、计算器、调用其他平台 api [#165](https://github.com/Yidadaa/ChatGPT-Next-Web/issues/165)
+ - [ ] 本地知识库
 
 ## 最新动态
 

diff --git a/app/client/api.ts b/app/client/api.ts
@@ -44,6 +44,8 @@ export interface LLMConfig {
   presence_penalty?: number;
   frequency_penalty?: number;
   size?: DalleRequestPayload["size"];
+  quality?: DalleRequestPayload["quality"];
+  style?: DalleRequestPayload["style"];
 }
 
 export interface ChatOptions {

diff --git a/app/client/platforms/openai.ts b/app/client/platforms/openai.ts
@@ -17,7 +17,7 @@ import {
   base64Image2Blob,
 } from "@/app/utils/chat";
 import { cloudflareAIGatewayUrl } from "@/app/utils/cloudflare";
-import { DalleSize } from "@/app/typing";
+import { DalleSize, DalleQuality, DalleStyle } from "@/app/typing";
 
 import {
   ChatOptions,
@@ -70,6 +70,8 @@ export interface DalleRequestPayload {
   response_format: "url" | "b64_json";
   n: number;
   size: DalleSize;
+  quality: DalleQuality;
+  style: DalleStyle;
 }
 
 export class ChatGPTApi implements LLMApi {
@@ -162,6 +164,8 @@ export class ChatGPTApi implements LLMApi {
         response_format: "b64_json", // using b64_json, and save image in CacheStorage
         n: 1,
         size: options.config?.size ?? "1024x1024",
+        quality: options.config?.quality ?? "standard",
+        style: options.config?.style ?? "vivid",
       };
     } else {
       const visionModel = isVisionModel(options.config.model);

diff --git a/app/components/chat.module.scss b/app/components/chat.module.scss
@@ -352,6 +352,12 @@
       border-radius: 12px;
     }
   }
+
+  .chat-model-name {
+    font-size: 12px;
+    color: var(--black);
+    margin-left: 6px;
+  }
 }
 
 .chat-message-container {

diff --git a/app/components/chat.tsx b/app/components/chat.tsx
@@ -38,6 +38,8 @@ import BottomIcon from "../icons/bottom.svg";
 import StopIcon from "../icons/pause.svg";
 import RobotIcon from "../icons/robot.svg";
 import SizeIcon from "../icons/size.svg";
+import QualityIcon from "../icons/hd.svg";
+import StyleIcon from "../icons/palette.svg";
 import PluginIcon from "../icons/plugin.svg";
 
 import {
@@ -69,7 +71,7 @@ import { uploadImage as uploadImageRemote } from "@/app/utils/chat";
 import dynamic from "next/dynamic";
 
 import { ChatControllerPool } from "../client/controller";
-import { DalleSize } from "../typing";
+import { DalleSize, DalleQuality, DalleStyle } from "../typing";
 import { Prompt, usePromptStore } from "../store/prompt";
 import Locale from "../locales";
 
@@ -587,9 +589,17 @@ export function ChatActions(props: {
   const [showUploadImage, setShowUploadImage] = useState(false);
 
   const [showSizeSelector, setShowSizeSelector] = useState(false);
+  const [showQualitySelector, setShowQualitySelector] = useState(false);
+  const [showStyleSelector, setShowStyleSelector] = useState(false);
   const dalle3Sizes: DalleSize[] = ["1024x1024", "1792x1024", "1024x1792"];
+  const dalle3Qualitys: DalleQuality[] = ["standard", "hd"];
+  const dalle3Styles: DalleStyle[] = ["vivid", "natural"];
   const currentSize =
     chatStore.currentSession().mask.modelConfig?.size ?? "1024x1024";
+  const currentQuality =
+    chatStore.currentSession().mask.modelConfig?.quality ?? "standard";
+  const currentStyle =
+    chatStore.currentSession().mask.modelConfig?.style ?? "vivid";
 
   useEffect(() => {
     const show = isVisionModel(currentModel);
@@ -761,6 +771,60 @@ export function ChatActions(props: {
         />
       )}
 
+      {isDalle3(currentModel) && (
+        <ChatAction
+          onClick={() => setShowQualitySelector(true)}
+          text={currentQuality}
+          icon={<QualityIcon />}
+        />
+      )}
+
+      {showQualitySelector && (
+        <Selector
+          defaultSelectedValue={currentQuality}
+          items={dalle3Qualitys.map((m) => ({
+            title: m,
+            value: m,
+          }))}
+          onClose={() => setShowQualitySelector(false)}
+          onSelection={(q) => {
+            if (q.length === 0) return;
+            const quality = q[0];
+            chatStore.updateCurrentSession((session) => {
+              session.mask.modelConfig.quality = quality;
+            });
+            showToast(quality);
+          }}
+        />
+      )}
+
+      {isDalle3(currentModel) && (
+        <ChatAction
+          onClick={() => setShowStyleSelector(true)}
+          text={currentStyle}
+          icon={<StyleIcon />}
+        />
+      )}
+
+      {showStyleSelector && (
+        <Selector
+          defaultSelectedValue={currentStyle}
+          items={dalle3Styles.map((m) => ({
+            title: m,
+            value: m,
+          }))}
+          onClose={() => setShowStyleSelector(false)}
+          onSelection={(s) => {
+            if (s.length === 0) return;
+            const style = s[0];
+            chatStore.updateCurrentSession((session) => {
+              session.mask.modelConfig.style = style;
+            });
+            showToast(style);
+          }}
+        />
+      )}
+
       <ChatAction
         onClick={() => setShowPluginSelector(true)}
         text={Locale.Plugin.Name}
@@ -1584,6 +1648,11 @@ function _Chat() {
                         </>
                       )}
                     </div>
+                    {!isUser && (
+                      <div className={styles["chat-model-name"]}>
+                        {message.model}
+                      </div>
+                    )}
 
                     {showActions && (
                       <ChatMessageActions

diff --git a/app/components/markdown.tsx b/app/components/markdown.tsx
@@ -156,6 +156,46 @@ export function PreCode(props: { children: any }) {
   );
 }
 
+function CustomCode(props: { children: any }) {
+  const ref = useRef<HTMLPreElement>(null);
+  const [collapsed, setCollapsed] = useState(true);
+  const [showToggle, setShowToggle] = useState(false);
+
+  useEffect(() => {
+    if (ref.current) {
+      const codeHeight = ref.current.scrollHeight;
+      setShowToggle(codeHeight > 400);
+      ref.current.scrollTop = ref.current.scrollHeight;
+    }
+  }, [props.children]);
+
+  const toggleCollapsed = () => {
+    setCollapsed((collapsed) => !collapsed);
+  };
+  return (
+    <>
+      <code
+        ref={ref}
+        style={{
+          maxHeight: collapsed ? "400px" : "none",
+          overflowY: "hidden",
+        }}
+      >
+        {props.children}
+        {showToggle && collapsed && (
+          <div
+            className={`show-hide-button ${
+              collapsed ? "collapsed" : "expanded"
+            }`}
+          >
+            <button onClick={toggleCollapsed}>查看全部</button>
+          </div>
+        )}
+      </code>
+    </>
+  );
+}
+
 function escapeDollarNumber(text: string) {
   let escapedText = "";
 
@@ -211,6 +251,7 @@ function _MarkDownContent(props: { content: string }) {
       ]}
       components={{
         pre: PreCode,
+        code: CustomCode,
         p: (pProps) => <p {...pProps} dir="auto" />,
         a: (aProps) => {
           const href = aProps.href || "";

diff --git a/app/config/server.ts b/app/config/server.ts
@@ -1,5 +1,5 @@
 import md5 from "spark-md5";
-import { DEFAULT_MODELS } from "../constant";
+import { DEFAULT_MODELS, DEFAULT_GA_ID } from "../constant";
 
 declare global {
   namespace NodeJS {
@@ -211,6 +211,7 @@ export const getServerSideConfig = () => {
     cloudflareKVTTL: process.env.CLOUDFLARE_KV_TTL,
 
     gtmId: process.env.GTM_ID,
+    gaId: process.env.GA_ID || DEFAULT_GA_ID,
 
     needCode: ACCESS_CODES.size > 0,
     code: process.env.CODE,

diff --git a/app/constant.ts b/app/constant.ts
@@ -474,4 +474,5 @@ export const internalAllowedWebDavEndpoints = [
   "https://app.koofr.net/dav/Koofr",
 ];
 
+export const DEFAULT_GA_ID = "G-89WN60ZK2E";
 export const PLUGINS = [{ name: "Stable Diffusion", path: Path.Sd }];
diff --git a/app/icons/hd.svg b/app/icons/hd.svg
diff --git a/app/icons/palette.svg b/app/icons/palette.svg
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -6,7 +6,7 @@ import { getClientConfig } from "./config/client";
 import type { Metadata, Viewport } from "next";
 import { SpeedInsights } from "@vercel/speed-insights/next";
 import { getServerSideConfig } from "./config/server";
-import { GoogleTagManager } from "@next/third-parties/google";
+import { GoogleTagManager, GoogleAnalytics } from "@next/third-parties/google";
 const serverConfig = getServerSideConfig();
 
 export const metadata: Metadata = {
@@ -56,6 +56,11 @@ export default function RootLayout({
             <GoogleTagManager gtmId={serverConfig.gtmId} />
           </>
         )}
+        {serverConfig?.gaId && (
+          <>
+            <GoogleAnalytics gaId={serverConfig.gaId} />
+          </>
+        )}
       </body>
     </html>
   );