@openviking/react 0.0.0-stage → 0.1.0

package/README.md

@@ -1,3 +1,63 @@
-# Temporary Holding Version
+# @openviking/react
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+React UI modules for OpenViking applications. The initial scaffold exports `StatusBadge`; business modules have not been migrated.
+
+This package inherits the repository's AGPL-3.0-only license. The release workflow publishes it to npm when a `react@<version>` tag matches the version in this package's manifest.
+
+## 模块目录
+
+| 源码目录                                                                 | 公开入口                                       | 职责                             |
+| ------------------------------------------------------------------------ | ---------------------------------------------- | -------------------------------- |
+| [components/file-tree](./src/components/file-tree/README.md)             | `@openviking/react/components/file-tree`       | 目录树渲染、展开、选中与事件回传 |
+| [components/file-preview](./src/components/file-preview/README.md)       | `@openviking/react/components/file-preview`    | 只读预览状态与扩展页签           |
+| [components/tui](./src/components/tui/README.md)                         | `@openviking/react/components/tui`             | 命令输入、执行状态与结果展示     |
+| [components/viking-bot](./src/components/viking-bot/README.md)           | `@openviking/react/components/viking-bot`      | 对话、会话、回复及附件交互       |
+| [components/scope-switcher](./src/components/scope-switcher/README.md)   | `@openviking/react/components/scope-switcher`  | 作用域选择与切换交互             |
+| [components/agent-connect](./src/components/agent-connect/README.md)     | `@openviking/react/components/agent-connect`   | Agent 接入步骤、配置说明及状态   |
+| [components/resource-import](./src/components/resource-import/README.md) | `@openviking/react/components/resource-import` | 导入方式、文件选择、进度及结果   |
+| [pages](./src/pages/README.md)                                           | 尚无公开入口                                   | 页面组合、数据获取与处理         |
+| [hooks](./src/hooks/README.md)、[utils](./src/utils/README.md)           | 仅包内使用                                     | 跨模块 Hook 与纯工具             |
+
+七个业务模块均为占位入口，尚无组件或类型可导入；对应 CSS 入口目前为空样式。`StatusBadge` 是唯一已实现的脚手架示例，可从根入口或 `@openviking/react/components/status-badge` 导入。
+组件通过 props 接收视图数据与状态，通过回调表达用户意图，遵循 [组件目录约定](./src/components/AGENTS.md)。[pages](./src/pages/README.md) 负责取数、处理业务状态和编排；尚未定义首个页面。
+
+## 公开入口与样式
+
+- 根入口聚合已实现的公开 API；具体组件使用 `components/<模块>` 子路径。不提供 `@openviking/react/components` 或 `@openviking/react/pages` 分类聚合 JS 入口。包导出显式列举，内部文件不开放。
+- 当前私有开发包的旧 `/tree`、`/preview`、`/console`、`/tui` 和 `/viking-bot` 子路径统一替换为上述分层路径，不保留旧路径别名。
+- JS 入口共享实现，不隐式加载 CSS。整包、组件集合与单模块样式由同一份源码构建，选择所需范围导入即可。
+
+| 范围     | CSS 入口                                        |
+| -------- | ----------------------------------------------- |
+| 整包     | `@openviking/react/style.css`                   |
+| 组件集合 | `@openviking/react/components/style.css`        |
+| 单组件   | `@openviking/react/components/<模块>/style.css` |
+
+单组件 CSS 可独立使用。后续有真实页面时再开放 `@openviking/react/pages/<页面>`、`pages/style.css` 及 `pages/<页面>/style.css`；页面 CSS 包含页面自身与依赖组件所需样式，整包 CSS 同步纳入页面样式。公共 Hook 有真实实现后再开放 `@openviking/react/hooks`；Hook 不提供 CSS。模块私有 Hook 和工具不进入公共导出。
+
+经验看板属于预览扩展；任务进度先归所属模块；API Key 展示控件按需复用，凭证创建及管理由宿主负责。本次不新增这些独立模块。
+
+## 使用示例
+
+```tsx
+import { StatusBadge } from '@openviking/react';
+import '@openviking/react/style.css';
+
+export default function Example() {
+  return <StatusBadge status="ready">Connected</StatusBadge>;
+}
+```
+
+### 图标
+
+```tsx
+import { PdfIcon } from '@openviking/react/icons';
+
+<PdfIcon width={20} height={20} className="file-icon" alt="PDF" />;
+```
+
+图标默认以 16 × 16 的图片渲染。装饰性图标可沿用默认空 `alt`，用于传达文件类型时可提供描述。SVG 随构建产物内联，宿主直接消费包导出。
+
+React and ReactDOM are peer dependencies (`^18.2.0 || ^19.0.0`), automatically externalized by Rslib. Rslib emits shared ESM JavaScript and declarations, plus independently built CSS entries. The public `@openviking/react/style.css` entry resolves to `dist/style.css`. Styles are scoped and do not reset application styles.
+
+From `frontend/`, run `npm run build:lib` to generate `packages/react/dist/`. See the [workspace README](../../README.md) for documentation development and deployment.

