diff --git a/.cspell.json b/.cspell.json
index 71fe513..4c3ba20 100644
--- a/.cspell.json
+++ b/.cspell.json
@@ -6,6 +6,7 @@
"devui",
"gitcode",
"jbolda",
+ "languagedetector",
"matechat",
"nanoevents",
"rolldown",
diff --git a/biome.json b/biome.json
index 08231df..862567e 100644
--- a/biome.json
+++ b/biome.json
@@ -1,5 +1,5 @@
{
- "$schema": "https://biomejs.dev/schemas/2.1.3/schema.json",
+ "$schema": "https://biomejs.dev/schemas/2.2.4/schema.json",
"vcs": {
"enabled": true,
"clientKind": "git",
@@ -23,6 +23,11 @@
"quoteStyle": "double"
}
},
+ "css": {
+ "linter": {
+ "enabled": false
+ }
+ },
"assist": {
"enabled": true,
"actions": {
diff --git a/package.json b/package.json
index 0e6f540..ca9fa35 100644
--- a/package.json
+++ b/package.json
@@ -52,38 +52,38 @@
"react-syntax-highlighter": "^15.5.13"
},
"dependencies": {
- "@tailwindcss/vite": "^4.1.11",
+ "@tailwindcss/vite": "^4.1.14",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"nanoevents": "^9.1.0",
- "openai": "^5.11.0",
+ "openai": "^5.23.2",
"react-markdown": "^10.1.0",
- "react-syntax-highlighter": "^15.6.1",
+ "react-syntax-highlighter": "^15.6.6",
"remark-gfm": "^4.0.1",
"remark-math": "^6.0.0",
"tailwind-merge": "^3.3.1"
},
"devDependencies": {
- "@biomejs/biome": "^2.1.3",
- "@testing-library/jest-dom": "^6.6.4",
+ "@biomejs/biome": "^2.2.4",
+ "@testing-library/jest-dom": "^6.9.0",
"@testing-library/react": "^16.3.0",
- "@types/node": "^24.2.0",
- "@types/react": "^19.1.9",
- "@types/react-dom": "^19.1.7",
+ "@types/node": "^24.6.1",
+ "@types/react": "^19.1.17",
+ "@types/react-dom": "^19.1.11",
"@types/react-syntax-highlighter": "^15.5.13",
- "@vitejs/plugin-react-swc": "^3.11.0",
+ "@vitejs/plugin-react": "^5.0.4",
"archons": "^0.2.13",
- "chalk": "^5.5.0",
+ "chalk": "^5.6.2",
"happy-dom": "^18.0.1",
"lucide-react": "^0.536.0",
"react": "^19.1.1",
"react-dom": "^19.1.1",
"shadcn": "2.9.3-canary.0",
- "tailwindcss": "^4.1.11",
- "tsdown": "^0.13.3",
- "tsx": "^4.20.3",
- "typescript": "^5.9.2",
- "vite": "npm:rolldown-vite@^7.0.12",
+ "tailwindcss": "^4.1.14",
+ "tsdown": "^0.13.5",
+ "tsx": "^4.20.6",
+ "typescript": "^5.9.3",
+ "vite": "npm:rolldown-vite@^7.1.14",
"vite-plugin-dts": "^4.5.4",
"vite-plugin-lib-inject-css": "^2.2.2",
"vitest": "^3.2.4"
diff --git a/playground/.gitignore b/playground/.gitignore
new file mode 100644
index 0000000..a91d971
--- /dev/null
+++ b/playground/.gitignore
@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Trae
+.marscode
diff --git a/playground/README.md b/playground/README.md
new file mode 100644
index 0000000..7959ce4
--- /dev/null
+++ b/playground/README.md
@@ -0,0 +1,69 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default tseslint.config([
+ globalIgnores(['dist']),
+ {
+ files: ['**/*.{ts,tsx}'],
+ extends: [
+ // Other configs...
+
+ // Remove tseslint.configs.recommended and replace with this
+ ...tseslint.configs.recommendedTypeChecked,
+ // Alternatively, use this for stricter rules
+ ...tseslint.configs.strictTypeChecked,
+ // Optionally, add this for stylistic rules
+ ...tseslint.configs.stylisticTypeChecked,
+
+ // Other configs...
+ ],
+ languageOptions: {
+ parserOptions: {
+ project: ['./tsconfig.node.json', './tsconfig.app.json'],
+ tsconfigRootDir: import.meta.dirname,
+ },
+ // other options...
+ },
+ },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default tseslint.config([
+ globalIgnores(['dist']),
+ {
+ files: ['**/*.{ts,tsx}'],
+ extends: [
+ // Other configs...
+ // Enable lint rules for React
+ reactX.configs['recommended-typescript'],
+ // Enable lint rules for React DOM
+ reactDom.configs.recommended,
+ ],
+ languageOptions: {
+ parserOptions: {
+ project: ['./tsconfig.node.json', './tsconfig.app.json'],
+ tsconfigRootDir: import.meta.dirname,
+ },
+ // other options...
+ },
+ },
+])
+```
diff --git a/playground/index.html b/playground/index.html
index bdae8a8..e0bbe4d 100644
--- a/playground/index.html
+++ b/playground/index.html
@@ -2,11 +2,12 @@
+
MateChat React Playground
-
-
+
+
diff --git a/playground/package.json b/playground/package.json
index c3f76aa..f97f32e 100644
--- a/playground/package.json
+++ b/playground/package.json
@@ -5,24 +5,32 @@
"type": "module",
"license": "MIT",
"author": {
- "email": "fu050409@163.com",
- "name": "苏向夜"
+ "email": "xu060805@gmail.com",
+ "name": "星弦语"
},
"scripts": {
- "build": "vite build",
- "dev": "vite"
+ "dev": "vite",
+ "build": "tsc -b && vite build",
+ "lint": "biome check",
+ "preview": "vite preview"
},
"dependencies": {
- "clsx": "^2.1.1"
+ "@tailwindcss/vite": "^4.1.14",
+ "clsx": "^2.1.1",
+ "i18next": "^25.5.3",
+ "i18next-browser-languagedetector": "^8.2.0",
+ "react-i18next": "^15.7.4",
+ "tailwindcss": "^4.1.14"
},
"devDependencies": {
- "@tailwindcss/vite": "^4.1.11",
- "@types/react": "^19.1.8",
- "@types/react-dom": "^19.1.6",
- "@vitejs/plugin-react-swc": "^3.10.2",
- "react": "^19.1.0",
- "react-dom": "^19.1.0",
- "tailwindcss": "^4.1.11",
- "vite": "npm:rolldown-vite@^6.3.21"
+ "@biomejs/biome": "^2.2.4",
+ "@types/react": "^19.1.17",
+ "@types/react-dom": "^19.1.11",
+ "@vitejs/plugin-react": "^5.0.4",
+ "@vitejs/plugin-react-swc": "^4.1.0",
+ "react": "^19.1.1",
+ "react-dom": "^19.1.1",
+ "typescript": "~5.8.3",
+ "vite": "npm:rolldown-vite@^7.1.14"
}
}
diff --git a/playground/public/logo.svg b/playground/public/logo.svg
new file mode 100644
index 0000000..4712bd3
--- /dev/null
+++ b/playground/public/logo.svg
@@ -0,0 +1,44 @@
+
diff --git a/playground/src/Activate.tsx b/playground/src/Activate.tsx
deleted file mode 100644
index da58b48..0000000
--- a/playground/src/Activate.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { Button } from "@matechat/react/button";
-import { createOpenAIBackend } from "@matechat/react/utils/backend";
-import { agent } from "@matechat/react/utils/core";
-import { useState } from "react";
-
-export function Activate({ onActivate }: { onActivate: () => void }) {
- const [token, setToken] = useState("");
-
- const activateChat = () => {
- agent.use(
- createOpenAIBackend({
- apiKey: token,
- baseURL: "https://api.deepseek.com",
- model: "deepseek-chat",
- maxTokens: 200,
- dangerouslyAllowBrowser: true,
- }),
- );
- localStorage.setItem("deepseek-token", token);
- onActivate();
- };
-
- return (
-
-
Activate Chat
- setToken(e.target.value)}
- placeholder="Enter your DeepSeek API Token"
- className="border border-gray-300 p-2 rounded mb-4 w-80"
- />
-
-
- );
-}
diff --git a/playground/src/App.tsx b/playground/src/App.tsx
index baafb1a..d15a5aa 100644
--- a/playground/src/App.tsx
+++ b/playground/src/App.tsx
@@ -1,17 +1,82 @@
-import { StrictMode, useState } from "react";
-import { Activate } from "./Activate";
-import { Chat } from "./Chat";
+import "./tailwind.css";
-export function App() {
- const [activated, setActivated] = useState(false);
+import { createOpenAIBackend } from "@matechat/react/utils/backend";
+import { agent } from "@matechat/react/utils/core";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import chatIcon from "./assets/chat.svg";
+import mcLogo from "./assets/logo.svg";
+import Communicate from "./communicate";
+import History from "./history";
+import Language from "./language";
+import Settings from "./settings";
+import ThemeToggle from "./theme";
+
+function App() {
+ const { t } = useTranslation();
+
+ agent.use(
+ createOpenAIBackend({
+ apiKey: "token",
+ baseURL: "https://api.deepseek.com",
+ model: "deepseek-chat",
+ maxTokens: 200,
+ dangerouslyAllowBrowser: true,
+ }),
+ );
return (
-
- {activated ? (
-
- ) : (
- setActivated(true)} />
+
+ >
+
+
+
+
+
+
MateChat
+
+
+
+
+
{t("chat")}
+
+
+
+
+
+
+
+
+
+
+
-
-
- {messages.length === 0 && (
-
-
- Understanding the Transformer Model
-
- Give a detailed analysis of the Transformer model.
-
-
-
- Understanding the Attention Mechanism
-
- Explain the attention mechanism in neural networks.
-
-
-
- )}
-
-
-
-
+
+
+
+ {messages.length === 0 && (
+
+
+
+
MateChat
+
+
{t("tip")}
+
+ )}
+
+
+
+
+
+ }
+ />
+
+ {t("attention")}
+
+
+ {t("privacy")}
+
+
+
+
{t("history")}
+
+
+
+
+
+
+
+
+
+
+ 设置
+
+
setToken(e.target.value)}
+ placeholder="请输入API"
+ className="focus:outline-none border border-gray-300 w-full p-2 rounded-md"
+ />
+
+
+
+
+
+