[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"similar-botfront--rasa-webchat":3,"tool-botfront--rasa-webchat":64},[4,17,25,39,48,56],{"id":5,"name":6,"github_repo":7,"description_zh":8,"stars":9,"difficulty_score":10,"last_commit_at":11,"category_tags":12,"status":16},1381,"everything-claude-code","affaan-m\u002Feverything-claude-code","everything-claude-code 是一套专为 AI 编程助手（如 Claude Code、Codex、Cursor 等）打造的高性能优化系统。它不仅仅是一组配置文件，而是一个经过长期实战打磨的完整框架，旨在解决 AI 代理在实际开发中面临的效率低下、记忆丢失、安全隐患及缺乏持续学习能力等核心痛点。\n\n通过引入技能模块化、直觉增强、记忆持久化机制以及内置的安全扫描功能，everything-claude-code 能显著提升 AI 在复杂任务中的表现，帮助开发者构建更稳定、更智能的生产级 AI 代理。其独特的“研究优先”开发理念和针对 Token 消耗的优化策略，使得模型响应更快、成本更低，同时有效防御潜在的攻击向量。\n\n这套工具特别适合软件开发者、AI 研究人员以及希望深度定制 AI 工作流的技术团队使用。无论您是在构建大型代码库，还是需要 AI 协助进行安全审计与自动化测试，everything-claude-code 都能提供强大的底层支持。作为一个曾荣获 Anthropic 黑客大奖的开源项目，它融合了多语言支持与丰富的实战钩子（hooks），让 AI 真正成长为懂上",138956,2,"2026-04-05T11:33:21",[13,14,15],"开发框架","Agent","语言模型","ready",{"id":18,"name":19,"github_repo":20,"description_zh":21,"stars":22,"difficulty_score":10,"last_commit_at":23,"category_tags":24,"status":16},3704,"NextChat","ChatGPTNextWeb\u002FNextChat","NextChat 是一款轻量且极速的 AI 助手，旨在为用户提供流畅、跨平台的大模型交互体验。它完美解决了用户在多设备间切换时难以保持对话连续性，以及面对众多 AI 模型不知如何统一管理的痛点。无论是日常办公、学习辅助还是创意激发，NextChat 都能让用户随时随地通过网页、iOS、Android、Windows、MacOS 或 Linux 端无缝接入智能服务。\n\n这款工具非常适合普通用户、学生、职场人士以及需要私有化部署的企业团队使用。对于开发者而言，它也提供了便捷的自托管方案，支持一键部署到 Vercel 或 Zeabur 等平台。\n\nNextChat 的核心亮点在于其广泛的模型兼容性，原生支持 Claude、DeepSeek、GPT-4 及 Gemini Pro 等主流大模型，让用户在一个界面即可自由切换不同 AI 能力。此外，它还率先支持 MCP（Model Context Protocol）协议，增强了上下文处理能力。针对企业用户，NextChat 提供专业版解决方案，具备品牌定制、细粒度权限控制、内部知识库整合及安全审计等功能，满足公司对数据隐私和个性化管理的高标准要求。",87618,"2026-04-05T07:20:52",[13,15],{"id":26,"name":27,"github_repo":28,"description_zh":29,"stars":30,"difficulty_score":10,"last_commit_at":31,"category_tags":32,"status":16},2268,"ML-For-Beginners","microsoft\u002FML-For-Beginners","ML-For-Beginners 是由微软推出的一套系统化机器学习入门课程，旨在帮助零基础用户轻松掌握经典机器学习知识。这套课程将学习路径规划为 12 周，包含 26 节精炼课程和 52 道配套测验，内容涵盖从基础概念到实际应用的完整流程，有效解决了初学者面对庞大知识体系时无从下手、缺乏结构化指导的痛点。\n\n无论是希望转型的开发者、需要补充算法背景的研究人员，还是对人工智能充满好奇的普通爱好者，都能从中受益。课程不仅提供了清晰的理论讲解，还强调动手实践，让用户在循序渐进中建立扎实的技能基础。其独特的亮点在于强大的多语言支持，通过自动化机制提供了包括简体中文在内的 50 多种语言版本，极大地降低了全球不同背景用户的学习门槛。此外，项目采用开源协作模式，社区活跃且内容持续更新，确保学习者能获取前沿且准确的技术资讯。如果你正寻找一条清晰、友好且专业的机器学习入门之路，ML-For-Beginners 将是理想的起点。",84991,"2026-04-05T10:45:23",[33,34,35,36,14,37,15,13,38],"图像","数据工具","视频","插件","其他","音频",{"id":40,"name":41,"github_repo":42,"description_zh":43,"stars":44,"difficulty_score":45,"last_commit_at":46,"category_tags":47,"status":16},3128,"ragflow","infiniflow\u002Fragflow","RAGFlow 是一款领先的开源检索增强生成（RAG）引擎，旨在为大语言模型构建更精准、可靠的上下文层。它巧妙地将前沿的 RAG 技术与智能体（Agent）能力相结合，不仅支持从各类文档中高效提取知识，还能让模型基于这些知识进行逻辑推理和任务执行。\n\n在大模型应用中，幻觉问题和知识滞后是常见痛点。RAGFlow 通过深度解析复杂文档结构（如表格、图表及混合排版），显著提升了信息检索的准确度，从而有效减少模型“胡编乱造”的现象，确保回答既有据可依又具备时效性。其内置的智能体机制更进一步，使系统不仅能回答问题，还能自主规划步骤解决复杂问题。\n\n这款工具特别适合开发者、企业技术团队以及 AI 研究人员使用。无论是希望快速搭建私有知识库问答系统，还是致力于探索大模型在垂直领域落地的创新者，都能从中受益。RAGFlow 提供了可视化的工作流编排界面和灵活的 API 接口，既降低了非算法背景用户的上手门槛，也满足了专业开发者对系统深度定制的需求。作为基于 Apache 2.0 协议开源的项目，它正成为连接通用大模型与行业专有知识之间的重要桥梁。",77062,3,"2026-04-04T04:44:48",[14,33,13,15,37],{"id":49,"name":50,"github_repo":51,"description_zh":52,"stars":53,"difficulty_score":45,"last_commit_at":54,"category_tags":55,"status":16},519,"PaddleOCR","PaddlePaddle\u002FPaddleOCR","PaddleOCR 是一款基于百度飞桨框架开发的高性能开源光学字符识别工具包。它的核心能力是将图片、PDF 等文档中的文字提取出来，转换成计算机可读取的结构化数据，让机器真正“看懂”图文内容。\n\n面对海量纸质或电子文档，PaddleOCR 解决了人工录入效率低、数字化成本高的问题。尤其在人工智能领域，它扮演着连接图像与大型语言模型（LLM）的桥梁角色，能将视觉信息直接转化为文本输入，助力智能问答、文档分析等应用场景落地。\n\nPaddleOCR 适合开发者、算法研究人员以及有文档自动化需求的普通用户。其技术优势十分明显：不仅支持全球 100 多种语言的识别，还能在 Windows、Linux、macOS 等多个系统上运行，并灵活适配 CPU、GPU、NPU 等各类硬件。作为一个轻量级且社区活跃的开源项目，PaddleOCR 既能满足快速集成的需求，也能支撑前沿的视觉语言研究，是处理文字识别任务的理想选择。",74913,"2026-04-05T10:44:17",[15,33,13,37],{"id":57,"name":58,"github_repo":59,"description_zh":60,"stars":61,"difficulty_score":45,"last_commit_at":62,"category_tags":63,"status":16},2181,"OpenHands","OpenHands\u002FOpenHands","OpenHands 是一个专注于 AI 驱动开发的开源平台，旨在让智能体（Agent）像人类开发者一样理解、编写和调试代码。它解决了传统编程中重复性劳动多、环境配置复杂以及人机协作效率低等痛点，通过自动化流程显著提升开发速度。\n\n无论是希望提升编码效率的软件工程师、探索智能体技术的研究人员，还是需要快速原型验证的技术团队，都能从中受益。OpenHands 提供了灵活多样的使用方式：既可以通过命令行（CLI）或本地图形界面在个人电脑上轻松上手，体验类似 Devin 的流畅交互；也能利用其强大的 Python SDK 自定义智能体逻辑，甚至在云端大规模部署上千个智能体并行工作。\n\n其核心技术亮点在于模块化的软件智能体 SDK，这不仅构成了平台的引擎，还支持高度可组合的开发模式。此外，OpenHands 在 SWE-bench 基准测试中取得了 77.6% 的优异成绩，证明了其解决真实世界软件工程问题的能力。平台还具备完善的企业级功能，支持与 Slack、Jira 等工具集成，并提供细粒度的权限管理，适合从个人开发者到大型企业的各类用户场景。",70612,"2026-04-05T11:12:22",[15,14,13,36],{"id":65,"github_repo":66,"name":67,"description_en":68,"description_zh":69,"ai_summary_zh":69,"readme_en":70,"readme_zh":71,"quickstart_zh":72,"use_case_zh":73,"hero_image_url":74,"owner_login":75,"owner_name":76,"owner_avatar_url":77,"owner_bio":78,"owner_company":79,"owner_location":79,"owner_email":80,"owner_twitter":79,"owner_website":81,"owner_url":82,"languages":83,"stars":100,"forks":101,"last_commit_at":102,"license":103,"difficulty_score":10,"env_os":78,"env_gpu":104,"env_ram":104,"env_deps":105,"category_tags":112,"github_topics":113,"view_count":10,"oss_zip_url":79,"oss_zip_packed_at":79,"status":16,"created_at":120,"updated_at":121,"faqs":122,"releases":152},2843,"botfront\u002Frasa-webchat","rasa-webchat","A feature-rich chat widget for Rasa and Botfront","rasa-webchat 是一款功能丰富的聊天窗口组件，专为在任意网站上部署基于 Rasa 或 Botfront 构建的虚拟助手而设计。它解决了开发者将后端对话机器人能力无缝集成到前端网页时的展示与交互难题，让用户无需从零开发界面即可拥有专业的聊天体验。\n\n这款工具非常适合 Web 开发者、全栈工程师以及需要快速落地智能客服或助手的企业技术团队。无论是希望通过简单的 script 标签直接嵌入现有网站，还是需要在 React 项目中作为组件灵活调用，rasa-webchat 都能提供便捷的接入方案。\n\n其技术亮点在于支持多种富媒体交互形式，包括文本、快捷回复、图片展示、轮播卡片以及 Markdown 格式渲染，极大地丰富了人机对话的表现力。此外，它还具备持久化会话、输入状态提示以及消息智能延迟发送等细节功能，确保对话流畅自然。值得注意的是，使用时需注意版本匹配，例如 1.0.1 版本专门适配 Rasa 2.3.x 和 2.4.x 系列，帮助开发者规避兼容性风险。通过 rasa-webchat，团队可以更专注于对话逻辑本身，高效打造现代化的智能交互界面。","\u003Cp align=\"center\">\n\n\u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fbotfront\">\n    \u003Cimg alt=\"npm\" src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Frasa-webchat.svg\">\n\u003C\u002Fa>\n\u003Ca href='https:\u002F\u002Fgithub.com\u002Fbotfront\u002Fbotfront\u002Fblob\u002Fmaster\u002FLICENSE'>\n    \u003Cimg alt=\"License\" src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flicense\u002Fbotfront\u002Frasa-webchat\">\n\u003C\u002Fa>\n\u003Ca href='https:\u002F\u002Fspectrum.chat\u002Fbotfront'>\n    \u003Cimg alt=\"Spectrum link\" src=\"https:\u002F\u002Fwithspectrum.github.io\u002Fbadge\u002Fbadge.svg\">\n\u003C\u002Fa>\n\u003C\u002Fp>\n\u003Ch1 align=\"center\">Rasa Webchat 💬\u003C\u002Fh1>\n\u003Ch5 align=\"center\">\n A chat widget to deploy virtual assistants made with \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FrasaHQ\u002Frasa\">Rasa\u003C\u002Fa> or \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fbotfront\u002Fbotfront?utm_source=rasa_webchat\">Botfront\u003C\u002Fa> on any website.\n\u003C\u002Fh5>\n\u003Cbr \u002F>\n\u003Cbr \u002F>\n\n\u003Cdiv align=\"center\">\n\u003Cimg align=\"center\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fbotfront_rasa-webchat_readme_f80f42f69766.gif\" alt=\"demonstration\">\n\u003C\u002Fdiv>\n\u003Cbr \u002F>\n\n### ⚠️ Version 1.0.1 of the rasa webchat is made to work with version 2.3.x and 2.4.x of rasa. Use 1.0.0 for other rasa versions.\n\n\u003Cbr \u002F>\n\n## Features\n- Text Messages\n- Quick Replies\n- Images\n- Carousels\n- Markdown support\n- Persistent sessions\n- Typing indications\n- Smart delay between messages\n- Easy to import in a script tag or as a React Component\n\n## 🔥 Promo: check out our other cool open source project\n\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fbotfront\u002Fbotfront?utm_source=rasa_webchat\">\n\u003Cimg align=\"center\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fbotfront_rasa-webchat_readme_58a77eaee453.gif\" alt=\"demonstration\" width=\"100%\">\n\u003C\u002Fa>\n\n\n## Usage\n\n### In a `\u003Cscript>` tag\n\nIn your `\u003Cbody\u002F>`:\n```html\n\u003Cscript>!(function () {\n  let e = document.createElement(\"script\"),\n    t = document.head || document.getElementsByTagName(\"head\")[0];\n  (e.src =\n    \"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Frasa-webchat@1.x.x\u002Flib\u002Findex.js\"),\n    \u002F\u002F Replace 1.x.x with the version that you want\n    (e.async = !0),\n    (e.onload = () => {\n      window.WebChat.default(\n        {\n          customData: { language: \"en\" },\n          socketUrl: \"https:\u002F\u002Fbf-botfront.development.agents.botfront.cloud\",\n          \u002F\u002F add other props here\n        },\n        null\n      );\n    }),\n    t.insertBefore(e, t.firstChild);\n})();\n\u003C\u002Fscript>\n```\n\n⚠️ We recommend adding a version tag to prevent breaking changes from major versions, e.g for version 1.0.0 https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Frasa-webchat@1.0.0\u002Flib\u002Findex.js,\nhowever this will not work with versions below 1.0.0. If you do not specify a version, you will get served the latest available version of the rasa-webchat.\n\nAbout images: `width` and `height` define the size in pixels that images in messages are crop-scaled to. If not present, the image will scale to the maximum width of the container and the image.\n\n### As a React component\n\nInstall the [npm package](https:\u002F\u002Fnpmjs.com\u002Frasa-webchat):\n```bash\nnpm install rasa-webchat\n```\n\nThen:\n\n```javascript\nimport Widget from 'rasa-webchat';\n\nfunction CustomWidget = () => {\n  return (\n    \u003CWidget\n      initPayload={\"\u002Fget_started\"}\n      socketUrl={\"http:\u002F\u002Flocalhost:5500\"}\n      socketPath={\"\u002Fsocket.io\u002F\"}\n      customData={{\"language\": \"en\"}} \u002F\u002F arbitrary custom data. Stay minimal as this will be added to the socket\n      title={\"Title\"}\n    \u002F>\n  )\n}\n```\n\n- Make sure to have the prop `embedded`\nset to `true` if you don't want to see the launcher.\n\n\n\n## Parameters\n| Prop \u002F Param                 | Default value          | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |\n|------------------------|--------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `initPayload`          | `null`             | Payload sent to Rasa when conversation starts                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |\n| `socketUrl`            | `null`             | Socket URL                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |\n| `socketPath`           | `null`             | Close the chat window                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |\n| `customData`           | `null`             | Arbitrary object sent with the socket. If using with Botfront, it must include the language (e.g. `{\"language\": \"en\"}`)                                                                                                                                                                                                                                                                                                                                                                                                      |\n| `docViewer`            | `false`            | If you add this prop to the component or to the init script, `docViewer=true` , this will treat links in received messages as links to a document ( `.pdf .doc .xlsx` etc. ) and will open them in a popup using `https:\u002F\u002Fdocs.google.com\u002Fviewer` service                                                                                                                                                                                                                                                                    |\n| `title`                | `'Welcome\"`        | Title shown in the header of the widget                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |\n| `subtitle`             | `null`             | Subtitle shown under the title in the header of the widget                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |\n| `inputTextFieldHint`   | `\"Type a message\"` | User message input field placeholder                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |\n| `hideWhenNotConnected` | `true`             | If `true` the widget will hide when the connection to the socket is lost                                                                                                                                                                                                                                                                                                                                                                                                                                                     |\n| `connectOn`            | `\"mount\"`          | This prop lets you choose when the widget will try connecting to the server. By default, it tries connecting as soon as it mounts. If you select `connectOn='open'` it will only attempt connection when the widget is opened. it can only take the values `mount` and `open`.                                                                                                                                                                                                                                               |\n| `onSocketEvent`        | `null`             | call custom code on a specific socket event                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |\n| `embedded`             | `false`            | Set to `true` if you want to embed the in a web page. The widget will always be open and the `initPayload` will be triggered immediately                                                                                                                                                                                                                                                                                                                                                                                     |\n| `showFullScreenButton` | `false`            | Show a full screen toggle                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |\n| `displayUnreadCount`   | `false`            | Path to an image displayed on the launcher when the widget is closed                                                                                                                                                                                                                                                                                                                                                                                                                                                         |\n| `showMessageDate`      | `false`            | Show message date. Can be overriden with a function: `(timestamp, message) => return 'my custom date'`                                                                                                                                                                                                                                                                                                                                                                                                                       |\n| `customMessageDelay`   | See below          | This prop is a function, the function take a message string as an argument. The defined function will be called everytime a message is received and the returned value will be used as a milliseconds delay before displaying a new message.                                                                                                                                                                                                                                                                                 |\n| `params`               | See below          | Essentially used to customize the image size, also used to change storage options.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |\n| `storage`              | `\"local\"`          | ⚠️ This is not a prop, it has to be passed inside the params object above. \u003Cbr> Specifies the storage location of the conversation state in the browser. `\"session\"` defines the state to be stored in the session storage. The session storage persists on reload of the page, and is cleared after the browser or tab is closed, or when `sessionStorage.clear()`is called. `\"local\"` defines the state to be stored in the local stoage. The local storage persists after the the browser is closed, and is cleared when the cookies of the browser are cleared, or when `localStorage.clear()`is called. |\n| `customComponent`      | `null`             | Custom component to be used with custom responses. E.g.: `customComponent={ (messageData) => (\u003Cdiv>Custom React component\u003C\u002Fdiv>)}`. Please note that this can only be used if you call the webchat from a React application as you can't write a component in pure Javscript. |\n| `onWidgetEvent`        | `{}`             | call custom code on a specific widget event ( `onChatOpen`, `onChatClose`, `onChatHidden`, are available for now ), add a function to the desired object property in the props to have it react to the event. |\n\n### Additional Examples\n\n##### `customMessageDelay`\n```javascript\n(message) => {\n    let delay = message.length * 30;\n    if (delay > 2 * 1000) delay = 3 * 1000;\n    if (delay \u003C 400) delay = 1000;\n    return delay;\n}\n```\n\n##### `onSocketEvent`\n```jsx\nonSocketEvent={{\n  'bot_uttered': () => console.log('the bot said something'),\n  'connect': () => console.log('connection established'),\n  'disconnect': () => doSomeCleanup(),\n}}\n```\n\n##### `params`\n\nThe `params` props only allows to specify custom image dimensions:\n```jsx\nparams={{\n        images: {\n          dims: {\n            width: 300,\n            height: 200\n          }\n        }\n      }}\n```\n\n### Other features\n\n#### Tooltips\n\nText messages received when the widget is closed will be shown as a tooltip.\n\n#### Sending a message on page load\n\nWhen reconnecting to an existing chat session, the bot will send a message contained in the localStorage key specified by the `NEXT_MESSAGE` constant. The message should be stringified JSON with a `message` property describing the message and an `expiry` property set to a UNIX timestamp in milliseconds after which this message should not be sent. This is useful if you would like your bot to be able to offer your user to navigate around the site.\n\n#### Sending a payload from your React app\n\n```jsx\nfunction myComponent() {\n    const webchatRef = useRef(null);\n    \n    \u002F\u002F triggered when something happens in your app\n    function callback() {\n        if (webchatRef.current && webchatRef.current.sendMessage) {\n            webchatRef.current.sendMessage('\u002FmyIntent{\"entityName\":\"value\"}');\n        }\n    }\n    \n    return \u003CRasaWebchat\n        ref={webchatRef}\n    \u002F>;\n}\n```\n\nThe payload can be any message that the user would normally send, but if you want to force an intent and maybe some entities, you can use that format\n`\u002FmyIntent{\"entity1\":\"value1\",\"entity2\":\"value2\"}`\n\n### Backends\n\nThe widget can be used with any backend but is primarily designed to be used with [Rasa](https:\u002F\u002Fgithub.com\u002FrasaHQ\u002Frasa) or [Botfront](https:\u002F\u002Fgithub.com\u002Fbotfront\u002Fbotfront).\n\n#### Rasa\n\nUse the `socketio` channel: See [instructions in the Rasa documentation](https:\u002F\u002Frasa.com\u002Fdocs\u002Fcore\u002Fconnectors\u002F#socketio-connector)\n\nIf you want to process `customData` in Rasa  you have to [create a new channel](https:\u002F\u002Frasa.com\u002Fdocs\u002Fcore\u002Fconnectors\u002F#custom-channels). Use channel `rasa_core.channels.socketio` as a template for your new channel. In this channel, `customData` can be retrieved via `data['customData']`. Then you can  modify `sender_id`, save `customData` to the database, fill slots or whatever you need to with your additional data.\n\n\n#### Botfront\n\nThe Rasa Webchat is developped by the [Botfront](https:\u002F\u002Fbotfront.io) team and it works with Botfront. If your bot is multilingual, make sure to specificy the current language in the `customData` prop. E.g. `customData={{language: 'en'}}`. See in [Botfront docs](https:\u002F\u002Fbotfront.io\u002Fdocs\u002Fchannels\u002Fwebchat\u002F) for more details.\n\n\n## Styles\n\nFrom version 0.8 we started prefixing all css classes, if you already had css styling for the widget, just prepend `rw-` to all the classes you changed.\n\nhierarchy:\n```\n.rw-conversation-container\n  |-- .rw-header\n        |-- .rw-title\n        |-- .rw-close-function\n        |-- .rw-loading\n  |-- .rw-messages-container\n        |-- .rw-message\n              |-- .rw-client\n              |-- .rw-response\n        |-- .rw-replies\n              |-- .rw-reply\n              |-- .rw-response\n        |-- .rw-snippet\n              |-- .rw-snippet-title\n              |-- .rw-snippet-details\n              |-- .rw-link\n        |-- .rw-imageFrame\n        |-- .rw-videoFrame\n  |-- .rw-sender\n        |-- .rw-new-message\n        |-- .rw-send\n```\n\n| Class                   |  Description                                                        |\n|-------------------------|---------------------------------------------------------------------|\n| .rw-widget-container       | The div containing the chatbox of the default version               |\n| .rw-widget-embedded        | div of the embedded chatbox (using embedded prop)                   |\n| .rw-full-screen            | div of the fullscreen chatbox (using fullScreenMode prop)           |\n| .rw-conversation-container | the parent div containing the header, message-container and sender  |\n| .rw-messages-container     | the central area where the messages appear                          |\n| .rw-sender                 | div of the bottom area which prompts user input                     |\n| .rw-new-message            | the text input element of sender                                    |\n| .rw-send                   | the send icon element of sender                                     |\n| .rw-header                 | div of the top area with the chatbox header                         |\n| .rw-title                  | the title element of the header                                     |\n| .rw-close-button           | the close icon of the header                                        |\n| .rw-loading                | the loading status element of the header                            |\n| .rw-message                | the boxes holding the messages of client and response               |\n| .rw-replies                | the area that gives quick reply options                             |\n| .rw-snippet                | a component for describing links                                    |\n| .rw-imageFrame             | a container for sending images                                      |\n| .rw-videoFrame             | a container for sending video                                       |\n\n\n## Contributors\n[@PHLF](https:\u002F\u002Fgithub.com\u002Fphlf)\n[@znat](https:\u002F\u002Fgithub.com\u002Fznat)\n[@TheoTomalty](https:\u002F\u002Fgithub.com\u002FTheoTomalty)\n[@Hub4IT](https:\u002F\u002Fgithub.com\u002FHub4IT)\n[@dliuproduction](https:\u002F\u002Fgithub.com\u002Fdliuproduction)\n[@MatthieuJnon](https:\u002F\u002Fgithub.com\u002FMatthieuJnon)\n[@mofortin](https:\u002F\u002Fgithub.com\u002Fmofortin)\n[@GuillaumeTech](https:\u002F\u002Fgithub.com\u002FGuillaumeTech)\n                                 \n\u003Cbr\u002F>\n\u003Ch2 align=\"center\">License\u003C\u002Fh2>\n\nCopyright (C) 2021 Dialogue Technologies Inc.\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n    http:\u002F\u002Fwww.apache.org\u002Flicenses\u002FLICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.(C) 2021 Dialogue Technologies Inc. All rights reserved.\n","\u003Cp align=\"center\">\n\n\u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fbotfront\">\n    \u003Cimg alt=\"npm\" src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Frasa-webchat.svg\">\n\u003C\u002Fa>\n\u003Ca href='https:\u002F\u002Fgithub.com\u002Fbotfront\u002Fbotfront\u002Fblob\u002Fmaster\u002FLICENSE'>\n    \u003Cimg alt=\"License\" src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flicense\u002Fbotfront\u002Frasa-webchat\">\n\u003C\u002Fa>\n\u003Ca href='https:\u002F\u002Fspectrum.chat\u002Fbotfront'>\n    \u003Cimg alt=\"Spectrum link\" src=\"https:\u002F\u002Fwithspectrum.github.io\u002Fbadge\u002Fbadge.svg\">\n\u003C\u002Fa>\n\u003C\u002Fp>\n\u003Ch1 align=\"center\">Rasa Webchat 💬\u003C\u002Fh1>\n\u003Ch5 align=\"center\">\n  一个聊天小部件，用于将使用 \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FrasaHQ\u002Frasa\">Rasa\u003C\u002Fa> 或 \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fbotfront\u002Fbotfront?utm_source=rasa_webchat\">Botfront\u003C\u002Fa> 构建的虚拟助手部署到任何网站上。\n\u003C\u002Fh5>\n\u003Cbr \u002F>\n\u003Cbr \u002F>\n\n\u003Cdiv align=\"center\">\n\u003Cimg align=\"center\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fbotfront_rasa-webchat_readme_f80f42f69766.gif\" alt=\"演示\">\n\u003C\u002Fdiv>\n\u003Cbr \u002F>\n\n### ⚠️ Rasa Webchat 1.0.1 版本专为 Rasa 2.3.x 和 2.4.x 版本设计。对于其他 Rasa 版本，请使用 1.0.0 版本。\n\n\u003Cbr \u002F>\n\n## 功能\n- 文本消息\n- 快速回复\n- 图片\n- 轮播\n- Markdown 支持\n- 持久会话\n- 键入提示\n- 智能消息延迟\n- 可轻松通过 `\u003Cscript>` 标签或作为 React 组件引入\n\n## 🔥 推广：来看看我们另一个超酷的开源项目\n\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fbotfront\u002Fbotfront?utm_source=rasa_webchat\">\n\u003Cimg align=\"center\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fbotfront_rasa-webchat_readme_58a77eaee453.gif\" alt=\"演示\" width=\"100%\">\n\u003C\u002Fa>\n\n\n## 使用方法\n\n### 在 `\u003Cscript>` 标签中\n\n在你的 `\u003Cbody\u002F>` 中：\n```html\n\u003Cscript>!(function () {\n  let e = document.createElement(\"script\"),\n    t = document.head || document.getElementsByTagName(\"head\")[0];\n  (e.src =\n    \"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Frasa-webchat@1.x.x\u002Flib\u002Findex.js\"),\n    \u002F\u002F 将 1.x.x 替换为你想要的版本\n    (e.async = !0),\n    (e.onload = () => {\n      window.WebChat.default(\n        {\n          customData: { language: \"en\" },\n          socketUrl: \"https:\u002F\u002Fbf-botfront.development.agents.botfront.cloud\",\n          \u002F\u002F 在此处添加其他属性\n        },\n        null\n      );\n    }),\n    t.insertBefore(e, t.firstChild);\n})();\n\u003C\u002Fscript>\n```\n\n⚠️ 我们建议添加版本标签，以避免重大版本更新带来的破坏性变化，例如对于 1.0.0 版本：https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Frasa-webchat@1.0.0\u002Flib\u002Findex.js。不过，这不适用于 1.0.0 以下的版本。如果不指定版本，系统将自动加载最新可用的 Rasa Webchat 版本。\n\n关于图片：`width` 和 `height` 定义了消息中图片裁剪缩放后的像素尺寸。如果未设置，则图片将根据容器的最大宽度进行缩放。\n\n### 作为 React 组件\n\n安装 [npm 包](https:\u002F\u002Fnpmjs.com\u002Frasa-webchat)：\n```bash\nnpm install rasa-webchat\n```\n\n然后：\n\n```javascript\nimport Widget from 'rasa-webchat';\n\nfunction CustomWidget = () => {\n  return (\n    \u003CWidget\n      initPayload={\"\u002Fget_started\"}\n      socketUrl={\"http:\u002F\u002Flocalhost:5500\"}\n      socketPath={\"\u002Fsocket.io\u002F\"}\n      customData={{\"language\": \"en\"}} \u002F\u002F 任意自定义数据。尽量保持简洁，因为这些数据会被添加到 Socket 连接中\n      title={\"标题\"}\n    \u002F>\n  )\n}\n```\n\n- 如果你不想显示启动器，请确保将 `embedded` 属性设置为 `true`。\n\n## 参数\n| 属性 \u002F 参数                 | 默认值          | 描述                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |\n|------------------------|--------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `initPayload`          | `null`             | 会话开始时发送给 Rasa 的负载                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |\n| `socketUrl`            | `null`             | Socket URL                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |\n| `socketPath`           | `null`             | 关闭聊天窗口                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |\n| `customData`           | `null`             | 随 Socket 一起发送的任意对象。如果与 Botfront 一起使用，必须包含语言信息（例如 `{\"language\": \"en\"}`）                                                                                                                                                                                                                                                                                                                                                                                                      |\n| `docViewer`            | `false`            | 如果将此属性添加到组件或初始化脚本中，设置为 `docViewer=true`，则会将接收到的消息中的链接视为文档链接（如 `.pdf、.doc、.xlsx` 等），并通过 `https:\u002F\u002Fdocs.google.com\u002Fviewer` 服务在弹出窗口中打开它们。                                                                                                                                                                                                                                                                    |\n| `title`                | `'Welcome'`        | 小部件头部显示的标题                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |\n| `subtitle`             | `null`             | 小部件头部标题下方显示的副标题                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |\n| `inputTextFieldHint`   | `\"Type a message\"` | 用户消息输入框的占位符                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |\n| `hideWhenNotConnected` | `true`             | 如果设置为 `true`，当与 Socket 的连接断开时，小部件将隐藏。                                                                                                                                                                                                                                                                                                                                                                                                                                                     |\n| `connectOn`            | `\"mount\"`          | 此属性允许您选择小部件何时尝试连接到服务器。默认情况下，它会在挂载时立即尝试连接。如果您选择 `connectOn='open'`，则仅在打开小部件时才会尝试连接。该属性只能取值为 `mount` 或 `open`。                                                                                                                                                                                                                                               |\n| `onSocketEvent`        | `null`             | 在特定的 Socket 事件发生时调用自定义代码                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |\n| `embedded`             | `false`            | 如果希望将小部件嵌入网页中，请将其设置为 `true`。此时小部件将始终处于打开状态，并且会立即触发 `initPayload`。                                                                                                                                                                                                                                                                                                                                                                                     |\n| `showFullScreenButton` | `false`            | 显示全屏切换按钮                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |\n| `displayUnreadCount`   | `false`            | 当小部件关闭时，在启动器上显示的图片路径                                                                                                                                                                                                                                                                                                                                                                                                                                                         |\n| `showMessageDate`      | `false`            | 显示消息日期。可以通过函数覆盖：`(timestamp, message) => return 'my custom date'`。                                                                                                                                                                                                                                                                                                                                                                                                                       |\n| `customMessageDelay`   | 见下文          | 此属性是一个函数，接收消息字符串作为参数。每次收到消息时都会调用该函数，并将返回的毫秒数作为延迟时间，在显示新消息之前等待。                                                                                                                                                                                                                                                                                                                                                 |\n| `params`               | 见下文          | 主要用于自定义图片大小，也可用于更改存储选项。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |\n| `storage`              | `\"local\"`          | ⚠️ 这不是一个属性，必须通过上述 `params` 对象传递。\u003Cbr> 指定会话状态在浏览器中的存储位置。“session”表示将状态存储在会话存储中。会话存储在页面重新加载时仍然存在，但在浏览器或标签页关闭后，或者调用 `sessionStorage.clear()` 时会被清除。“local”表示将状态存储在本地存储中。本地存储在浏览器关闭后仍然存在，但在清除浏览器 Cookie 或调用 `localStorage.clear()` 时会被清除。 |\n| `customComponent`      | `null`             | 用于自定义响应的自定义组件。例如：`customComponent={ (messageData) => (\u003Cdiv>自定义 React 组件\u003C\u002Fdiv>)}`。请注意，这仅适用于从 React 应用程序调用 Webchat 的情况，因为无法仅使用纯 JavaScript 编写组件。 |\n| `onWidgetEvent`        | `{}`             | 在特定的小部件事件上调用自定义代码（目前可用的事件包括 `onChatOpen`、`onChatClose`、`onChatHidden`），只需在 props 中相应对象属性上添加函数，即可使其对事件作出反应。 |\n\n### 其他示例\n\n##### `customMessageDelay`\n```javascript\n(message) => {\n    let delay = message.length * 30;\n    if (delay > 2 * 1000) delay = 3 * 1000;\n    if (delay \u003C 400) delay = 1000;\n    return delay;\n}\n```\n\n##### `onSocketEvent`\n```jsx\nonSocketEvent={{\n  'bot_uttered': () => console.log('机器人说了一些话'),\n  'connect': () => console.log('连接已建立'),\n  'disconnect': () => doSomeCleanup(),\n}}\n```\n\n##### `params`\n\n`params` 属性仅允许指定自定义图片尺寸：\n```jsx\nparams={{\n        images: {\n          dims: {\n            width: 300,\n            height: 200\n          }\n        }\n      }}\n```\n\n### 其他功能\n\n#### 工具提示\n\n当小部件关闭时接收到的文本消息将以工具提示的形式显示。\n\n#### 页面加载时发送消息\n\n在重新连接到现有聊天会话时，机器人将发送存储在由 `NEXT_MESSAGE` 常量指定的 localStorage 键中的消息。该消息应为字符串化的 JSON，包含一个描述消息内容的 `message` 属性，以及一个以毫秒为单位的 UNIX 时间戳 `expiry` 属性，表示在此时间之后不应再发送该消息。这在希望机器人能够引导用户浏览网站时非常有用。\n\n#### 从你的 React 应用程序发送负载\n\n```jsx\nfunction myComponent() {\n    const webchatRef = useRef(null);\n    \n    \u002F\u002F 当你的应用中发生某些事情时触发\n    function callback() {\n        if (webchatRef.current && webchatRef.current.sendMessage) {\n            webchatRef.current.sendMessage('\u002FmyIntent{\"entityName\":\"value\"}');\n        }\n    }\n    \n    return \u003CRasaWebchat\n        ref={webchatRef}\n    \u002F>;\n}\n```\n\n负载可以是用户通常会发送的任何消息，但如果你想强制执行某个意图并可能包含一些实体，可以使用以下格式：\n`\u002FmyIntent{\"entity1\":\"value1\",\"entity2\":\"value2\"}`\n\n### 后端\n\n该小部件可以与任何后端配合使用，但主要设计用于与 [Rasa](https:\u002F\u002Fgithub.com\u002FrasaHQ\u002Frasa) 或 [Botfront](https:\u002F\u002Fgithub.com\u002Fbotfront\u002Fbotfront) 配合使用。\n\n#### Rasa\n\n使用 `socketio` 通道：请参阅 [Rasa 文档中的说明](https:\u002F\u002Frasa.com\u002Fdocs\u002Fcore\u002Fconnectors\u002F#socketio-connector)\n\n如果你想在 Rasa 中处理 `customData`，则需要 [创建一个新的通道](https:\u002F\u002Frasa.com\u002Fdocs\u002Fcore\u002Fconnectors\u002F#custom-channels)。可以将通道 `rasa_core.channels.socketio` 用作新通道的模板。在此通道中，可以通过 `data['customData']` 获取 `customData`。然后你可以修改 `sender_id`，将 `customData` 保存到数据库，填充槽位，或者根据你的额外数据进行其他操作。\n\n#### Botfront\n\nRasa Webchat 由 [Botfront](https:\u002F\u002Fbotfront.io) 团队开发，并且与 Botfront 配合使用。如果你的机器人是多语言的，请确保在 `customData` 属性中指定当前语言。例如：`customData={{language: 'en'}}`。更多详细信息请参阅 [Botfront 文档](https:\u002F\u002Fbotfront.io\u002Fdocs\u002Fchannels\u002Fwebchat\u002F)。\n\n## 样式\n\n从版本 0.8 开始，我们对所有 CSS 类名添加了前缀。如果你已经为小部件设置了样式，只需在你修改过的所有类名前加上 `rw-` 即可。\n\n层次结构如下：\n```\n.rw-conversation-container\n  |-- .rw-header\n        |-- .rw-title\n        |-- .rw-close-function\n        |-- .rw-loading\n  |-- .rw-messages-container\n        |-- .rw-message\n              |-- .rw-client\n              |-- .rw-response\n        |-- .rw-replies\n              |-- .rw-reply\n              |-- .rw-response\n        |-- .rw-snippet\n              |-- .rw-snippet-title\n              |-- .rw-snippet-details\n              |-- .rw-link\n        |-- .rw-imageFrame\n        |-- .rw-videoFrame\n  |-- .rw-sender\n        |-- .rw-new-message\n        |-- .rw-send\n```\n\n| 类名                   |  描述                                                        |\n|-------------------------|-------------------------------------------------------------|\n| .rw-widget-container       | 默认版本中包含聊天框的 div                                   |\n| .rw-widget-embedded        | 嵌入式聊天框的 div（使用 embedded prop）                     |\n| .rw-full-screen            | 全屏聊天框的 div（使用 fullScreenMode prop）                 |\n| .rw-conversation-container | 包含头部、消息容器和发送区域的父级 div                      |\n| .rw-messages-container     | 消息显示的中心区域                                            |\n| .rw-sender                 | 底部区域的 div，用于提示用户输入                              |\n| .rw-new-message            | 发送区域中的文本输入元素                                      |\n| .rw-send                   | 发送区域中的发送图标元素                                      |\n| .rw-header                 | 包含聊天框头部的顶部区域 div                                  |\n| .rw-title                  | 头部的标题元素                                                |\n| .rw-close-button           | 头部的关闭图标                                                |\n| .rw-loading                | 头部的加载状态元素                                            |\n| .rw-message                | 存放客户消息和回复消息的方框                                  |\n| .rw-replies                | 提供快速回复选项的区域                                        |\n| .rw-snippet                | 用于描述链接的组件                                            |\n| .rw-imageFrame             | 用于发送图片的容器                                            |\n| .rw-videoFrame             | 用于发送视频的容器                                            |\n\n\n## 贡献者\n[@PHLF](https:\u002F\u002Fgithub.com\u002Fphlf)\n[@znat](https:\u002F\u002Fgithub.com\u002Fznat)\n[@TheoTomalty](https:\u002F\u002Fgithub.com\u002FTheoTomalty)\n[@Hub4IT](https:\u002F\u002Fgithub.com\u002FHub4IT)\n[@dliuproduction](https:\u002F\u002Fgithub.com\u002Fdliuproduction)\n[@MatthieuJnon](https:\u002F\u002Fgithub.com\u002FMatthieuJnon)\n[@mofortin](https:\u002F\u002Fgithub.com\u002Fmofortin)\n[@GuillaumeTech](https:\u002F\u002Fgithub.com\u002FGuillaumeTech)\n                                 \n\u003Cbr\u002F>\n\u003Ch2 align=\"center\">许可证\u003C\u002Fh2>\n\n版权所有 © 2021 Dialogue Technologies Inc.\n\n根据 Apache License, Version 2.0（“许可证”）授权；\n除非符合许可证的规定，否则不得使用此文件。\n你可以在以下网址获取许可证副本：\n\n    http:\u002F\u002Fwww.apache.org\u002Flicenses\u002FLICENSE-2.0\n\n除非适用法律要求或书面同意，否则根据“现状”分发的软件，\n不提供任何形式的保证或条件。\n有关权限和限制的具体规定，请参阅许可证。（C）2021 Dialogue Technologies Inc. 版权所有。","# Rasa Webchat 快速上手指南\n\nRasa Webchat 是一个轻量级的聊天窗口组件，用于在任何网站上部署由 **Rasa** 或 **Botfront** 构建的虚拟助手。它支持文本、快速回复、图片、轮播图等多种消息类型，并提供 React 组件和脚本标签两种集成方式。\n\n## 环境准备\n\n*   **后端依赖**：需要已运行且可访问的 Rasa (版本 2.3.x 或 2.4.x 推荐使用 webchat 1.0.1) 或 Botfront 服务器，并确保开启了 Socket.IO 接口。\n*   **前端环境**：\n    *   任意现代浏览器。\n    *   若使用 React 集成方式，需具备 Node.js 和 npm 环境。\n*   **网络要求**：确保前端页面能访问后端 `socketUrl` 地址。\n\n## 安装步骤\n\n根据您的需求选择以下任一集成方式：\n\n### 方式一：通过 `\u003Cscript>` 标签引入（无需构建工具）\n\n直接在 HTML 文件的 `\u003Cbody>` 标签内插入以下代码。此方式适用于静态网站或任何前端项目。\n\n```html\n\u003Cscript>!(function () {\n  let e = document.createElement(\"script\"),\n    t = document.head || document.getElementsByTagName(\"head\")[0];\n  \u002F\u002F 建议指定具体版本号以防止重大更新导致的不兼容，例如 @1.0.0\n  (e.src = \"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Frasa-webchat@1.x.x\u002Flib\u002Findex.js\"),\n  (e.async = !0),\n  (e.onload = () => {\n    window.WebChat.default(\n      {\n        customData: { language: \"en\" },\n        socketUrl: \"https:\u002F\u002Fbf-botfront.development.agents.botfront.cloud\",\n        \u002F\u002F 在此处添加其他配置参数\n      },\n      null\n    );\n  }),\n  t.insertBefore(e, t.firstChild);\n})();\n\u003C\u002Fscript>\n```\n\n> **注意**：请将 `1.x.x` 替换为您需要的具体版本（如 `1.0.1`），并将 `socketUrl` 替换为您自己的 Rasa\u002FBotfront 服务器地址。\n\n### 方式二：作为 React 组件安装\n\n如果您使用的是 React 项目，可以通过 npm 安装：\n\n```bash\nnpm install rasa-webchat\n```\n\n## 基本使用\n\n### 1. 脚本标签模式示例\n\n将以下代码保存为 `index.html` 并在浏览器打开即可看到聊天窗口（请替换 `socketUrl` 为您的实际地址）：\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml>\n\u003Chead>\n  \u003Ctitle>Rasa Webchat Demo\u003C\u002Ftitle>\n\u003C\u002Fhead>\n\u003Cbody>\n  \u003Ch1>我的智能助手\u003C\u002Fh1>\n  \n  \u003Cscript>!(function () {\n    let e = document.createElement(\"script\"),\n      t = document.head || document.getElementsByTagName(\"head\")[0];\n    e.src = \"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Frasa-webchat@1.0.1\u002Flib\u002Findex.js\";\n    e.async = !0;\n    e.onload = () => {\n      window.WebChat.default(\n        {\n          customData: { language: \"zh\" }, \n          socketUrl: \"http:\u002F\u002Flocalhost:5005\", \u002F\u002F 替换为您的 Rasa 服务器地址\n          title: \"AI 助手\",\n          inputTextFieldHint: \"输入消息...\"\n        },\n        null\n      );\n    },\n    t.insertBefore(e, t.firstChild);\n  })();\n  \u003C\u002Fscript>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n### 2. React 组件模式示例\n\n在您的 React 组件文件中引入并使用：\n\n```javascript\nimport Widget from 'rasa-webchat';\n\nfunction CustomWidget = () => {\n  return (\n    \u003CWidget\n      initPayload={\"\u002Fget_started\"}\n      socketUrl={\"http:\u002F\u002Flocalhost:5500\"}\n      socketPath={\"\u002Fsocket.io\u002F\"}\n      customData={{\"language\": \"zh\"}} \n      title={\"欢迎使用助手\"}\n      \u002F\u002F 如果希望嵌入页面而不显示启动按钮，设置 embedded={true}\n      \u002F\u002F embedded={true} \n    \u002F>\n  )\n}\n```\n\n### 核心配置参数说明\n\n| 参数 | 说明 |\n| :--- | :--- |\n| `socketUrl` | **必填**。Rasa 或 Botfront 服务器的 Socket 地址。 |\n| `customData` | 传递给后端的自定义数据对象。若使用 Botfront，必须包含 `{\"language\": \"zh\"}` 等语言标识。 |\n| `initPayload` | 会话开始时自动发送给 Rasa 的指令（如 `\u002Fget_started`）。 |\n| `embedded` | 设为 `true` 可将聊天窗口直接嵌入页面，隐藏右下角的启动按钮，窗口默认常开。 |\n| `title` | 聊天窗口标题栏显示的文本。 |","某电商初创团队正在为其基于 Rasa 构建的智能客服机器人寻找一种能快速嵌入官网、且具备丰富交互能力的聊天界面方案。\n\n### 没有 rasa-webchat 时\n- **开发周期漫长**：前端团队需从零编写聊天窗口组件，处理消息气泡、滚动逻辑及输入框状态，耗费数周时间。\n- **交互体验单一**：仅能展示纯文本回复，无法直接呈现商品图片轮播（Carousels）或快捷按钮（Quick Replies），导致用户转化率低。\n- **会话状态丢失**：用户刷新页面后对话历史清空，缺乏持久化会话支持，迫使客户重复描述问题，体验极差。\n- **集成维护困难**：自定义代码与 Rasa 后端连接不稳定，缺乏智能打字延迟和错误处理机制，调试成本高昂。\n\n### 使用 rasa-webchat 后\n- **极速部署上线**：只需在 HTML 中插入一段 `\u003Cscript>` 标签或作为 React 组件引入，几分钟内即可在官网唤起功能完备的聊天窗口。\n- **丰富交互呈现**：原生支持 Markdown、图片裁剪、商品轮播及快捷回复，机器人能像真人销售一样生动展示商品信息。\n- **无缝连续对话**：内置持久化会话功能，用户刷新页面或切换设备后仍能保留上下文，服务流程不中断。\n- **拟人化沟通细节**：自动添加“正在输入”指示器和消息智能延迟，模拟真实人工客服节奏，显著提升用户信任感。\n\nrasa-webchat 将原本需要数周的前端开发工作压缩至分钟级，同时通过丰富的原生交互组件，让 Rasa 机器人瞬间拥有专业级的用户体验。","https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fbotfront_rasa-webchat_58a77eae.gif","botfront","Botfront","https:\u002F\u002Foss.gittoolsai.com\u002Favatars\u002Fbotfront_0d771e39.png","",null,"hi@botfront.io","https:\u002F\u002Fbotfront.io","https:\u002F\u002Fgithub.com\u002Fbotfront",[84,88,92,96],{"name":85,"color":86,"percentage":87},"JavaScript","#f1e05a",85.1,{"name":89,"color":90,"percentage":91},"SCSS","#c6538c",13.6,{"name":93,"color":94,"percentage":95},"CSS","#663399",0.7,{"name":97,"color":98,"percentage":99},"HTML","#e34c26",0.6,1025,511,"2026-03-24T01:51:38","Apache-2.0","未说明",{"notes":106,"python":104,"dependencies":107},"这是一个前端聊天窗口组件，主要运行在浏览器环境中，无需特定的服务器操作系统、GPU 或大量内存。它通过 WebSocket 连接到后端的 Rasa 或 Botfront 服务。版本 1.0.1 专门适配 Rasa 2.3.x 和 2.4.x，其他 Rasa 版本请使用 1.0.0。可通过 script 标签直接引入或作为 React 组件安装使用。",[108,109,110,111],"React (可选，用于组件模式)","Node.js\u002Fnpm (用于安装依赖)","Rasa (后端服务，版本 2.3.x 或 2.4.x 对应 webchat 1.0.1)","Socket.IO (通信协议)",[15],[114,115,116,117,118,119],"chatbots","rasa-core","chat","webchat","chat-widget","chat-application","2026-03-27T02:49:30.150509","2026-04-06T05:16:34.527703",[123,128,133,138,143,148],{"id":124,"question_zh":125,"answer_zh":126,"source_url":127},13143,"为什么聊天窗口一直显示\"Waiting for server...\"且无法发送消息？","这通常是因为 engineio 更新后需要显式的 CORS（跨域资源共享）配置。请检查您的后端 socketio 配置，确保添加了允许跨域的指令。您可以参考 Botfront 的实现方式，在 socketio 初始化时添加 cors 参数，例如允许所有来源或指定特定域名。此外，确保 Rasa 后端版本与 webchat 插件版本兼容，有时升级到最新版本并应用官方仓库中的 socketio.py 补丁也能解决此问题。","https:\u002F\u002Fgithub.com\u002Fbotfront\u002Frasa-webchat\u002Fissues\u002F91",{"id":129,"question_zh":130,"answer_zh":131,"source_url":132},13144,"如何在检测到特定负载（如人工接管）时动态切换 SocketIO URL？","目前组件不支持直接动态更改 URL 的配置项。一个可行的变通方案是：编写两个独立的初始化函数，第一个连接到 Rasa bot，当接收到特定关键词或负载（如 handoff: true）时，触发第二个函数。第二个函数会动态创建一个新的 script 标签加载 webchat 脚本（或直接调用初始化逻辑），将其连接到新的人工服务 URL（如 Salesforce）。虽然这种方法代码略显冗余，但能实现在前端层面切换后端服务的目的。","https:\u002F\u002Fgithub.com\u002Fbotfront\u002Frasa-webchat\u002Fissues\u002F188",{"id":134,"question_zh":135,"answer_zh":136,"source_url":137},13145,"在 React 项目中集成时遇到\"Unexpected token\"解析错误怎么办？","该错误通常与包管理工具对 JSX 语法的处理有关。如果您使用的是 yarn，尝试切换到 npm 进行安装（npm install rasa-webchat），许多用户反馈在 npm 环境下该问题得以解决。如果必须使用 yarn，请确保您的 webpack 或 babel 配置中包含了正确的 loader 来处理 `.js` 文件中的 JSX 语法。","https:\u002F\u002Fgithub.com\u002Fbotfront\u002Frasa-webchat\u002Fissues\u002F71",{"id":139,"question_zh":140,"answer_zh":141,"source_url":142},13146,"如何在 Rasa Core 的自定义 Action 中获取前端传递的 customData 或 userId？","在前端通过 `customData` 属性传递的数据（如 userId）会被附加到 socket 连接中。要在 Rasa Core 的 Action 中获取这些数据，您需要访问 tracker 对象中的会话信息。通常可以通过 `tracker.get_slot(\"session_id\")` 或者检查 `tracker.sender_id` 来识别用户。如果使用的是较新版本，确保后端正确解析了 socketio 通道传递的元数据。对于旧版本用户，可能需要检查源码确认数据透传机制，或升级至支持该特性的最新版本。","https:\u002F\u002Fgithub.com\u002Fbotfront\u002Frasa-webchat\u002Fissues\u002F42",{"id":144,"question_zh":145,"answer_zh":146,"source_url":147},13147,"在 Gatsby 或其他 SSR 框架中使用 Widget 组件时出现\"Invalid Hook Call\"错误如何解决？","这是由于 Gatsby 的服务端渲染（SSR）机制与 React Hooks 的使用冲突导致的。Widget 组件依赖浏览器环境（如 window 对象）和 Hooks，不能在服务端渲染阶段执行。解决方案是确保该组件仅在客户端加载。您可以使用 `useEffect` 钩子来动态渲染组件，或者利用 Gatsby 的 `typeof window !== 'undefined'` 判断来包裹组件逻辑，确保只在浏览器端实例化 Widget。如果问题依旧，考虑放弃直接在 JSX 中引入组件，转而使用传统的 HTML script 标签方式在 `public` 目录或 `html.js` 中加载。","https:\u002F\u002Fgithub.com\u002Fbotfront\u002Frasa-webchat\u002Fissues\u002F153",{"id":149,"question_zh":150,"answer_zh":151,"source_url":127},13148,"训练 Rasa Core 模型时遇到\"MaxHistoryTrackerFeaturizer is not JSON serializable\"错误怎么办？","这是一个配置序列化问题，通常发生在较旧的 Rasa 版本中。请检查您的 `config.yml` 文件，尝试移除或更新 `featurizer` 部分的嵌套配置。在某些版本中，不需要显式定义 `state_featurizer` 或其内部类。建议参考对应 Rasa 版本的官方文档简化 pipeline 配置，或者直接升级到最新的稳定版 Rasa，新版本通常已修复此类序列化兼容性问题并简化了配置结构。",[153,158,163,168,173,178,182,186,190,194],{"id":154,"version":155,"summary_zh":156,"released_at":157},71800,"0.5.9","修复了 Firefox 上的 CSS Bug","2019-06-06T21:36:10",{"id":159,"version":160,"summary_zh":161,"released_at":162},71801,"0.5.8","将所有 CSS 声明命名空间化，以避免影响组件外部的样式。","2019-05-07T19:16:08",{"id":164,"version":165,"summary_zh":166,"released_at":167},71802,"0.5.7","修复了一个 bug：当组件卸载时，连接无法关闭，导致后台无限期地继续轮询。","2019-04-29T15:04:45",{"id":169,"version":170,"summary_zh":171,"released_at":172},71803,"0.5.6","修复了一个 bug：命名链接在收到的消息中无法正确渲染。","2019-03-06T16:15:03",{"id":174,"version":175,"summary_zh":176,"released_at":177},71804,"0.5.5","`docViewer` 属性：实验性功能  \r\n更多信息请参阅 `CHANGELOG.md` 文件。","2019-02-27T16:07:08",{"id":179,"version":180,"summary_zh":79,"released_at":181},71805,"0.5.4","2019-02-11T19:50:36",{"id":183,"version":184,"summary_zh":79,"released_at":185},71806,"0.5.3","2018-12-21T22:40:43",{"id":187,"version":188,"summary_zh":79,"released_at":189},71807,"0.5.1","2018-12-03T13:56:39",{"id":191,"version":192,"summary_zh":79,"released_at":193},71808,"0.5.0","2018-11-28T19:01:04",{"id":195,"version":196,"summary_zh":79,"released_at":197},71809,"0.4.2","2018-11-14T18:54:25"]