package/dist/components/agent-connect/agent-connect.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/agent-connect/style.css

@@ -0,0 +1,2 @@
+
+

package/dist/components/file-preview/file-preview.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/file-preview/style.css

@@ -0,0 +1,2 @@
+
+

package/dist/components/file-tree/file-tree.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/file-tree/style.css

@@ -0,0 +1,2 @@
+
+

package/dist/components/resource-import/resource-import.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/resource-import/style.css

@@ -0,0 +1,2 @@
+
+

package/dist/components/scope-switcher/scope-switcher.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/scope-switcher/style.css

@@ -0,0 +1,2 @@
+
+

package/dist/components/status-badge/status-badge.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from 'react';
+export type StatusBadgeStatus = 'ready' | 'processing' | 'error';
+export interface StatusBadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    /** The state to display. Text accompanies the color indicator. */
+    status: StatusBadgeStatus;
+}
+/** Displays a status with a color indicator and an optional custom label. */
+export declare function StatusBadge({ status, children, className, ...props }: StatusBadgeProps): import("react").JSX.Element;

package/dist/components/status-badge/style.css

@@ -0,0 +1,37 @@
+.badge-up7fab {
+  box-sizing: border-box;
+  border-radius: var(--ov-ui-radius, 6px);
+  white-space: nowrap;
+  border: 1px solid;
+  align-items: center;
+  gap: .5em;
+  padding: .3em .7em;
+  font-family: inherit;
+  font-size: .875rem;
+  font-weight: 500;
+  line-height: 1.5;
+  display: inline-flex;
+}
+
+.badge-up7fab[data-status="ready"] {
+  color: var(--ov-ui-status-ready, #187347);
+}
+
+.badge-up7fab[data-status="processing"] {
+  color: var(--ov-ui-status-processing, #2563c5);
+}
+
+.badge-up7fab[data-status="error"] {
+  color: var(--ov-ui-status-error, #c43838);
+}
+
+.indicator-EU2f1X {
+  background: currentColor;
+  border-radius: 50%;
+  flex: none;
+  width: .45em;
+  height: .45em;
+}
+
+
+

package/dist/components/status-badge.js

@@ -0,0 +1,30 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+const status_badge_module = {
+    badge: "badge-up7fab",
+    indicator: "indicator-EU2f1X"
+};
+const labels = {
+    ready: 'Ready',
+    processing: 'Processing',
+    error: 'Error'
+};
+function StatusBadge({ status, children, className, ...props }) {
+    return /*#__PURE__*/ jsxs("span", {
+        ...props,
+        className: [
+            status_badge_module.badge,
+            className
+        ].filter(Boolean).join(' '),
+        "data-status": status,
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                className: status_badge_module.indicator,
+                "aria-hidden": "true"
+            }),
+            /*#__PURE__*/ jsx("span", {
+                children: children ?? labels[status]
+            })
+        ]
+    });
+}
+export { StatusBadge };

package/dist/components/style.css

