@blade-hq/agent-react 1.1.1

package/dist/style.css

@@ -0,0 +1,391 @@
+/*
+ * @blade-hq/agent-react 自包含样式。
+ *
+ * 组件同时携带 Tailwind class 与 blade-chat-* 前缀类：宿主项目装了 Tailwind 时
+ * 由 Tailwind 提供完整视觉；没装时，本文件为核心布局与配色提供等效的普通 CSS，
+ * 保证聊天界面开箱可用。所有颜色经由 CSS 变量，宿主可整体换肤。
+ */
+
+:root,
+:host {
+  --background: 0 0% 100%;
+  --foreground: 215 13% 15%;
+  --card: 0 0% 100%;
+  --card-foreground: 215 13% 15%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 215 13% 15%;
+  --primary: 223 100% 54%;
+  --primary-foreground: 0 0% 100%;
+  --muted: 220 40% 95%;
+  --muted-foreground: 220 9% 52%;
+  --accent: 220 100% 92%;
+  --accent-foreground: 215 13% 15%;
+  --destructive: 0 100% 50%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 220 20% 90%;
+  --input: 220 20% 96%;
+  --ring: 223 100% 54%;
+  --radius: 0.4rem;
+  --user-msg-bg: 220 9% 95%;
+  --user-msg-fg: 215 13% 15%;
+  --user-msg-border: 220 15% 88%;
+}
+
+[data-theme="dark"] {
+  --background: 222 22% 5%;
+  --foreground: 210 18% 88%;
+  --card: 222 20% 8%;
+  --card-foreground: 210 18% 88%;
+  --popover: 222 18% 10%;
+  --popover-foreground: 210 18% 88%;
+  --primary: 38 88% 60%;
+  --primary-foreground: 222 22% 6%;
+  --muted: 222 16% 11%;
+  --muted-foreground: 220 8% 48%;
+  --accent: 222 16% 13%;
+  --accent-foreground: 210 18% 88%;
+  --destructive: 0 65% 55%;
+  --destructive-foreground: 210 18% 95%;
+  --border: 222 12% 17%;
+  --input: 222 12% 13%;
+  --ring: 38 88% 60%;
+  --user-msg-bg: 38 22% 12%;
+  --user-msg-fg: 38 65% 80%;
+  --user-msg-border: 38 30% 19%;
+}
+
+/* ---------------------------------------------------------------- 布局骨架 */
+
+/* <blade-chat> 宿主默认块级 + 默认高度；页面对元素写的任何尺寸规则都会覆盖
+ * :host 默认值。host 容器把高度传导给内部 flex 链，消息区撑满、输入框钉底。 */
+:host {
+  display: block;
+  height: 560px;
+}
+
+.blade-chat-host {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.blade-chat {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 0%;
+  min-height: 0;
+  overflow: hidden;
+  background: hsl(var(--background));
+  color: hsl(var(--foreground));
+  font-family:
+    system-ui,
+    -apple-system,
+    "Segoe UI",
+    Roboto,
+    "PingFang SC",
+    "Microsoft YaHei",
+    sans-serif;
+}
+
+.blade-chat-messages {
+  position: relative;
+  flex: 1 1 0%;
+  min-height: 0;
+}
+
+.blade-chat-messages-content {
+  margin: 0 auto;
+  max-width: 748px;
+}
+
+.blade-chat-messages-content > div {
+  display: flex;
+  flex-direction: column;
+  gap: 2.25rem;
+  min-width: 0;
+}
+
+.blade-chat-login,
+.blade-chat-version-mismatch {
+  display: flex;
+  flex: 1 1 0%;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem;
+}
+
+/* ---------------------------------------------------------------- 消息气泡 */
+
+.blade-chat-user-row {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.blade-chat-user-col {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 0.75rem;
+  max-width: 72%;
+}
+
+.blade-chat-user-bubble {
+  max-width: 100%;
+  border: 1px solid hsl(var(--user-msg-border));
+  background: hsl(var(--user-msg-bg));
+  color: hsl(var(--user-msg-fg));
+  border-radius: 20px;
+  border-bottom-right-radius: 6px;
+  padding: 13px 18px;
+  font-size: 0.875rem;
+  line-height: 1.65;
+}
+
+.blade-chat-assistant-turn {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.blade-chat-assistant-text {
+  font-size: 15px;
+  line-height: 2;
+  color: hsl(var(--foreground));
+}
+
+.blade-chat-error-row {
+  display: flex;
+  justify-content: center;
+}
+
+.blade-chat-error-block {
+  max-width: 85%;
+  border-left: 3px solid hsl(var(--destructive));
+  padding: 0.25rem 1rem;
+  font-size: 0.875rem;
+  line-height: 1.75rem;
+  color: hsl(var(--destructive));
+}
+
+.blade-chat-error-bar {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  border-bottom: 1px solid hsl(var(--destructive) / 0.3);
+  background: hsl(var(--destructive) / 0.08);
+  padding: 0.75rem 1rem;
+  font-size: 0.875rem;
+  color: hsl(var(--destructive));
+}
+
+/* ---------------------------------------------------------------- 输入区 */
+
+.blade-chat-input {
+  border-top: 1px solid hsl(var(--border));
+  padding: 0.75rem 1rem;
+}
+
+.blade-chat-input-inner {
+  margin: 0 auto;
+  display: flex;
+  align-items: flex-end;
+  gap: 0.5rem;
+  max-width: 748px;
+  border: 1px solid hsl(var(--border));
+  background: hsl(var(--card));
+  border-radius: 1rem;
+  padding: 0.5rem 0.75rem;
+}
+
+.blade-chat-textarea {
+  flex: 1 1 0%;
+  resize: none;
+  border: 0;
+  background: transparent;
+  color: hsl(var(--foreground));
+  font: inherit;
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  padding: 0.25rem 0;
+  min-height: 28px;
+  max-height: 12rem;
+  outline: none;
+}
+
+.blade-chat-input-inner button {
+  cursor: pointer;
+  border: 0;
+}
+
+/* ---------------------------------------------------------------- 工具块 */
+
+.blade-chat-tool,
+.blade-chat-agent-loop,
+.blade-chat-thinking {
+  margin-left: 1rem;
+  font-size: 0.75rem;
+}
+
+.blade-chat-tool-detail pre {
+  overflow: auto;
+  white-space: pre-wrap;
+  border-radius: 0.375rem;
+  background: hsl(var(--muted));
+  padding: 0.5rem;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 11px;
+  color: hsl(var(--foreground));
+}
+
+/* ---------------------------------------------------------------- Markdown */
+
+.blade-chat-markdown {
+  overflow-wrap: break-word;
+}
+
+.blade-chat-prose p {
+  margin: 0.5em 0;
+}
+
+.blade-chat-prose > p:first-child,
+.blade-chat-prose > ul:first-child,
+.blade-chat-prose > ol:first-child {
+  margin-top: 0;
+}
+
+.blade-chat-prose > p:last-child,
+.blade-chat-prose > ul:last-child,
+.blade-chat-prose > ol:last-child {
+  margin-bottom: 0;
+}
+
+.blade-chat-prose ul,
+.blade-chat-prose ol {
+  margin: 0.5em 0;
+  padding-left: 1.4em;
+}
+
+.blade-chat-prose li {
+  margin: 0.25em 0;
+}
+
+.blade-chat-prose h1 {
+  font-size: 1.25em;
+  font-weight: 600;
+  margin: 1em 0 0.5em;
+}
+
+.blade-chat-prose h2 {
+  font-size: 1.15em;
+  font-weight: 600;
+  margin: 1em 0 0.5em;
+}
+
+.blade-chat-prose h3,
+.blade-chat-prose h4 {
+  font-size: 1.05em;
+  font-weight: 600;
+  margin: 0.9em 0 0.4em;
+}
+
+.blade-chat-prose blockquote {
+  border-left: 3px solid hsl(var(--border));
+  margin: 0.5em 0;
+  padding-left: 0.9em;
+  color: hsl(var(--muted-foreground));
+}
+
+.blade-chat-prose a {
+  color: hsl(var(--primary));
+  text-decoration: underline;
+}
+
+.blade-chat-prose code {
+  background: hsl(var(--muted) / 0.6);
+  border-radius: 0.25rem;
+  padding: 0.1em 0.35em;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.9em;
+}
+
+.blade-chat-prose table {
+  border-collapse: collapse;
+  margin: 0.75em 0;
+  width: 100%;
+}
+
+.blade-chat-prose th,
+.blade-chat-prose td {
+  border: 1px solid hsl(var(--border));
+  padding: 0.4em 0.7em;
+  text-align: left;
+}
+
+.blade-chat-codeblock {
+  margin: 0.75rem 0;
+  overflow: hidden;
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.75rem;
+}
+
+.blade-chat-codeblock-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 34px;
+  border-bottom: 1px solid hsl(var(--border));
+  background: hsl(var(--muted) / 0.5);
+  padding: 0 0.375rem 0 0.875rem;
+  color: hsl(var(--muted-foreground));
+}
+
+.blade-chat-codeblock-header button {
+  cursor: pointer;
+  border: 0;
+  background: transparent;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  color: inherit;
+}
+
+.blade-chat-codeblock-body {
+  margin: 0;
+  overflow-x: auto;
+  background: hsl(var(--muted) / 0.25);
+  padding: 0.875rem 1rem;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 13.5px;
+  line-height: 1.7;
+}
+
+.blade-chat-codeblock-body code {
+  background: transparent;
+  padding: 0;
+}
+
+/* ---------------------------------------------------------------- 动效 */
+
+.blade-shimmer-text {
+  background: linear-gradient(
+    90deg,
+    hsl(var(--muted-foreground)) 0%,
+    hsl(var(--foreground)) 50%,
+    hsl(var(--muted-foreground)) 100%
+  );
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+  animation: blade-shimmer 2s linear infinite;
+}
+
+@keyframes blade-shimmer {
+  from {
+    background-position: 200% 0;
+  }
+  to {
+    background-position: -200% 0;
+  }
+}

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@blade-hq/agent-react",
+  "version": "1.1.1",
+  "description": "Blade Agent React 绑定：BladeProvider、useAgentSession、开箱即用的 ChatView 聊天界面。",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "public-api.md"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@blade-hq/agent-client": "1.1.1",
+    "clsx": "^2.1.0",
+    "lucide-react": "^0.468.0",
+    "streamdown": "^2.0.0",
+    "use-stick-to-bottom": "^1.1.3"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  }
+}