+
-ChatGPT Next Web
+NextChat (ChatGPT Next Web)
English / [简体中文](./README_CN.md) -One-Click to get well-designed cross-platform ChatGPT web UI. +One-Click to get a well-designed cross-platform ChatGPT web UI, with GPT3, GPT4 & Gemini Pro support. -一键免费部署你的跨平台私人 ChatGPT 应用。 +一键免费部署你的跨平台私人 ChatGPT 应用, 支持 GPT3, GPT4 & Gemini Pro 模型。 [![Web][Web-image]][web-url] [![Windows][Windows-image]][download-url] [![MacOS][MacOS-image]][download-url] [![Linux][Linux-image]][download-url] -[Web App](https://chatgpt.nextweb.fun/) / [Desktop App](https://github.com/Yidadaa/ChatGPT-Next-Web/releases) / [Discord](https://discord.gg/YCkeafCafC) / [Twitter](https://twitter.com/mortiest_ricky) / [Buy Me a Coffee](https://www.buymeacoffee.com/yidadaa) +[Web App](https://app.nextchat.dev/) / [Desktop App](https://github.com/Yidadaa/ChatGPT-Next-Web/releases) / [Discord](https://discord.gg/YCkeafCafC) / [Twitter](https://twitter.com/NextChatDev) -[网页版](https://chatgpt.nextweb.fun/) / [客户端](https://github.com/Yidadaa/ChatGPT-Next-Web/releases) / [反馈](https://github.com/Yidadaa/ChatGPT-Next-Web/issues) / [QQ 群](https://github.com/Yidadaa/ChatGPT-Next-Web/discussions/1724) / [打赏开发者](https://user-images.githubusercontent.com/16968934/227772541-5bcd52d8-61b7-488c-a203-0330d8006e2b.jpg) +[网页版](https://app.nextchat.dev/) / [客户端](https://github.com/Yidadaa/ChatGPT-Next-Web/releases) / [反馈](https://github.com/Yidadaa/ChatGPT-Next-Web/issues) [web-url]: https://chatgpt.nextweb.fun [download-url]: https://github.com/Yidadaa/ChatGPT-Next-Web/releases @@ -25,7 +25,9 @@ One-Click to get well-designed cross-platform ChatGPT web UI. [MacOS-image]: https://img.shields.io/badge/-MacOS-black?logo=apple [Linux-image]: https://img.shields.io/badge/-Linux-333?logo=ubuntu -[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FYidadaa%2FChatGPT-Next-Web&env=OPENAI_API_KEY&env=CODE&project-name=chatgpt-next-web&repository-name=ChatGPT-Next-Web) +[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FChatGPTNextWeb%2FChatGPT-Next-Web&env=OPENAI_API_KEY&env=CODE&project-name=nextchat&repository-name=NextChat) + +[](https://zeabur.com/templates/ZBUEFA) [](https://gitpod.io/#https://github.com/Yidadaa/ChatGPT-Next-Web) @@ -37,8 +39,8 @@ One-Click to get well-designed cross-platform ChatGPT web UI. - **Deploy for free with one-click** on Vercel in under 1 minute - Compact client (~5MB) on Linux/Windows/MacOS, [download it now](https://github.com/Yidadaa/ChatGPT-Next-Web/releases) -- Fully compatible with self-deployed llms, recommended for use with [RWKV-Runner](https://github.com/josStorer/RWKV-Runner) or [LocalAI](https://github.com/go-skynet/LocalAI) -- Privacy first, all data stored locally in the browser +- Fully compatible with self-deployed LLMs, recommended for use with [RWKV-Runner](https://github.com/josStorer/RWKV-Runner) or [LocalAI](https://github.com/go-skynet/LocalAI) +- Privacy first, all data is stored locally in the browser - Markdown support: LaTex, mermaid, code highlight, etc. - Responsive design, dark mode and PWA - Fast first screen loading speed (~100kb), support streaming response @@ -59,10 +61,11 @@ One-Click to get well-designed cross-platform ChatGPT web UI. ## What's New -- 🚀 v2.0 is released, now you can create prompt templates, turn your ideas into reality! Read this: [ChatGPT Prompt Engineering Tips: Zero, One and Few Shot Prompting](https://www.allabtai.com/prompt-engineering-tips-zero-one-and-few-shot-prompting/). -- 🚀 v2.7 let's share conversations as image, or share to ShareGPT! -- 🚀 v2.8 now we have a client that runs across all platforms! +- 🚀 v2.10.1 support Google Gemini Pro model. - 🚀 v2.9.11 you can use azure endpoint now. +- 🚀 v2.8 now we have a client that runs across all platforms! +- 🚀 v2.7 let's share conversations as image, or share to ShareGPT! +- 🚀 v2.0 is released, now you can create prompt templates, turn your ideas into reality! Read this: [ChatGPT Prompt Engineering Tips: Zero, One and Few Shot Prompting](https://www.allabtai.com/prompt-engineering-tips-zero-one-and-few-shot-prompting/). ## 主要功能 @@ -189,6 +192,26 @@ Azure Api Key. Azure Api Version, find it at [Azure Documentation](https://learn.microsoft.com/en-us/azure/ai-services/openai/reference#chat-completions). +### `GOOGLE_API_KEY` (optional) + +Google Gemini Pro Api Key. + +### `GOOGLE_URL` (optional) + +Google Gemini Pro Api Url. + +### `ANTHROPIC_API_KEY` (optional) + +anthropic claude Api Key. + +### `ANTHROPIC_API_VERSION` (optional) + +anthropic claude Api version. + +### `ANTHROPIC_URL` (optional) + +anthropic claude Api Url. + ### `HIDE_USER_API_KEY` (optional) > Default: Empty @@ -205,7 +228,7 @@ If you do not want users to use GPT-4, set this value to 1. > Default: Empty -If you do want users to query balance, set this value to 1, or you should set it to 0. +If you do want users to query balance, set this value to 1. ### `DISABLE_FAST_LINK` (optional) @@ -222,6 +245,17 @@ To control custom models, use `+` to add a custom model, use `-` to hide a model User `-all` to disable all default models, `+all` to enable all default models. +### `WHITE_WEBDEV_ENDPOINTS` (optional) + +You can use this option if you want to increase the number of webdav service addresses you are allowed to access, as required by the format： +- Each address must be a complete endpoint +> `https://xxxx/yyy` +- Multiple addresses are connected by ', ' + +### `DEFAULT_INPUT_TEMPLATE` (optional) + +Customize the default template used to initialize the User Input Preprocessing configuration item in Settings. + ## Requirements NodeJS >= 18, Docker >= 20 @@ -350,9 +384,11 @@ If you want to add a new translation, read this [document](./docs/translation.md [@Licoy](https://github.com/Licoy) [@shangmin2009](https://github.com/shangmin2009) -### Contributor +### Contributors -[Contributors](https://github.com/Yidadaa/ChatGPT-Next-Web/graphs/contributors) + +
-ChatGPT Next Web
+NextChat
-一键免费部署你的私人 ChatGPT 网页应用。 +一键免费部署你的私人 ChatGPT 网页应用，支持 GPT3, GPT4 & Gemini Pro 模型。 -[演示 Demo](https://chat-gpt-next-web.vercel.app/) / [反馈 Issues](https://github.com/Yidadaa/ChatGPT-Next-Web/issues) / [加入 Discord](https://discord.gg/zrhvHCr79N) / [QQ 群](https://user-images.githubusercontent.com/16968934/228190818-7dd00845-e9b9-4363-97e5-44c507ac76da.jpeg) / [打赏开发者](https://user-images.githubusercontent.com/16968934/227772541-5bcd52d8-61b7-488c-a203-0330d8006e2b.jpg) / [Donate](#捐赠-donate-usdt) +[演示 Demo](https://chat-gpt-next-web.vercel.app/) / [反馈 Issues](https://github.com/Yidadaa/ChatGPT-Next-Web/issues) / [加入 Discord](https://discord.gg/zrhvHCr79N) [](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FYidadaa%2FChatGPT-Next-Web&env=OPENAI_API_KEY&env=CODE&project-name=chatgpt-next-web&repository-name=ChatGPT-Next-Web) +[](https://zeabur.com/templates/ZBUEFA) + [](https://gitpod.io/#https://github.com/Yidadaa/ChatGPT-Next-Web)  @@ -19,7 +21,7 @@ 1. 准备好你的 [OpenAI API Key](https://platform.openai.com/account/api-keys); 2. 点击右侧按钮开始部署： - [](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FYidadaa%2FChatGPT-Next-Web&env=OPENAI_API_KEY&env=CODE&project-name=chatgpt-next-web&repository-name=ChatGPT-Next-Web)，直接使用 Github 账号登录即可，记得在环境变量页填入 API Key 和[页面访问密码](#配置页面访问密码) CODE； + [](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FYidadaa%2FChatGPT-Next-Web&env=OPENAI_API_KEY&env=CODE&env=GOOGLE_API_KEY&project-name=chatgpt-next-web&repository-name=ChatGPT-Next-Web)，直接使用 Github 账号登录即可，记得在环境变量页填入 API Key 和[页面访问密码](#配置页面访问密码) CODE； 3. 部署完毕后，即可开始使用； 4. （可选）[绑定自定义域名](https://vercel.com/docs/concepts/projects/domains/add-a-domain)：Vercel 分配的域名 DNS 在某些区域被污染了，绑定自定义域名即可直连。 @@ -104,6 +106,26 @@ Azure 密钥。 Azure Api 版本，你可以在这里找到：[Azure 文档](https://learn.microsoft.com/en-us/azure/ai-services/openai/reference#chat-completions)。 +### `GOOGLE_API_KEY` (optional) + +Google Gemini Pro 密钥. + +### `GOOGLE_URL` (optional) + +Google Gemini Pro Api Url. + +### `ANTHROPIC_API_KEY` (optional) + +anthropic claude Api Key. + +### `ANTHROPIC_API_VERSION` (optional) + +anthropic claude Api version. + +### `ANTHROPIC_URL` (optional) + +anthropic claude Api Url. + ### `HIDE_USER_API_KEY` （可选） 如果你不想让用户自行填入 API Key，将此环境变量设置为 1 即可。 @@ -120,6 +142,13 @@ Azure Api 版本，你可以在这里找到：[Azure 文档](https://learn.micro 如果你想禁用从链接解析预制设置，将此环境变量设置为 1 即可。 +### `WHITE_WEBDEV_ENDPOINTS` (可选) + +如果你想增加允许访问的webdav服务地址，可以使用该选项，格式要求： +- 每一个地址必须是一个完整的 endpoint +> `https://xxxx/xxx` +- 多个地址以`,`相连 + ### `CUSTOM_MODELS` （可选） > 示例：`+qwen-7b-chat,+glm-6b,-gpt-3.5-turbo,gpt-4-1106-preview=gpt-4-turbo` 表示增加 `qwen-7b-chat` 和 `glm-6b` 到模型列表，而从列表中删除 `gpt-3.5-turbo`，并将 `gpt-4-1106-preview` 模型名字展示为 `gpt-4-turbo`。 @@ -127,6 +156,9 @@ Azure Api 版本，你可以在这里找到：[Azure 文档](https://learn.micro 用来控制模型列表，使用 `+` 增加一个模型，使用 `-` 来隐藏一个模型，使用 `模型名=展示名` 来自定义模型的展示名，用英文逗号隔开。 +### `DEFAULT_INPUT_TEMPLATE` （可选） +自定义默认的 template，用于初始化『设置』中的『用户输入预处理』配置项 + ## 开发 点击下方按钮，开始二次开发： @@ -205,6 +237,7 @@ bash <(curl -s https://raw.githubusercontent.com/Yidadaa/ChatGPT-Next-Web/main/s [见项目贡献者列表](https://github.com/Yidadaa/ChatGPT-Next-Web/graphs/contributors) ### 相关项目 + - [one-api](https://github.com/songquanpeng/one-api): 一站式大模型额度管理平台，支持市面上所有主流大语言模型 ## 开源协议 diff --git a/app/api/anthropic/[...path]/route.ts b/app/api/anthropic/[...path]/route.ts new file mode 100644 index 000000000..4264893d9 --- /dev/null +++ b/app/api/anthropic/[...path]/route.ts @@ -0,0 +1,189 @@ +import { getServerSideConfig } from "@/app/config/server"; +import { + ANTHROPIC_BASE_URL, + Anthropic, + ApiPath, + DEFAULT_MODELS, + ModelProvider, +} from "@/app/constant"; +import { prettyObject } from "@/app/utils/format"; +import { NextRequest, NextResponse } from "next/server"; +import { auth } from "../../auth"; +import { collectModelTable } from "@/app/utils/model"; + +const ALLOWD_PATH = new Set([Anthropic.ChatPath, Anthropic.ChatPath1]); + +async function handle( + req: NextRequest, + { params }: { params: { path: string[] } }, +) { + console.log("[Anthropic Route] params ", params); + + if (req.method === "OPTIONS") { + return NextResponse.json({ body: "OK" }, { status: 200 }); + } + + const subpath = params.path.join("/"); + + if (!ALLOWD_PATH.has(subpath)) { + console.log("[Anthropic Route] forbidden path ", subpath); + return NextResponse.json( + { + error: true, + msg: "you are not allowed to request " + subpath, + }, + { + status: 403, + }, + ); + } + + const authResult = auth(req, ModelProvider.Claude); + if (authResult.error) { + return NextResponse.json(authResult, { + status: 401, + }); + } + + try { + const response = await request(req); + return response; + } catch (e) { + console.error("[Anthropic] ", e); + return NextResponse.json(prettyObject(e)); + } +} + +export const GET = handle; +export const POST = handle; + +export const runtime = "edge"; +export const preferredRegion = [ + "arn1", + "bom1", + "cdg1", + "cle1", + "cpt1", + "dub1", + "fra1", + "gru1", + "hnd1", + "iad1", + "icn1", + "kix1", + "lhr1", + "pdx1", + "sfo1", + "sin1", + "syd1", +]; + +const serverConfig = getServerSideConfig(); + +async function request(req: NextRequest) { + const controller = new AbortController(); + + let authHeaderName = "x-api-key"; + let authValue = + req.headers.get(authHeaderName) || + req.headers.get("Authorization")?.replaceAll("Bearer ", "").trim() || + serverConfig.anthropicApiKey || + ""; + + let path = `${req.nextUrl.pathname}`.replaceAll(ApiPath.Anthropic, ""); + + let baseUrl = + serverConfig.anthropicUrl || serverConfig.baseUrl || ANTHROPIC_BASE_URL; + + if (!baseUrl.startsWith("http")) { + baseUrl = `https://${baseUrl}`; + } + + if (baseUrl.endsWith("/")) { + baseUrl = baseUrl.slice(0, -1); + } + + console.log("[Proxy] ", path); + console.log("[Base Url]", baseUrl); + + const timeoutId = setTimeout( + () => { + controller.abort(); + }, + 10 * 60 * 1000, + ); + + const fetchUrl = `${baseUrl}${path}`; + + const fetchOptions: RequestInit = { + headers: { + "Content-Type": "application/json", + "Cache-Control": "no-store", + [authHeaderName]: authValue, + "anthropic-version": + req.headers.get("anthropic-version") || + serverConfig.anthropicApiVersion || + Anthropic.Vision, + }, + method: req.method, + body: req.body, + redirect: "manual", + // @ts-ignore + duplex: "half", + signal: controller.signal, + }; + + // #1815 try to refuse some request to some models + if (serverConfig.customModels && req.body) { + try { + const modelTable = collectModelTable( + DEFAULT_MODELS, + serverConfig.customModels, + ); + const clonedBody = await req.text(); + fetchOptions.body = clonedBody; + + const jsonBody = JSON.parse(clonedBody) as { model?: string }; + + // not undefined and is false + if (modelTable[jsonBody?.model ?? ""].available === false) { + return NextResponse.json( + { + error: true, + message: `you are not allowed to use ${jsonBody?.model} model`, + }, + { + status: 403, + }, + ); + } + } catch (e) { + console.error(`[Anthropic] filter`, e); + } + } + console.log("[Anthropic request]", fetchOptions.headers, req.method); + try { + const res = await fetch(fetchUrl, fetchOptions); + + console.log( + "[Anthropic response]", + res.status, + " ", + res.headers, + res.url, + ); + // to prevent browser prompt for credentials + const newHeaders = new Headers(res.headers); + newHeaders.delete("www-authenticate"); + // to disable nginx buffering + newHeaders.set("X-Accel-Buffering", "no"); + + return new Response(res.body, { + status: res.status, + statusText: res.statusText, + headers: newHeaders, + }); + } finally { + clearTimeout(timeoutId); + } +} diff --git a/app/api/auth.ts b/app/api/auth.ts index b41e34e05..b750f2d17 100644 --- a/app/api/auth.ts +++ b/app/api/auth.ts @@ -1,7 +1,7 @@ import { NextRequest } from "next/server"; import { getServerSideConfig } from "../config/server"; import md5 from "spark-md5"; -import { ACCESS_CODE_PREFIX } from "../constant"; +import { ACCESS_CODE_PREFIX, ModelProvider } from "../constant"; function getIP(req: NextRequest) { let ip = req.ip ?? req.headers.get("x-real-ip"); @@ -16,15 +16,15 @@ function getIP(req: NextRequest) { function parseApiKey(bearToken: string) { const token = bearToken.trim().replaceAll("Bearer ", "").trim(); - const isOpenAiKey = !token.startsWith(ACCESS_CODE_PREFIX); + const isApiKey = !token.startsWith(ACCESS_CODE_PREFIX); return { - accessCode: isOpenAiKey ? "" : token.slice(ACCESS_CODE_PREFIX.length), - apiKey: isOpenAiKey ? token : "", + accessCode: isApiKey ? "" : token.slice(ACCESS_CODE_PREFIX.length), + apiKey: isApiKey ? token : "", }; } -export function auth(req: NextRequest) { +export function auth(req: NextRequest, modelProvider: ModelProvider) { const authToken = req.headers.get("Authorization") ?? ""; // check if it is openai api key or user token @@ -49,22 +49,42 @@ export function auth(req: NextRequest) { if (serverConfig.hideUserApiKey && !!apiKey) { return { error: true, - msg: "you are not allowed to access openai with your own api key", + msg: "you are not allowed to access with your own api key", }; } // if user does not provide an api key, inject system api key if (!apiKey) { - const serverApiKey = serverConfig.isAzure - ? serverConfig.azureApiKey - : serverConfig.apiKey; + const serverConfig = getServerSideConfig(); - if (serverApiKey) { + // const systemApiKey = + // modelProvider === ModelProvider.GeminiPro + // ? serverConfig.googleApiKey + // : serverConfig.isAzure + // ? serverConfig.azureApiKey + // : serverConfig.apiKey; + + let systemApiKey: string | undefined; + + switch (modelProvider) { + case ModelProvider.GeminiPro: + systemApiKey = serverConfig.googleApiKey; + break; + case ModelProvider.Claude: + systemApiKey = serverConfig.anthropicApiKey; + break; + case ModelProvider.GPT: + default: + if (serverConfig.isAzure) { + systemApiKey = serverConfig.azureApiKey; + } else { + systemApiKey = serverConfig.apiKey; + } + } + + if (systemApiKey) { console.log("[Auth] use system api key"); - req.headers.set( - "Authorization", - `${serverConfig.isAzure ? "" : "Bearer "}${serverApiKey}`, - ); + req.headers.set("Authorization", `Bearer ${systemApiKey}`); } else { console.log("[Auth] admin did not provide an api key"); } diff --git a/app/api/common.ts b/app/api/common.ts index 6b0d619df..a75f2de5c 100644 --- a/app/api/common.ts +++ b/app/api/common.ts @@ -1,6 +1,6 @@ import { NextRequest, NextResponse } from "next/server"; import { getServerSideConfig } from "../config/server"; -import { DEFAULT_MODELS, OPENAI_BASE_URL } from "../constant"; +import { DEFAULT_MODELS, OPENAI_BASE_URL, GEMINI_BASE_URL } from "../constant"; import { collectModelTable } from "../utils/model"; import { makeAzurePath } from "../azure"; @@ -9,8 +9,21 @@ const serverConfig = getServerSideConfig(); export async function requestOpenai(req: NextRequest) { const controller = new AbortController(); - const authValue = req.headers.get("Authorization") ?? ""; - const authHeaderName = serverConfig.isAzure ? "api-key" : "Authorization"; + var authValue, + authHeaderName = ""; + if (serverConfig.isAzure) { + authValue = + req.headers + .get("Authorization") + ?.trim() + .replaceAll("Bearer ", "") + .trim() ?? ""; + + authHeaderName = "api-key"; + } else { + authValue = req.headers.get("Authorization") ?? ""; + authHeaderName = "Authorization"; + } let path = `${req.nextUrl.pathname}${req.nextUrl.search}`.replaceAll( "/api/openai/", @@ -30,10 +43,6 @@ export async function requestOpenai(req: NextRequest) { console.log("[Proxy] ", path); console.log("[Base Url]", baseUrl); - // this fix [Org ID] undefined in server side if not using custom point - if (serverConfig.openaiOrgId !== undefined) { - console.log("[Org ID]", serverConfig.openaiOrgId); - } const timeoutId = setTimeout( () => { @@ -103,12 +112,37 @@ export async function requestOpenai(req: NextRequest) { try { const res = await fetch(fetchUrl, fetchOptions); + // Extract the OpenAI-Organization header from the response + const openaiOrganizationHeader = res.headers.get("OpenAI-Organization"); + + // Check if serverConfig.openaiOrgId is defined and not an empty string + if (serverConfig.openaiOrgId && serverConfig.openaiOrgId.trim() !== "") { + // If openaiOrganizationHeader is present, log it; otherwise, log that the header is not present + console.log("[Org ID]", openaiOrganizationHeader); + } else { + console.log("[Org ID] is not set up."); + } + // to prevent browser prompt for credentials const newHeaders = new Headers(res.headers); newHeaders.delete("www-authenticate"); // to disable nginx buffering newHeaders.set("X-Accel-Buffering", "no"); + + // Conditionally delete the OpenAI-Organization header from the response if [Org ID] is undefined or empty (not setup in ENV) + // Also, this is to prevent the header from being sent to the client + if (!serverConfig.openaiOrgId || serverConfig.openaiOrgId.trim() === "") { + newHeaders.delete("OpenAI-Organization"); + } + + // The latest version of the OpenAI API forced the content-encoding to be "br" in json response + // So if the streaming is disabled, we need to remove the content-encoding header + // Because Vercel uses gzip to compress the response, if we don't remove the content-encoding header + // The browser will try to decode the response with brotli and fail + newHeaders.delete("content-encoding"); + + return new Response(res.body, { status: res.status, statusText: res.statusText, diff --git a/app/api/config/route.ts b/app/api/config/route.ts index db84fba17..b0d9da031 100644 --- a/app/api/config/route.ts +++ b/app/api/config/route.ts @@ -13,6 +13,7 @@ const DANGER_CONFIG = { hideBalanceQuery: serverConfig.hideBalanceQuery, disableFastLink: serverConfig.disableFastLink, customModels: serverConfig.customModels, + defaultModel: serverConfig.defaultModel, }; declare global { diff --git a/app/api/cors/[...path]/route.ts b/app/api/cors/[...path]/route.ts deleted file mode 100644 index 0217b12b0..000000000 --- a/app/api/cors/[...path]/route.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { NextRequest, NextResponse } from "next/server"; - -async function handle( - req: NextRequest, - { params }: { params: { path: string[] } }, -) { - if (req.method === "OPTIONS") { - return NextResponse.json({ body: "OK" }, { status: 200 }); - } - - const [protocol, ...subpath] = params.path; - const targetUrl = `${protocol}://${subpath.join("/")}`; - - const method = req.headers.get("method") ?? undefined; - const shouldNotHaveBody = ["get", "head"].includes( - method?.toLowerCase() ?? "", - ); - - const fetchOptions: RequestInit = { - headers: { - authorization: req.headers.get("authorization") ?? "", - }, - body: shouldNotHaveBody ? null : req.body, - method, - // @ts-ignore - duplex: "half", - }; - - const fetchResult = await fetch(targetUrl, fetchOptions); - - console.log("[Any Proxy]", targetUrl, { - status: fetchResult.status, - statusText: fetchResult.statusText, - }); - - return fetchResult; -} - -export const POST = handle; -export const GET = handle; -export const OPTIONS = handle; - -export const runtime = "nodejs"; diff --git a/app/api/google/[...path]/route.ts b/app/api/google/[...path]/route.ts new file mode 100644 index 000000000..ebd192891 --- /dev/null +++ b/app/api/google/[...path]/route.ts @@ -0,0 +1,116 @@ +import { NextRequest, NextResponse } from "next/server"; +import { auth } from "../../auth"; +import { getServerSideConfig } from "@/app/config/server"; +import { GEMINI_BASE_URL, Google, ModelProvider } from "@/app/constant"; + +async function handle( + req: NextRequest, + { params }: { params: { path: string[] } }, +) { + console.log("[Google Route] params ", params); + + if (req.method === "OPTIONS") { + return NextResponse.json({ body: "OK" }, { status: 200 }); + } + + const controller = new AbortController(); + + const serverConfig = getServerSideConfig(); + + let baseUrl = serverConfig.googleUrl || GEMINI_BASE_URL; + + if (!baseUrl.startsWith("http")) { + baseUrl = `https://${baseUrl}`; + } + + if (baseUrl.endsWith("/")) { + baseUrl = baseUrl.slice(0, -1); + } + + let path = `${req.nextUrl.pathname}`.replaceAll("/api/google/", ""); + + console.log("[Proxy] ", path); + console.log("[Base Url]", baseUrl); + + const timeoutId = setTimeout( + () => { + controller.abort(); + }, + 10 * 60 * 1000, + ); + + const authResult = auth(req, ModelProvider.GeminiPro); + if (authResult.error) { + return NextResponse.json(authResult, { + status: 401, + }); + } + + const bearToken = req.headers.get("Authorization") ?? ""; + const token = bearToken.trim().replaceAll("Bearer ", "").trim(); + + const key = token ? token : serverConfig.googleApiKey; + + if (!key) { + return NextResponse.json( + { + error: true, + message: `missing GOOGLE_API_KEY in server env vars`, + }, + { + status: 401, + }, + ); + } + + const fetchUrl = `${baseUrl}/${path}?key=${key}`; + const fetchOptions: RequestInit = { + headers: { + "Content-Type": "application/json", + "Cache-Control": "no-store", + }, + method: req.method, + body: req.body, + // to fix #2485: https://stackoverflow.com/questions/55920957/cloudflare-worker-typeerror-one-time-use-body + redirect: "manual", + // @ts-ignore + duplex: "half", + signal: controller.signal, + }; + + try { + const res = await fetch(fetchUrl, fetchOptions); + // to prevent browser prompt for credentials + const newHeaders = new Headers(res.headers); + newHeaders.delete("www-authenticate"); + // to disable nginx buffering + newHeaders.set("X-Accel-Buffering", "no"); + + return new Response(res.body, { + status: res.status, + statusText: res.statusText, + headers: newHeaders, + }); + } finally { + clearTimeout(timeoutId); + } +} + +export const GET = handle; +export const POST = handle; + +export const runtime = "edge"; +export const preferredRegion = [ + "bom1", + "cle1", + "cpt1", + "gru1", + "hnd1", + "iad1", + "icn1", + "kix1", + "pdx1", + "sfo1", + "sin1", + "syd1", +]; diff --git a/app/api/openai/[...path]/route.ts b/app/api/openai/[...path]/route.ts index 2addd53a5..77059c151 100644 --- a/app/api/openai/[...path]/route.ts +++ b/app/api/openai/[...path]/route.ts @@ -1,6 +1,6 @@ import { type OpenAIListModelResponse } from "@/app/client/platforms/openai"; import { getServerSideConfig } from "@/app/config/server"; -import { OpenaiPath } from "@/app/constant"; +import { ModelProvider, OpenaiPath } from "@/app/constant"; import { prettyObject } from "@/app/utils/format"; import { NextRequest, NextResponse } from "next/server"; import { auth } from "../../auth"; @@ -45,7 +45,7 @@ async function handle( ); } - const authResult = auth(req); + const authResult = auth(req, ModelProvider.GPT); if (authResult.error) { return NextResponse.json(authResult, { status: 401, @@ -75,4 +75,22 @@ export const GET = handle; export const POST = handle; export const runtime = "edge"; -export const preferredRegion = ['arn1', 'bom1', 'cdg1', 'cle1', 'cpt1', 'dub1', 'fra1', 'gru1', 'hnd1', 'iad1', 'icn1', 'kix1', 'lhr1', 'pdx1', 'sfo1', 'sin1', 'syd1']; +export const preferredRegion = [ + "arn1", + "bom1", + "cdg1", + "cle1", + "cpt1", + "dub1", + "fra1", + "gru1", + "hnd1", + "iad1", + "icn1", + "kix1", + "lhr1", + "pdx1", + "sfo1", + "sin1", + "syd1", +]; diff --git a/app/api/upstash/[action]/[...key]/route.ts b/app/api/upstash/[action]/[...key]/route.ts new file mode 100644 index 000000000..fcfef4718 --- /dev/null +++ b/app/api/upstash/[action]/[...key]/route.ts @@ -0,0 +1,73 @@ +import { NextRequest, NextResponse } from "next/server"; + +async function handle( + req: NextRequest, + { params }: { params: { action: string; key: string[] } }, +) { + const requestUrl = new URL(req.url); + const endpoint = requestUrl.searchParams.get("endpoint"); + + if (req.method === "OPTIONS") { + return NextResponse.json({ body: "OK" }, { status: 200 }); + } + const [...key] = params.key; + // only allow to request to *.upstash.io + if (!endpoint || !new URL(endpoint).hostname.endsWith(".upstash.io")) { + return NextResponse.json( + { + error: true, + msg: "you are not allowed to request " + params.key.join("/"), + }, + { + status: 403, + }, + ); + } + + // only allow upstash get and set method + if (params.action !== "get" && params.action !== "set") { + console.log("[Upstash Route] forbidden action ", params.action); + return NextResponse.json( + { + error: true, + msg: "you are not allowed to request " + params.action, + }, + { + status: 403, + }, + ); + } + + const targetUrl = `${endpoint}/${params.action}/${params.key.join("/")}`; + + const method = req.method; + const shouldNotHaveBody = ["get", "head"].includes( + method?.toLowerCase() ?? "", + ); + + const fetchOptions: RequestInit = { + headers: { + authorization: req.headers.get("authorization") ?? "", + }, + body: shouldNotHaveBody ? null : req.body, + method, + // @ts-ignore + duplex: "half", + }; + + console.log("[Upstash Proxy]", targetUrl, fetchOptions); + const fetchResult = await fetch(targetUrl, fetchOptions); + + console.log("[Any Proxy]", targetUrl, { + status: fetchResult.status, + statusText: fetchResult.statusText, + }); + + return fetchResult; +} + +export const POST = handle; +export const GET = handle; +export const OPTIONS = handle; + +export const runtime = "edge"; diff --git a/app/api/webdav/[...path]/route.ts b/app/api/webdav/[...path]/route.ts new file mode 100644 index 000000000..816c2046b --- /dev/null +++ b/app/api/webdav/[...path]/route.ts @@ -0,0 +1,144 @@ +import { NextRequest, NextResponse } from "next/server"; +import { STORAGE_KEY, internalAllowedWebDavEndpoints } from "../../../constant"; +import { getServerSideConfig } from "@/app/config/server"; + +const config = getServerSideConfig(); + +const mergedAllowedWebDavEndpoints = [ + ...internalAllowedWebDavEndpoints, + ...config.allowedWebDevEndpoints, +].filter((domain) => Boolean(domain.trim())); + +async function handle( + req: NextRequest, + { params }: { params: { path: string[] } }, +) { + if (req.method === "OPTIONS") { + return NextResponse.json({ body: "OK" }, { status: 200 }); + } + const folder = STORAGE_KEY; + const fileName = `${folder}/backup.json`; + + const requestUrl = new URL(req.url); + let endpoint = requestUrl.searchParams.get("endpoint"); + + // Validate the endpoint to prevent potential SSRF attacks + if ( + !mergedAllowedWebDavEndpoints.some( + (allowedEndpoint) => endpoint?.startsWith(allowedEndpoint), + ) + ) { + return NextResponse.json( + { + error: true, + msg: "Invalid endpoint", + }, + { + status: 400, + }, + ); + } + + if (!endpoint?.endsWith("/")) { + endpoint += "/"; + } + + const endpointPath = params.path.join("/"); + const targetPath = `${endpoint}${endpointPath}`; + + // only allow MKCOL, GET, PUT + if (req.method !== "MKCOL" && req.method !== "GET" && req.method !== "PUT") { + return NextResponse.json( + { + error: true, + msg: "you are not allowed to request " + targetPath, + }, + { + status: 403, + }, + ); + } + + // for MKCOL request, only allow request ${folder} + if (req.method === "MKCOL" && !targetPath.endsWith(folder)) { + return NextResponse.json( + { + error: true, + msg: "you are not allowed to request " + targetPath, + }, + { + status: 403, + }, + ); + } + + // for GET request, only allow request ending with fileName + if (req.method === "GET" && !targetPath.endsWith(fileName)) { + return NextResponse.json( + { + error: true, + msg: "you are not allowed to request " + targetPath, + }, + { + status: 403, + }, + ); + } + + // for PUT request, only allow request ending with fileName + if (req.method === "PUT" && !targetPath.endsWith(fileName)) { + return NextResponse.json( + { + error: true, + msg: "you are not allowed to request " + targetPath, + }, + { + status: 403, + }, + ); + } + + const targetUrl = targetPath; + + const method = req.method; + const shouldNotHaveBody = ["get", "head"].includes( + method?.toLowerCase() ?? "", + ); + + const fetchOptions: RequestInit = { + headers: { + authorization: req.headers.get("authorization") ?? "", + }, + body: shouldNotHaveBody ? null : req.body, + redirect: "manual", + method, + // @ts-ignore + duplex: "half", + }; + + let fetchResult; + + try { + fetchResult = await fetch(targetUrl, fetchOptions); + } finally { + console.log( + "[Any Proxy]", + targetUrl, + { + method: req.method, + }, + { + status: fetchResult?.status, + statusText: fetchResult?.statusText, + }, + ); + } + + return fetchResult; +} + +export const PUT = handle; +export const GET = handle; +export const OPTIONS = handle; + +export const runtime = "edge"; diff --git a/app/client/api.ts b/app/client/api.ts index eedd2c9ab..7bee546b4 100644 --- a/app/client/api.ts +++ b/app/client/api.ts @@ -1,17 +1,31 @@ import { getClientConfig } from "../config/client"; -import { ACCESS_CODE_PREFIX, Azure, ServiceProvider } from "../constant"; -import { ChatMessage, ModelType, useAccessStore } from "../store"; +import { + ACCESS_CODE_PREFIX, + Azure, + ModelProvider, + ServiceProvider, +} from "../constant"; +import { ChatMessage, ModelType, useAccessStore, useChatStore } from "../store"; import { ChatGPTApi } from "./platforms/openai"; - +import { GeminiProApi } from "./platforms/google"; +import { ClaudeApi } from "./platforms/anthropic"; export const ROLES = ["system", "user", "assistant"] as const; export type MessageRole = (typeof ROLES)[number]; export const Models = ["gpt-3.5-turbo", "gpt-4"] as const; export type ChatModel = ModelType; +export interface MultimodalContent { + type: "text" | "image_url"; + text?: string; + image_url?: { + url: string; + }; +} + export interface RequestMessage { role: MessageRole; - content: string; + content: string | MultimodalContent[]; } export interface LLMConfig { @@ -41,6 +55,13 @@ export interface LLMUsage { export interface LLMModel { name: string; available: boolean; + provider: LLMModelProvider; +} + +export interface LLMModelProvider { + id: string; + providerName: string; + providerType: string; } export abstract class LLMApi { @@ -73,8 +94,17 @@ interface ChatProvider { export class ClientApi { public llm: LLMApi; - constructor() { - this.llm = new ChatGPTApi(); + constructor(provider: ModelProvider = ModelProvider.GPT) { + switch (provider) { + case ModelProvider.GeminiPro: + this.llm = new GeminiProApi(); + break; + case ModelProvider.Claude: + this.llm = new ClaudeApi(); + break; + default: + this.llm = new ChatGPTApi(); + } } config() {} @@ -93,7 +123,7 @@ export class ClientApi { { from: "human", value: - "Share from [ChatGPT Next Web]: https://github.com/Yidadaa/ChatGPT-Next-Web", + "Share from [NextChat]: https://github.com/Yidadaa/ChatGPT-Next-Web", }, ]); // 敬告二开开发者们，为了开源大模型的发展，请不要修改上述消息，此消息用于后续数据清洗使用 @@ -123,32 +153,38 @@ export class ClientApi { } } -export const api = new ClientApi(); - export function getHeaders() { const accessStore = useAccessStore.getState(); const headers: Record {
diff --git a/app/components/chat.module.scss b/app/components/chat.module.scss
index 16790ccb1..e7619e92b 100644
--- a/app/components/chat.module.scss
+++ b/app/components/chat.module.scss
@@ -1,5 +1,47 @@
@import "../styles/animation.scss";
+.attach-images {
+ position: absolute;
+ left: 30px;
+ bottom: 32px;
+ display: flex;
+}
+
+.attach-image {
+ cursor: default;
+ width: 64px;
+ height: 64px;
+ border: rgba($color: #888, $alpha: 0.2) 1px solid;
+ border-radius: 5px;
+ margin-right: 10px;
+ background-size: cover;
+ background-position: center;
+ background-color: var(--white);
+
+ .attach-image-mask {
+ width: 100%;
+ height: 100%;
+ opacity: 0;
+ transition: all ease 0.2s;
+ }
+
+ .attach-image-mask:hover {
+ opacity: 1;
+ }
+
+ .delete-image {
+ width: 24px;
+ height: 24px;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 5px;
+ float: right;
+ background-color: var(--white);
+ }
+}
+
.chat-input-actions {
display: flex;
flex-wrap: wrap;
@@ -189,12 +231,10 @@
animation: slide-in ease 0.3s;
- $linear: linear-gradient(
- to right,
- rgba(0, 0, 0, 0),
- rgba(0, 0, 0, 1),
- rgba(0, 0, 0, 0)
- );
+ $linear: linear-gradient(to right,
+ rgba(0, 0, 0, 0),
+ rgba(0, 0, 0, 1),
+ rgba(0, 0, 0, 0));
mask-image: $linear;
@mixin show {
@@ -327,7 +367,7 @@
}
}
-.chat-message-user > .chat-message-container {
+.chat-message-user>.chat-message-container {
align-items: flex-end;
}
@@ -349,6 +389,7 @@
padding: 7px;
}
}
+
/* Specific styles for iOS devices */
@media screen and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 2) {
@supports (-webkit-touch-callout: none) {
@@ -381,6 +422,64 @@
transition: all ease 0.3s;
}
+.chat-message-item-image {
+ width: 100%;
+ margin-top: 10px;
+}
+
+.chat-message-item-images {
+ width: 100%;
+ display: grid;
+ justify-content: left;
+ grid-gap: 10px;
+ grid-template-columns: repeat(var(--image-count), auto);
+ margin-top: 10px;
+}
+
+.chat-message-item-image-multi {
+ object-fit: cover;
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+}
+
+.chat-message-item-image,
+.chat-message-item-image-multi {
+ box-sizing: border-box;
+ border-radius: 10px;
+ border: rgba($color: #888, $alpha: 0.2) 1px solid;
+}
+
+
+@media only screen and (max-width: 600px) {
+ $calc-image-width: calc(100vw/3*2/var(--image-count));
+
+ .chat-message-item-image-multi {
+ width: $calc-image-width;
+ height: $calc-image-width;
+ }
+
+ .chat-message-item-image {
+ max-width: calc(100vw/3*2);
+ }
+}
+
+@media screen and (min-width: 600px) {
+ $max-image-width: calc(calc(1200px - var(--sidebar-width))/3*2/var(--image-count));
+ $image-width: calc(calc(var(--window-width) - var(--sidebar-width))/3*2/var(--image-count));
+
+ .chat-message-item-image-multi {
+ width: $image-width;
+ height: $image-width;
+ max-width: $max-image-width;
+ max-height: $max-image-width;
+ }
+
+ .chat-message-item-image {
+ max-width: calc(calc(1200px - var(--sidebar-width))/3*2);
+ }
+}
+
.chat-message-action-date {
font-size: 12px;
opacity: 0.2;
@@ -395,7 +494,7 @@
z-index: 1;
}
-.chat-message-user > .chat-message-container > .chat-message-item {
+.chat-message-user>.chat-message-container>.chat-message-item {
background-color: var(--second);
&:hover {
@@ -460,6 +559,7 @@
@include single-line();
}
+
.hint-content {
font-size: 12px;
@@ -474,15 +574,26 @@
}
.chat-input-panel-inner {
+ cursor: text;
display: flex;
flex: 1;
+ border-radius: 10px;
+ border: var(--border-in-light);
+}
+
+.chat-input-panel-inner-attach {
+ padding-bottom: 80px;
+}
+
+.chat-input-panel-inner:has(.chat-input:focus) {
+ border: 1px solid var(--primary);
}
.chat-input {
height: 100%;
width: 100%;
border-radius: 10px;
- border: var(--border-in-light);
+ border: none;
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.03);
background-color: var(--white);
color: var(--black);
@@ -494,9 +605,7 @@
min-height: 68px;
}
-.chat-input:focus {
- border: 1px solid var(--primary);
-}
+.chat-input:focus {}
.chat-input-send {
background-color: var(--primary);
@@ -515,4 +624,4 @@
.chat-input-send {
bottom: 30px;
}
-}
+}
\ No newline at end of file
diff --git a/app/components/chat.tsx b/app/components/chat.tsx
index 39abdd97b..061192504 100644
--- a/app/components/chat.tsx
+++ b/app/components/chat.tsx
@@ -6,6 +6,7 @@ import React, {
useMemo,
useCallback,
Fragment,
+ RefObject,
} from "react";
import SendWhiteIcon from "../icons/send-white.svg";
@@ -15,6 +16,7 @@ import ExportIcon from "../icons/share.svg";
import ReturnIcon from "../icons/return.svg";
import CopyIcon from "../icons/copy.svg";
import LoadingIcon from "../icons/three-dots.svg";
+import LoadingButtonIcon from "../icons/loading.svg";
import PromptIcon from "../icons/prompt.svg";
import MaskIcon from "../icons/mask.svg";
import MaxIcon from "../icons/max.svg";
@@ -27,6 +29,7 @@ import PinIcon from "../icons/pin.svg";
import EditIcon from "../icons/rename.svg";
import ConfirmIcon from "../icons/confirm.svg";
import CancelIcon from "../icons/cancel.svg";
+import ImageIcon from "../icons/image.svg";
import LightIcon from "../icons/light.svg";
import DarkIcon from "../icons/dark.svg";
@@ -53,8 +56,13 @@ import {
selectOrCopy,
autoGrowTextArea,
useMobileScreen,
+ getMessageTextContent,
+ getMessageImages,
+ isVisionModel,
} from "../utils";
+import { compressImage } from "@/app/utils/chat";
+
import dynamic from "next/dynamic";
import { ChatControllerPool } from "../client/controller";
@@ -89,6 +97,7 @@ import { prettyObject } from "../utils/format";
import { ExportMessageModal } from "./exporter";
import { getClientConfig } from "../config/client";
import { useAllModels } from "../utils/hooks";
+import { MultimodalContent } from "../client/api";
const Markdown = dynamic(async () => (await import("./markdown")).Markdown, {
loading: () => ) => {
+ // Fix Chinese input method "Enter" on Safari
+ if (e.keyCode == 229) return false;
if (e.key !== "Enter") return false;
if (e.key === "Enter" && (e.nativeEvent.isComposing || isComposing.current))
return false;
@@ -375,11 +386,13 @@ function ChatAction(props: {
);
}
-function useScrollToBottom() {
+function useScrollToBottom(
+ scrollRef: RefObject,
+ detach: boolean = false,
+) {
// for auto-scroll
- const scrollRef = useRef(null);
- const [autoScroll, setAutoScroll] = useState(true);
+ const [autoScroll, setAutoScroll] = useState(true);
function scrollDomToBottom() {
const dom = scrollRef.current;
if (dom) {
@@ -392,7 +405,7 @@ function useScrollToBottom() {
// auto scroll
useEffect(() => {
- if (autoScroll) {
+ if (autoScroll && !detach) {
scrollDomToBottom();
}
});
@@ -406,10 +419,14 @@ function useScrollToBottom() {
}
export function ChatActions(props: {
+ uploadImage: () => void;
+ setAttachImages: (images: string[]) => void;
+ setUploading: (uploading: boolean) => void;
showPromptModal: () => void;
scrollToBottom: () => void;
showPromptHints: () => void;
hitBottom: boolean;
+ uploading: boolean;
}) {
const config = useAppConfig();
const navigate = useNavigate();
@@ -432,18 +449,39 @@ export function ChatActions(props: {
// switch model
const currentModel = chatStore.currentSession().mask.modelConfig.model;
const allModels = useAllModels();
- const models = useMemo(
- () => allModels.filter((m) => m.available),
- [allModels],
- );
+ const models = useMemo(() => {
+ const filteredModels = allModels.filter((m) => m.available);
+ const defaultModel = filteredModels.find((m) => m.isDefault);
+
+ if (defaultModel) {
+ const arr = [
+ defaultModel,
+ ...filteredModels.filter((m) => m !== defaultModel),
+ ];
+ return arr;
+ } else {
+ return filteredModels;
+ }
+ }, [allModels]);
const [showModelSelector, setShowModelSelector] = useState(false);
+ const [showUploadImage, setShowUploadImage] = useState(false);
useEffect(() => {
+ const show = isVisionModel(currentModel);
+ setShowUploadImage(show);
+ if (!show) {
+ props.setAttachImages([]);
+ props.setUploading(false);
+ }
+
// if current model is not available
// switch to first available model
const isUnavaliableModel = !models.some((m) => m.name === currentModel);
if (isUnavaliableModel && models.length > 0) {
- const nextModel = models[0].name as ModelType;
+ // show next model to default model if exist
+ let nextModel: ModelType = (
+ models.find((model) => model.isDefault) || models[0]
+ ).name;
chatStore.updateCurrentSession(
(session) => (session.mask.modelConfig.model = nextModel),
);
@@ -475,6 +513,13 @@ export function ChatActions(props: {
/>
)}
+ {showUploadImage && (
+ void }) {
);
}
+export function DeleteImageButton(props: { deleteImage: () => void }) {
+ return (
+ (null);
+ const isScrolledToBottom = scrollRef?.current
+ ? Math.abs(
+ scrollRef.current.scrollHeight -
+ (scrollRef.current.scrollTop + scrollRef.current.clientHeight),
+ ) <= 1
+ : false;
+ const { setAutoScroll, scrollDomToBottom } = useScrollToBottom(
+ scrollRef,
+ isScrolledToBottom,
+ );
const [hitBottom, setHitBottom] = useState(true);
const isMobileScreen = useMobileScreen();
const navigate = useNavigate();
+ const [attachImages, setAttachImages] = useState([]);
+ const [uploading, setUploading] = useState(false);
// prompt hints
const promptStore = usePromptStore();
@@ -705,7 +770,10 @@ function _Chat() {
return;
}
setIsLoading(true);
- chatStore.onUserInput(userInput).then(() => setIsLoading(false));
+ chatStore
+ .onUserInput(userInput, attachImages)
+ .then(() => setIsLoading(false));
+ setAttachImages([]);
localStorage.setItem(LAST_INPUT_KEY, userInput);
setUserInput("");
setPromptHints([]);
@@ -783,9 +851,9 @@ function _Chat() {
};
const onRightClick = (e: any, message: ChatMessage) => {
// copy to clipboard
- if (selectOrCopy(e.currentTarget, message.content)) {
+ if (selectOrCopy(e.currentTarget, getMessageTextContent(message))) {
if (userInput.length === 0) {
- setUserInput(message.content);
+ setUserInput(getMessageTextContent(message));
}
e.preventDefault();
@@ -853,7 +921,9 @@ function _Chat() {
// resend the message
setIsLoading(true);
- chatStore.onUserInput(userMessage.content).then(() => setIsLoading(false));
+ const textContent = getMessageTextContent(userMessage);
+ const images = getMessageImages(userMessage);
+ chatStore.onUserInput(textContent, images).then(() => setIsLoading(false));
inputRef.current?.focus();
};
@@ -962,7 +1032,6 @@ function _Chat() {
setHitBottom(isHitBottom);
setAutoScroll(isHitBottom);
};
-
function scrollToBottom() {
setMsgRenderIndex(renderMessages.length - CHAT_PAGE_SIZE);
scrollDomToBottom();
@@ -1020,6 +1089,7 @@ function _Chat() {
if (payload.url) {
accessStore.update((access) => (access.openaiUrl = payload.url!));
}
+ accessStore.update((access) => (access.useCustomConfig = true));
});
}
} catch {
@@ -1048,6 +1118,94 @@ function _Chat() {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
+ const handlePaste = useCallback(
+ async (event: React.ClipboardEvent) => {
+ const currentModel = chatStore.currentSession().mask.modelConfig.model;
+ if (!isVisionModel(currentModel)) {
+ return;
+ }
+ const items = (event.clipboardData || window.clipboardData).items;
+ for (const item of items) {
+ if (item.kind === "file" && item.type.startsWith("image/")) {
+ event.preventDefault();
+ const file = item.getAsFile();
+ if (file) {
+ const images: string[] = [];
+ images.push(...attachImages);
+ images.push(
+ ...(await new Promise((res, rej) => {
+ setUploading(true);
+ const imagesData: string[] = [];
+ compressImage(file, 256 * 1024)
+ .then((dataUrl) => {
+ imagesData.push(dataUrl);
+ setUploading(false);
+ res(imagesData);
+ })
+ .catch((e) => {
+ setUploading(false);
+ rej(e);
+ });
+ })),
+ );
+ const imagesLength = images.length;
+
+ if (imagesLength > 3) {
+ images.splice(3, imagesLength - 3);
+ }
+ setAttachImages(images);
+ }
+ }
+ }
+ },
+ [attachImages, chatStore],
+ );
+
+ async function uploadImage() {
+ const images: string[] = [];
+ images.push(...attachImages);
+
+ images.push(
+ ...(await new Promise((res, rej) => {
+ const fileInput = document.createElement("input");
+ fileInput.type = "file";
+ fileInput.accept =
+ "image/png, image/jpeg, image/webp, image/heic, image/heif";
+ fileInput.multiple = true;
+ fileInput.onchange = (event: any) => {
+ setUploading(true);
+ const files = event.target.files;
+ const imagesData: string[] = [];
+ for (let i = 0; i < files.length; i++) {
+ const file = event.target.files[i];
+ compressImage(file, 256 * 1024)
+ .then((dataUrl) => {
+ imagesData.push(dataUrl);
+ if (
+ imagesData.length === 3 ||
+ imagesData.length === files.length
+ ) {
+ setUploading(false);
+ res(imagesData);
+ }
+ })
+ .catch((e) => {
+ setUploading(false);
+ rej(e);
+ });
+ }
+ };
+ fileInput.click();
+ })),
+ );
+
+ const imagesLength = images.length;
+ if (imagesLength > 3) {
+ images.splice(3, imagesLength - 3);
+ }
+ setAttachImages(images);
+ }
+
return (
@@ -301,10 +309,19 @@ export function PreviewActions(props: {
}) {
const [loading, setLoading] = useState(false);
const [shouldExport, setShouldExport] = useState(false);
-
+ const config = useAppConfig();
const onRenderMsgs = (msgs: ChatMessage[]) => {
setShouldExport(false);
+ var api: ClientApi;
+ if (config.modelConfig.model.startsWith("gemini")) {
+ api = new ClientApi(ModelProvider.GeminiPro);
+ } else if (identifyDefaultClaudeModel(config.modelConfig.model)) {
+ api = new ClientApi(ModelProvider.Claude);
+ } else {
+ api = new ClientApi(ModelProvider.GPT);
+ }
+
api
.share(msgs)
.then((res) => {
@@ -530,7 +547,7 @@ export function ImagePreviewer(props: {
+
+ );
+}
+
function _Chat() {
type RenderMessage = ChatMessage & { preview?: boolean };
@@ -624,10 +677,22 @@ function _Chat() {
const [userInput, setUserInput] = useState("");
const [isLoading, setIsLoading] = useState(false);
const { submitKey, shouldSubmit } = useSubmitHandler();
- const { scrollRef, setAutoScroll, scrollDomToBottom } = useScrollToBottom();
+ const scrollRef = useRef
@@ -1154,15 +1312,29 @@ function _Chat() {
onClick={async () => {
const newMessage = await showPrompt(
Locale.Chat.Actions.Edit,
- message.content,
+ getMessageTextContent(message),
10,
);
+ let newContent: string | MultimodalContent[] =
+ newMessage;
+ const images = getMessageImages(message);
+ if (images.length > 0) {
+ newContent = [{ type: "text", text: newMessage }];
+ for (let i = 0; i < images.length; i++) {
+ newContent.push({
+ type: "image_url",
+ image_url: {
+ url: images[i],
+ },
+ });
+ }
+ }
chatStore.updateCurrentSession((session) => {
const m = session.mask.context
.concat(session.messages)
.find((m) => m.id === message.id);
if (m) {
- m.content = newMessage;
+ m.content = newContent;
}
});
}}
@@ -1217,7 +1389,11 @@ function _Chat() {
onRightClick(e, message)}
onDoubleClickCapture={() => {
if (!isMobileScreen) return;
- setUserInput(message.content);
+ setUserInput(getMessageTextContent(message));
}}
fontSize={fontSize}
parentRef={scrollRef}
defaultShow={i >= messages.length - 6}
/>
+ {getMessageImages(message).length == 1 && (
+ [0]})
+ )}
+ {getMessageImages(message).length > 1 && (
+
(await import("./markdown")).Markdown, {
loading: () =>
))}
+ {getMessageImages(message).map((image, index) => {
+ return (
+ 
+ );
+ })}
+
+ )}
@@ -1266,9 +1472,13 @@ function _Chat() {
setShowPromptModal(true)}
scrollToBottom={scrollToBottom}
hitBottom={hitBottom}
+ uploading={uploading}
showPromptHints={() => {
// Click again to close
if (promptHints.length > 0) {
@@ -1281,8 +1491,16 @@ function _Chat() {
onSearch("");
}}
/>
-
{showExport && (
diff --git a/app/components/emoji.tsx b/app/components/emoji.tsx
index 616e80ed3..3b1f5e751 100644
--- a/app/components/emoji.tsx
+++ b/app/components/emoji.tsx
@@ -10,7 +10,10 @@ import BotIcon from "../icons/bot.svg";
import BlackBotIcon from "../icons/black-bot.svg";
export function getEmojiUrl(unified: string, style: EmojiStyle) {
- return `https://cdn.staticfile.org/emoji-datasource-apple/15.0.1/img/${style}/64/${unified}.png`;
+ // Whoever owns this Content Delivery Network (CDN), I am using your CDN to serve emojis
+ // Old CDN broken, so I had to switch to this one
+ // Author: https://github.com/H0llyW00dzZ
+ return `https://fastly.jsdelivr.net/npm/emoji-datasource-apple/img/${style}/64/${unified}.png`;
}
export function AvatarPicker(props: {
@@ -18,6 +21,7 @@ export function AvatarPicker(props: {
}) {
return (
+
+
-
[0]})
+ )}
+ {getMessageImages(m).length > 1 && (
+
);
@@ -594,8 +638,10 @@ export function MarkdownPreviewer(props: {
props.messages
.map((m) => {
return m.role === "user"
- ? `## ${Locale.Export.MessageFromYou}:\n${m.content}`
- : `## ${Locale.Export.MessageFromChatGPT}:\n${m.content.trim()}`;
+ ? `## ${Locale.Export.MessageFromYou}:\n${getMessageTextContent(m)}`
+ : `## ${Locale.Export.MessageFromChatGPT}:\n${getMessageTextContent(
+ m,
+ ).trim()}`;
})
.join("\n\n");
diff --git a/app/components/home.tsx b/app/components/home.tsx
index 811cbdf51..ffac64fda 100644
--- a/app/components/home.tsx
+++ b/app/components/home.tsx
@@ -12,7 +12,7 @@ import LoadingIcon from "../icons/three-dots.svg";
import { getCSSVar, useMobileScreen } from "../utils";
import dynamic from "next/dynamic";
-import { Path, SlotID } from "../constant";
+import { ModelProvider, Path, SlotID } from "../constant";
import { ErrorBoundary } from "./error";
import { getISOLang, getLang } from "../locales";
@@ -27,8 +27,9 @@ import { SideBar } from "./sidebar";
import { useAppConfig } from "../store/config";
import { AuthPage } from "./auth";
import { getClientConfig } from "../config/client";
-import { api } from "../client/api";
+import { ClientApi } from "../client/api";
import { useAccessStore } from "../store";
+import { identifyDefaultClaudeModel } from "../utils/checkers";
export function Loading(props: { noLogo?: boolean }) {
return (
@@ -128,7 +129,8 @@ function Screen() {
const isHome = location.pathname === Path.Home;
const isAuth = location.pathname === Path.Auth;
const isMobileScreen = useMobileScreen();
- const shouldTightBorder = getClientConfig()?.isApp || (config.tightBorder && !isMobileScreen);
+ const shouldTightBorder =
+ getClientConfig()?.isApp || (config.tightBorder && !isMobileScreen);
useEffect(() => {
loadAsyncGoogleFont();
@@ -169,6 +171,14 @@ function Screen() {
export function useLoadData() {
const config = useAppConfig();
+ var api: ClientApi;
+ if (config.modelConfig.model.startsWith("gemini")) {
+ api = new ClientApi(ModelProvider.GeminiPro);
+ } else if (identifyDefaultClaudeModel(config.modelConfig.model)) {
+ api = new ClientApi(ModelProvider.Claude);
+ } else {
+ api = new ClientApi(ModelProvider.GPT);
+ }
useEffect(() => {
(async () => {
const models = await api.llm.models();
diff --git a/app/components/markdown.tsx b/app/components/markdown.tsx
index f3a916cc5..1afd7de3b 100644
--- a/app/components/markdown.tsx
+++ b/app/components/markdown.tsx
@@ -116,11 +116,28 @@ function escapeDollarNumber(text: string) {
return escapedText;
}
-function _MarkDownContent(props: { content: string }) {
- const escapedContent = useMemo(
- () => escapeDollarNumber(props.content),
- [props.content],
+function escapeBrackets(text: string) {
+ const pattern =
+ /(```[\s\S]*?```|`.*?`)|\\\[([\s\S]*?[^\\])\\\]|\\\((.*?)\\\)/g;
+ return text.replace(
+ pattern,
+ (match, codeBlock, squareBracket, roundBracket) => {
+ if (codeBlock) {
+ return codeBlock;
+ } else if (squareBracket) {
+ return `$$${squareBracket}$$`;
+ } else if (roundBracket) {
+ return `$${roundBracket}$`;
+ }
+ return match;
+ },
);
+}
+
+function _MarkDownContent(props: { content: string }) {
+ const escapedContent = useMemo(() => {
+ return escapeBrackets(escapeDollarNumber(props.content));
+ }, [props.content]);
return (
ChatGPT Next Web
+ NextChat
github.com/Yidadaa/ChatGPT-Next-Web
@@ -572,10 +589,37 @@ export function ImagePreviewer(props: {
+ {getMessageImages(m).map((src, i) => (
+ 
+ ))}
+
+ )}
- {m.content}
+ {getMessageTextContent(m)}