@@ -0,0 +1,53 @@
+.badge-up7fab {
+  box-sizing: border-box;
+  border-radius: var(--ov-ui-radius, 6px);
+  white-space: nowrap;
+  border: 1px solid;
+  align-items: center;
+  gap: .5em;
+  padding: .3em .7em;
+  font-family: inherit;
+  font-size: .875rem;
+  font-weight: 500;
+  line-height: 1.5;
+  display: inline-flex;
+}
+
+.badge-up7fab[data-status="ready"] {
+  color: var(--ov-ui-status-ready, #187347);
+}
+
+.badge-up7fab[data-status="processing"] {
+  color: var(--ov-ui-status-processing, #2563c5);
+}
+
+.badge-up7fab[data-status="error"] {
+  color: var(--ov-ui-status-error, #c43838);
+}
+
+.indicator-EU2f1X {
+  background: currentColor;
+  border-radius: 50%;
+  flex: none;
+  width: .45em;
+  height: .45em;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

package/dist/components/tui/style.css

@@ -0,0 +1,2 @@
+
+

package/dist/components/tui/tui.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/viking-bot/style.css

@@ -0,0 +1,2 @@
+
+

package/dist/components/viking-bot/viking-bot.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/icons/index.d.ts

@@ -0,0 +1,23 @@
+import type { ComponentPropsWithoutRef } from 'react';
+type IconProps = Omit<ComponentPropsWithoutRef<'img'>, 'src' | 'srcSet'>;
+export declare const AudioIcon: {
+    (props: IconProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const PdfIcon: {
+    (props: IconProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const PptIcon: {
+    (props: IconProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const VideoIcon: {
+    (props: IconProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const WordIcon: {
+    (props: IconProps): import("react").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/icons.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+const audioinline_namespaceObject = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj4KICA8cmVjdCB4PSIzIiB5PSIyIiB3aWR0aD0iMTEiIGhlaWdodD0iMTIiIHJ4PSIyIiBmaWxsPSIjN2MzYWVkIi8+CiAgPGcgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEuMSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICAgIDxwYXRoIGQ9Ik03IDExVjdsNC0xdjRNNyAxMUg2bTUtMWgtMSIvPgogIDwvZz4KPC9zdmc+Cg==";
+const pdfinline_namespaceObject = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj4KICA8cmVjdCB4PSIzIiB5PSIyIiB3aWR0aD0iMTEiIGhlaWdodD0iMTIiIHJ4PSIyIiBmaWxsPSIjYjkxYzFjIi8+CiAgPGcgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEuMSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICAgIDxwYXRoIGQ9Ik02IDExVjZoM3YzSDZtNCAyaDEiLz4KICA8L2c+Cjwvc3ZnPgo=";
+const pptinline_namespaceObject = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj4KICA8cmVjdCB4PSIzIiB5PSIyIiB3aWR0aD0iMTEiIGhlaWdodD0iMTIiIHJ4PSIyIiBmaWxsPSIjYzI0MTBjIi8+CiAgPGcgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEuMSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICAgIDxwYXRoIGQ9Ik02IDdoNXY0SDZ6bTIuNSA0djEiLz4KICA8L2c+Cjwvc3ZnPgo=";
+const videoinline_namespaceObject = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj4KICA8cmVjdCB4PSIzIiB5PSIyIiB3aWR0aD0iMTEiIGhlaWdodD0iMTIiIHJ4PSIyIiBmaWxsPSIjMDM2OWExIi8+CiAgPGcgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEuMSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICAgIDxwYXRoIGQ9Im03IDYgNCAyLjVMNyAxMXoiLz4KICA8L2c+Cjwvc3ZnPgo=";
+const wordinline_namespaceObject = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj4KICA8cmVjdCB4PSIzIiB5PSIyIiB3aWR0aD0iMTEiIGhlaWdodD0iMTIiIHJ4PSIyIiBmaWxsPSIjMWQ0ZWQ4Ii8+CiAgPGcgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEuMSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICAgIDxwYXRoIGQ9Im01LjUgNyAxIDQgMi0zIDIgMyAxLTQiLz4KICA8L2c+Cjwvc3ZnPgo=";
+function createIcon(src, name) {
+    function Icon(props) {
+        return /*#__PURE__*/ jsx("img", {
+            alt: "",
+            width: 16,
+            height: 16,
+            ...props,
+            src: src
+        });
+    }
+    Icon.displayName = name;
+    return Icon;
+}
+const AudioIcon = createIcon(audioinline_namespaceObject, 'AudioIcon');
+const PdfIcon = createIcon(pdfinline_namespaceObject, 'PdfIcon');
+const PptIcon = createIcon(pptinline_namespaceObject, 'PptIcon');
+const VideoIcon = createIcon(videoinline_namespaceObject, 'VideoIcon');
+const WordIcon = createIcon(wordinline_namespaceObject, 'WordIcon');
+export { AudioIcon, PdfIcon, PptIcon, VideoIcon, WordIcon };

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { StatusBadge } from './components/status-badge/status-badge.js';
+export type { StatusBadgeProps, StatusBadgeStatus, } from './components/status-badge/status-badge.js';

package/dist/index.js

@@ -0,0 +1 @@
+export { StatusBadge } from "./components/status-badge.js";

package/dist/style.css

@@ -0,0 +1,55 @@
+.badge-up7fab {
+  box-sizing: border-box;
+  border-radius: var(--ov-ui-radius, 6px);
+  white-space: nowrap;
+  border: 1px solid;
+  align-items: center;
+  gap: .5em;
+  padding: .3em .7em;
+  font-family: inherit;
+  font-size: .875rem;
+  font-weight: 500;
+  line-height: 1.5;
+  display: inline-flex;
+}
+
+.badge-up7fab[data-status="ready"] {
+  color: var(--ov-ui-status-ready, #187347);
+}
+
+.badge-up7fab[data-status="processing"] {
+  color: var(--ov-ui-status-processing, #2563c5);
+}
+
+.badge-up7fab[data-status="error"] {
+  color: var(--ov-ui-status-error, #c43838);
+}
+
+.indicator-EU2f1X {
+  background: currentColor;
+  border-radius: 50%;
+  flex: none;
+  width: .45em;
+  height: .45em;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

package/package.json

@@ -1,6 +1,89 @@
 {
   "name": "@openviking/react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "React UI modules for OpenViking applications.",
+  "type": "module",
+  "license": "AGPL-3.0-only",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/volcengine/OpenViking.git",
+    "directory": "frontend/packages/react"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./components/status-badge": {
+      "types": "./dist/components/status-badge/status-badge.d.ts",
+      "import": "./dist/components/status-badge.js"
+    },
+    "./components/status-badge/style.css": "./dist/components/status-badge/style.css",
+    "./components/file-tree": {
+      "types": "./dist/components/file-tree/file-tree.d.ts",
+      "import": "./dist/components/file-tree.js"
+    },
+    "./components/file-tree/style.css": "./dist/components/file-tree/style.css",
+    "./components/file-preview": {
+      "types": "./dist/components/file-preview/file-preview.d.ts",
+      "import": "./dist/components/file-preview.js"
+    },
+    "./components/file-preview/style.css": "./dist/components/file-preview/style.css",
+    "./components/tui": {
+      "types": "./dist/components/tui/tui.d.ts",
+      "import": "./dist/components/tui.js"
+    },
+    "./components/tui/style.css": "./dist/components/tui/style.css",
+    "./components/viking-bot": {
+      "types": "./dist/components/viking-bot/viking-bot.d.ts",
+      "import": "./dist/components/viking-bot.js"
+    },
+    "./components/viking-bot/style.css": "./dist/components/viking-bot/style.css",
+    "./components/scope-switcher": {
+      "types": "./dist/components/scope-switcher/scope-switcher.d.ts",
+      "import": "./dist/components/scope-switcher.js"
+    },
+    "./components/scope-switcher/style.css": "./dist/components/scope-switcher/style.css",
+    "./components/agent-connect": {
+      "types": "./dist/components/agent-connect/agent-connect.d.ts",
+      "import": "./dist/components/agent-connect.js"
+    },
+    "./components/agent-connect/style.css": "./dist/components/agent-connect/style.css",
+    "./components/resource-import": {
+      "types": "./dist/components/resource-import/resource-import.d.ts",
+      "import": "./dist/components/resource-import.js"
+    },
+    "./components/resource-import/style.css": "./dist/components/resource-import/style.css",
+    "./style.css": "./dist/style.css",
+    "./components/style.css": "./dist/components/style.css",
+    "./package.json": "./package.json",
+    "./icons": {
+      "types": "./dist/icons/index.d.ts",
+      "import": "./dist/icons.js"
+    }
+  },
+  "scripts": {
+    "check": "tsc --noEmit && tsc --noEmit -p tsconfig.config.json",
+    "dev": "rslib build --watch",
+    "build": "rslib build"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@rsbuild/plugin-react": "^2.1.1",
+    "@rslib/core": "^1.0.5"
+  }
+}