sion/chat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化

Browse Source
This commit is contained in:
sion
2026-04-25 16:36:34 +08:00
commit db90e7579b
1876 changed files with 189777 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
website/docs/plugins/guide/_category_.json Normal file
View File

@@ -0,0 +1,4 @@
{
"label": "Guide",
"position": 5
}

213
website/docs/plugins/guide/create-theme.md Normal file
View File

@@ -0,0 +1,213 @@
---
sidebar_position: 2
title: Create Theme Plugin
---
It is very convenient to develop plugin in `Tailchat`. We start from developing a theme plugin
## Final Effect
![](/img/tutorial/plugin/2.png)
![](/img/tutorial/plugin/3.png)
![](/img/tutorial/plugin/4.png)
## Create Plugin
> If it is the first development, it is necessary to ensure that the plugin development environment has been initialized. [Learn more](./init-env.md)
```bash
tailchat create --template client-plugin
```
Since the theme style is a pure front-end implementation, we choose the `client-plugin` template
Complete creation via interactive command line prompts
![](/img/tutorial/plugin/5.png)
At this point the directory structure should look like this:
```
.
├── package-lock.json
├── package.json
├── node_modules
└── plugins
└── com.test.hutao
├── manifest.json
├── package.json
├── src
│   ├── index.tsx
│   └── translate.ts
├── tsconfig.json
└── types
└── tailchat.d.ts
```
At this time we can start to compile the plugin immediately
```bash
npm run plugins:all
```
The compiled product will appear in `/dist/plugins/com.test.hutao`. By modifying the configuration of the `mini-star", it can allow it to output in other directory *(this will be used in the service side development plugin)*.
## Install plugin in Tailchat
For the frontend plugin, we need to provide the product with an HTTP static service, such as in local development, we can do this:
```bash
npx http-server .
```
![](/img/tutorial/plugin/6.png)
At this time we can access the results of our compilation through the address, such as [http://127.0.0.1:8080/dist/plugins/com.test.hutao/index.js](http://127.0.0.1:8080/dist/plugins/com.test.hutao/index.js)
A manual installation plugin is provided in Tailchat. We can install the plugin by manual install.
Copy the contents of `plugins/com.test.hutao/manifest.json` in the plugin directory, paste to the manual install plugin part.
Modify the URL as the real address that can be accessed. After clicking the Submit button, the installation command is automatically executed:
![](/img/tutorial/plugin/7.png)
If the installation is prompted successfully, you can see the corresponding output when opening the console:
![](/img/tutorial/plugin/8.png)
Here is the logic generated by the default in the plugin. The prompts that the plugin after the plugin is loaded, means that our plugin has been successfully installed.
## Write style files and apply
Because we need to modify the theme style, we involve the processing of style files and static resources. Next, let's create the style of our theme first
Write in `plugins/com.test.hutao/src/theme.less`:
```less
#tailchat-app.theme-genshin-hutao {
@primary-color: #dd5545;
--tc-primary-color: @primary-color;
--tc-background-image: url(./bg.jpg);
--tc-content-background-image: url(./avatar.png);
--tc-content-background-image-opacity: 0.15;
.bg-navbar-light {
background-color: @primary-color;
.bg-gray-400 {
background-color: darken(@primary-color, 10%);
}
}
.bg-sidebar-light {
background-color: lighten(@primary-color, 20%);
}
.bg-content-light {
background-color: lighten(@primary-color, 40%);
}
&.dark {
--tc-primary-color: darken(@primary-color, 10%);
.dark\:bg-navbar-dark {
background-color: darken(@primary-color, 40%);
}
.dark\:bg-sidebar-dark {
background-color: darken(@primary-color, 20%);
}
.dark\:bg-content-dark {
background-color: @primary-color;
}
}
}
```
This style file has done three things:
- In the method of specifying the main color by the method of the `less variable`, which greatly reduces the redundant code
- In the background map of the `Tailchat` by `css variable`, mainly the background map and avatar of the login page
- Stop at the root node `#tailchat-app.theme-genshin-hutao` selector to ensure that it will not pollute the global style.
**Correspondingly, you need to put the `bg.jpg` and` avatar.png` as a static resource at the root node**
In order for `Tailchat` to know that there is such a topic, we need to register the information related to this topic into Tailchat.
```js
// plugins/com.test.hutao/src/index.tsx
import { regPluginColorScheme, sharedEvent } from '@capital/common';
regPluginColorScheme({
label: '原神-胡桃测试主题',
name: 'light+genshin-hutao',
});
sharedEvent.on('loadColorScheme', (colorSchemeName) => {
if (colorSchemeName === 'light+genshin-hutao') {
console.log('正在加载胡桃主题...');
import('./theme.less');
}
});
```
This plugin does two things:
- Call `regPluginColorScheme` to register the theme life into `Tailchat`, so that `Tailchat` will display the theme in the system settings.
- It should be noted that the `name` of the theme is composed of `<color>+<theme-name>`, the default Tailchat will provide `auto`/`light`/`dark` three color schemes, here it means to add a style override based on the bright color mode.
- Listen to the theme loading event through `sharedEvent`, if the color theme is our theme, then load the theme asynchronously (the purpose of asynchronous loading is to reduce meaningless network requests)
At this time, our compilation cannot pass, because the file of less type has not been processed yet
`mini-star` has already processed the less file by default, we only need to install the `less` package, and `mini-star` will automatically call the installed less to compile.
```bash
npm install less
```
At this time, execute `npm run plugins:all` to compile, and the final directory should be as follows:
```
.
├── dist
│   └── plugins
│   └── com.test.hutao
│   ├── index.js
│   ├── index.js.map
│   ├── theme-475203da.js
│   └── theme-475203da.js.map
├── package-lock.json
├── package.json
└── plugins
└── com.test.hutao
├── manifest.json
├── package.json
├── src
│   ├── avatar.png
│   ├── bg.jpg
│   ├── index.tsx
│   ├── theme.less
│   └── translate.ts
├── tsconfig.json
└── types
└── tailchat.d.ts
```
For ease of management, `mini-star` will directly package images in the format of `base64` into the style file when processing the static resources referenced by less. Therefore, the theme file will be very large, which is why we need to load it asynchronously on demand.
![](/img/tutorial/plugin/9.png)
Because we have installed the plugin we are developing in Tailchat before, so just refresh it directly.
Click on the theme page of system settings in the setting menu in the lower left corner, and we can see our theme. Switch to the past and immediately the interface will become the theme style we want.
![](/img/tutorial/plugin/10.png)
## Reference
The official implementation of this theme can be accessed at [https://github.com/msgbyte/tailchat/tree/master/client/web/plugins/com.msgbyte.theme.genshin](https://github.com/msgbyte/tailchat/tree/master/client/web/plugins/com.msgbyte.theme.genshin) View

54
website/docs/plugins/guide/deploy.md Normal file
View File

@@ -0,0 +1,54 @@
---
sidebar_position: 90
title: Deploy Plugin
---
:::info
The deployment strategy of the plugin will be optimized in the future. At present, tailchat is not convenient enough to customize the plugin during deployment, so it may be a little confusing. Therefore, this document only represents the status quo and will be continuously improved in the future
:::
First, let’s talk about the classification of Tailchat plugins. Tailchat plugins are divided into `pure frontend plugins`, `pure backend plugins`, `frontend plugins`
`Pure frontend plugin` is the easiest to understand, which means that the plugin only runs in the frontend code, relies on the existing context for communication, and does not need Tailchat backend support. (In particular, frontend plugins that communicate with custom backends, such as the `com.msgbyte.ai-assistant` plugin)
`Pure backend plugin is` a plugin that communicates with the Tailchat network, without a frontend interface, and calls actions of other services through rpc to achieve some purposes. For the backend plugin, it means that the plugin itself is connected to the Tailchat backend network, has the highest authority, and can access some actions whose visibility is `public` (by default, only actions at the `publish` level can be accessed externally, others level are only accessible to internal services), a frontend-free backend plugin such as `com.msgbyte.simplenotify` plugin
`Frontend plugin` means a plugin with both frontend and backend. It is the most complex but most capable plugin type. It interacts with the backend through the frontend plugin and interacts with other services through the backend plugin without modifying the core code. Can complete most of the development work under the premise of
You can check the corresponding plugin example in this document: [plugin list](/docs/plugin-list/fe)
## Deployment process
The process of deploying different plugins is different
### Pure frontend plugin
For pure frontend plugins, you can place the code in the `client/web/plugins` directory inside the project or use a separate static file service management. Make sure that the js documents of the project can be accessed normally.
If this is a plugin for personal use, you can install it through the manual installation of the plugin center, and enter the json configuration of `manifest.json`. Pay attention to ensure that the addresses in the configuration file can be accessed normally.
If you want all users to see the code, you need to add your own plugin configuration in `client/web/registry.json`.
If you want to be a built-in plugin installed by default, you need to modify the `client/web/src/plugin/builtin.ts` file to let the frontend code load the plugin at startup.
### Pure backend plugin
In order for the plugin to be loaded automatically, you can place the code in the `server/plugins` directory or deploy it independently, just make sure you can connect to the same network (share the same TRANSPORTER)
The plugin service deployed by default will uniformly load all backend plugins in this directory. Need to ensure that the name of the plugin service is `*.service.ts`/`*.service.js`
*If you only want to run in the development environment and ignore it in the production environment, please name the file `*.service.dev.ts`*
You can access the backend `/health` (such as: `http://localhost:11000/health`) route or use the `tailchat connect` tool to view the list of loaded microservices
### Frontend and backend plugins
The deployment of the frontend and backend plugins is similar to that of the backend, but the compilation command needs to be modified so that the frontend code of the frontend and backend plugins can be deployed to the `public/plugins` directory when building
The specific method is: modify `package.json`, add the name of the plugin you want to compile in the `build:server` command
> {BACKEND} in the configuration file refers to the backend address, because the backend address is not necessarily consistent with the frontend address due to the separation of the front and back ends
--------
Remember to rebuild the docker image after all operations are done

62
website/docs/plugins/guide/init-env.md Normal file
View File

@@ -0,0 +1,62 @@
---
sidebar_position: 1
title: Init Plugin Develop Env
---
Before developing a plugin, we need to create a plugin development environment. This environment can directly reuse the plugin environment of Tailchat official source code ([https://github.com/msgbyte/tailchat/tree/master/client/web/plugins](https://github.com/msgbyte/tailchat/tree/master/client/web/plugins)), It can also be an independent project
Here we mainly teach you how to create an independent plugin development environment
## frontend plugin development environment
It is very simple to create a plugin. Before that, if we did not initialize the plugin environment, we need to initialize the development environment first
Let's just find a place to build a project folder:
```bash
mkdir tailchat-plugin-test && cd tailchat-plugin-test
```
Execute in the root directory:
```bash
npm init -y
npm install mini-star
```
Create the configuration file of the `mini-star` in the root directory which named `.ministarrc.js`, the content is as follows:
```js
// .ministarrc.js
const path = require('path');
module.exports = {
externalDeps: [
'react',
'react-router',
'axios',
'styled-components',
'zustand',
'zustand/middleware/immer',
],
};
```
Write a compilation script in `package.json`
```json
{
//...
"scripts": {
// ...
"plugins:all": "ministar buildPlugin all",
"plugins:watch": "ministar watchPlugin all",
// ...
}
//...
}
```
## backend plugin development environment
TODO

51
website/docs/plugins/guide/typescript-support.md Normal file
View File

@@ -0,0 +1,51 @@
---
sidebar_position: 2
title: Typescript Support
---
In `Tailchat`, there are some utility functions or components shared from the core project, which you can import via `@capital/common` or `@capital/component`.
Of course, there are some type issues if quoted directly. Because at this time, the type system of typescript does not know what can be introduced and what types there are.
There may be two situations here:
## Develop in the Tailchat ontology project
You can import files in the same directory through the `paths` field of `tsconfig.json`, so that typescript can directly load the complete type system when parsing
for example:
```json
{
"compilerOptions": {
"baseUrl": "./src",
"esModuleInterop": true,
"jsx": "react",
"paths": {
"@capital/*": ["../../../src/plugin/*"],
}
}
}
```
## Develop in a standalone project
You can develop by getting Tailchat's pre-generated declaration files.
> Because the type needs to be manually rewritten then some types are still any. But it can guarantee that developers will not introduce functions that do not exist
If you are using the `tailchat create` command to create the project, the command line tool template has added the following commands for you
```json
"scripts": {
"sync:declaration": "tailchat declaration github"
},
```
usage
```bash
pnpm sync: declaration
```
This command will automatically pull the remote configuration file and write it into the `types/tailchat.d.ts` file in the current directory. If you manually created the project, you can add it to your `package.json` for subsequent use