@sciol/xyzen 0.3.12 → 0.3.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -66,7 +66,7 @@ The Xyzen component requires a running backend service to handle chat logic and
66
66
  ```tsx
67
67
  // src/App.tsx
68
68
  import { Xyzen, useXyzen } from "@sciol/xyzen";
69
- import "@sciol/xyzen/dist/style.css"; // Import the CSS
69
+ import "@sciol/xyzen/style.css"; // 重要:导入样式文件
70
70
 
71
71
  function App() {
72
72
  const { openXyzen } = useXyzen();
@@ -86,9 +86,24 @@ The Xyzen component requires a running backend service to handle chat logic and
86
86
  export default App;
87
87
  ```
88
88
 
89
- **Note:** The `backendUrl` should point to the base URL of your Xyzen backend deployment. The component will automatically handle endpoints like `/xyzen/api`, `/xyzen/ws`, and `/xyzen/mcp`.
89
+ **重要提示:**
90
+ - 必须导入 `@sciol/xyzen/style.css` 样式文件,它包含所有必需的 CSS 变量、主题配置和 Markdown 样式
91
+ - `backendUrl` 应指向您部署的 Xyzen 后端基础 URL,组件会自动处理 `/xyzen/api`、`/xyzen/ws` 和 `/xyzen/mcp` 等端点
90
92
 
91
- 3. Control the Xyzen panel from any component:
93
+ 3. (可选)如果您使用 Tailwind CSS v4,可以在您的项目中创建一个自定义主题配置来覆盖默认样式:
94
+
95
+ ```css
96
+ /* your-app.css */
97
+ @import "@sciol/xyzen/style.css";
98
+
99
+ /* 自定义主题变量 */
100
+ :root {
101
+ --primary: oklch(0.5 0.2 250); /* 自定义主色 */
102
+ --radius: 0.5rem; /* 自定义圆角 */
103
+ }
104
+ ```
105
+
106
+ 4. Control the Xyzen panel from any component:
92
107
 
93
108
  Use the `useXyzen` hook to control the sidebar's visibility:
94
109