[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"similar-OvidijusParsiunas--deep-chat":3,"tool-OvidijusParsiunas--deep-chat":64},[4,17,27,35,43,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},3808,"stable-diffusion-webui","AUTOMATIC1111\u002Fstable-diffusion-webui","stable-diffusion-webui 是一个基于 Gradio 构建的网页版操作界面，旨在让用户能够轻松地在本地运行和使用强大的 Stable Diffusion 图像生成模型。它解决了原始模型依赖命令行、操作门槛高且功能分散的痛点，将复杂的 AI 绘图流程整合进一个直观易用的图形化平台。\n\n无论是希望快速上手的普通创作者、需要精细控制画面细节的设计师，还是想要深入探索模型潜力的开发者与研究人员，都能从中获益。其核心亮点在于极高的功能丰富度：不仅支持文生图、图生图、局部重绘（Inpainting）和外绘（Outpainting）等基础模式，还独创了注意力机制调整、提示词矩阵、负向提示词以及“高清修复”等高级功能。此外，它内置了 GFPGAN 和 CodeFormer 等人脸修复工具，支持多种神经网络放大算法，并允许用户通过插件系统无限扩展能力。即使是显存有限的设备，stable-diffusion-webui 也提供了相应的优化选项，让高质量的 AI 艺术创作变得触手可及。",162132,3,"2026-04-05T11:01:52",[13,14,15],"开发框架","图像","Agent","ready",{"id":18,"name":19,"github_repo":20,"description_zh":21,"stars":22,"difficulty_score":23,"last_commit_at":24,"category_tags":25,"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,15,26],"语言模型",{"id":28,"name":29,"github_repo":30,"description_zh":31,"stars":32,"difficulty_score":23,"last_commit_at":33,"category_tags":34,"status":16},2271,"ComfyUI","Comfy-Org\u002FComfyUI","ComfyUI 是一款功能强大且高度模块化的视觉 AI 引擎，专为设计和执行复杂的 Stable Diffusion 图像生成流程而打造。它摒弃了传统的代码编写模式，采用直观的节点式流程图界面，让用户通过连接不同的功能模块即可构建个性化的生成管线。\n\n这一设计巧妙解决了高级 AI 绘图工作流配置复杂、灵活性不足的痛点。用户无需具备编程背景，也能自由组合模型、调整参数并实时预览效果，轻松实现从基础文生图到多步骤高清修复等各类复杂任务。ComfyUI 拥有极佳的兼容性，不仅支持 Windows、macOS 和 Linux 全平台，还广泛适配 NVIDIA、AMD、Intel 及苹果 Silicon 等多种硬件架构，并率先支持 SDXL、Flux、SD3 等前沿模型。\n\n无论是希望深入探索算法潜力的研究人员和开发者，还是追求极致创作自由度的设计师与资深 AI 绘画爱好者，ComfyUI 都能提供强大的支持。其独特的模块化架构允许社区不断扩展新功能，使其成为当前最灵活、生态最丰富的开源扩散模型工具之一，帮助用户将创意高效转化为现实。",107662,"2026-04-03T11:11:01",[13,14,15],{"id":36,"name":37,"github_repo":38,"description_zh":39,"stars":40,"difficulty_score":23,"last_commit_at":41,"category_tags":42,"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,26],{"id":44,"name":45,"github_repo":46,"description_zh":47,"stars":48,"difficulty_score":23,"last_commit_at":49,"category_tags":50,"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",[14,51,52,53,15,54,26,13,55],"数据工具","视频","插件","其他","音频",{"id":57,"name":58,"github_repo":59,"description_zh":60,"stars":61,"difficulty_score":10,"last_commit_at":62,"category_tags":63,"status":16},3128,"ragflow","infiniflow\u002Fragflow","RAGFlow 是一款领先的开源检索增强生成（RAG）引擎，旨在为大语言模型构建更精准、可靠的上下文层。它巧妙地将前沿的 RAG 技术与智能体（Agent）能力相结合，不仅支持从各类文档中高效提取知识，还能让模型基于这些知识进行逻辑推理和任务执行。\n\n在大模型应用中，幻觉问题和知识滞后是常见痛点。RAGFlow 通过深度解析复杂文档结构（如表格、图表及混合排版），显著提升了信息检索的准确度，从而有效减少模型“胡编乱造”的现象，确保回答既有据可依又具备时效性。其内置的智能体机制更进一步，使系统不仅能回答问题，还能自主规划步骤解决复杂问题。\n\n这款工具特别适合开发者、企业技术团队以及 AI 研究人员使用。无论是希望快速搭建私有知识库问答系统，还是致力于探索大模型在垂直领域落地的创新者，都能从中受益。RAGFlow 提供了可视化的工作流编排界面和灵活的 API 接口，既降低了非算法背景用户的上手门槛，也满足了专业开发者对系统深度定制的需求。作为基于 Apache 2.0 协议开源的项目，它正成为连接通用大模型与行业专有知识之间的重要桥梁。",77062,"2026-04-04T04:44:48",[15,14,13,26,54],{"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":80,"owner_email":81,"owner_twitter":82,"owner_website":79,"owner_url":83,"languages":84,"stars":124,"forks":125,"last_commit_at":126,"license":127,"difficulty_score":128,"env_os":129,"env_gpu":130,"env_ram":130,"env_deps":131,"category_tags":136,"github_topics":137,"view_count":23,"oss_zip_url":79,"oss_zip_packed_at":79,"status":16,"created_at":158,"updated_at":159,"faqs":160,"releases":189},3346,"OvidijusParsiunas\u002Fdeep-chat","deep-chat","Fully customizable AI chatbot component for your website","deep-chat 是一款专为网站打造的高度可定制化 AI 聊天组件，开发者只需嵌入一行代码，即可快速集成智能对话功能。它有效解决了传统聊天机器人开发中接口对接复杂、交互形式单一以及多端适配困难等痛点，让构建专业级对话界面变得简单高效。\n\n这款工具非常适合前端开发者、全栈工程师以及希望为产品快速添加 AI 能力的团队使用。其核心亮点在于强大的连接能力，支持直接从浏览器对接 OpenAI、Claude 等超过 20 种主流 AI 服务，也允许连接自定义后端或直接在浏览器端运行模型。在交互体验上，deep-chat 不仅支持文本，还原生具备文件传输、 webcam 拍照、麦克风录音及语音互转等丰富功能，并能完美渲染 Markdown 与代码块。此外，它兼容各类主流 UI 框架，提供从头像设置到加载动画的全方位自定义选项，近期更新更引入了专注模式和本地存储优化，确保用户能获得流畅且个性化的对话体验。","\u003Cbr \u002F>\n\n![Deep Chat](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_readme_1e3912faa67d.png)\n\n\u003Cb>Deep Chat\u003C\u002Fb> is a fully customizable AI chat component that can be injected into your website with just _one line of code_. Whether you want to create a chatbot that leverages popular APIs such as ChatGPT or connect to your own custom service, this component can do it all! Explore [deepchat.dev](https:\u002F\u002Fdeepchat.dev\u002F) to view all of the available features, how to use them, examples and more!\n\n### :rocket: Main Features\n\n- Connect to any API\n- Avatars\n- Names\n- Send\u002FReceive files\n- Capture photos via webcam\n- Record audio via microphone\n- Speech To Speech communication\n- Speech To Text for message input\n- Text To Speech to hear message responses\n- Support for MarkDown and custom elements to help structure text and render code\n- Introduction panel and dynamic modals to help describe functionality for your users\n- Connect to more than 20 popular AI APIs such as OpenAI or Claude directly from the browser\n- Communicate with Speech to Speech models\n- Support for all major ui frameworks\u002Flibraries\n- Host a model on the browser\n- Focus mode to only display the latest messages\n- Everything is customizable!\n\n### :tada: Latest Updates\n\nDeep Chat version `2.4.0` brings a ton of new features into the Deep Chat ecosystem:\n\n- New [`scrollButton`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmessages\u002F#scrollButton) and [`hiddenMessages`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmessages\u002F#hiddenMessages) components used to enhance UX in long conversations!\n- [`upwardsMode`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmodes#upwardsMode) can be used to populate messages upwards.\n- [`directConnection`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002FdirectConnection) now supports [`Open WebUI`](https:\u002F\u002Fdocs.openwebui.com\u002F).\n- [`browserStoarage`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmessages\u002F#browserStorage) can now store `inputText` and `scrollHeight` values for better session recovery experience.\n- See [release notes](https:\u002F\u002Fgithub.com\u002FOvidijusParsiunas\u002Fdeep-chat\u002Freleases\u002Ftag\u002F2.4.0) for more!\n\n\u003Cp align=\"center\">\n \u003Cimg width=\"960\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_readme_7d43cabbc198.png\" alt=\"version 2.4.0\">\n\u003C\u002Fp>\n\n`2.3.0` update:\n\n- [`directConnection`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002FdirectConnection) now supports more than 20 AI APIs!\n- [`htmlWrappers`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmessages\u002F#browserStorage) can now be used to standardize custom styling for all messages.\n- You can now use custom plugins for [remarkable](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmessages\u002Fstyles#remarkable) such as [Katex](https:\u002F\u002Fkatex.org\u002F).\n- Change the loading bubble style via the `toggle` function in [`displayLoadingBubble`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmessages\u002F#displayLoadingBubble).\n- See [release notes](https:\u002F\u002Fgithub.com\u002FOvidijusParsiunas\u002Fdeep-chat\u002Freleases\u002Ftag\u002F2.3.0) for more!\n\n\u003Cp align=\"center\">\n \u003Cimg width=\"960\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_readme_efdf5bc92ff7.png\" alt=\"version 2.3.0\">\n\u003C\u002Fp>\n\n`2.2.2` update:\n\n- [`browserStorage`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmessages\u002F#browserStorage) allows you to store messages locally on your browser without worrying about a backend message integration.\n- Button [tooltips](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fstyles\u002Fbuttons#Tooltip).\n- Place your streamed messages inside custom [`htmlWrappers`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmessages\u002FHTML#htmlWrappers).\n- See [release notes](https:\u002F\u002Fgithub.com\u002FOvidijusParsiunas\u002Fdeep-chat\u002Freleases\u002Ftag\u002F2.2.2) for more!\n\n\u003Cp align=\"center\">\n \u003Cimg width=\"960\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_readme_e2cd81fb440a.png\" alt=\"version 2.2.2\">\n\u003C\u002Fp>\n\n`2.2.0` update:\n\n- [OpenAI Realtime API](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002FdirectConnection\u002FOpenAI\u002FOpenAIRealtime) for Speech to Speech communication\n- [Focus mode](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmodes#focusMode) to only display the latest message exchanges and provide a modern AI Chatbot experience\n- [Custom buttons](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fstyles\u002Fbuttons#customButtons)\n- A [Response](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fconnect#Response) can now have multiple messages\n- Ability to connect to [Readable Stream APIs](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fconnect#Stream)\n- See [release notes](https:\u002F\u002Fgithub.com\u002FOvidijusParsiunas\u002Fdeep-chat\u002Freleases\u002Ftag\u002F2.2.0) for more!\n\n\u003Cp align=\"center\">\n \u003Cimg width=\"1000\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_readme_50b0084f61be.png\" alt=\"version 2.2.0\">\n\u003C\u002Fp>\n\n### :computer: Getting started\n\n```\nnpm install deep-chat\n```\n\nIf using React, install the following instead:\n\n```\nnpm install deep-chat-react\n```\n\nSimply add the following to your markup:\n\n```\n\u003Cdeep-chat>\u003C\u002Fdeep-chat>\n```\n\nThe exact syntax for the above will vary depending on the framework of your choice ([see here](https:\u002F\u002Fdeepchat.dev\u002Fexamples\u002Fframeworks)).\n\n### :computer: Install with AI\n\nUse the [llms.txt](https:\u002F\u002Fgithub.com\u002FOvidijusParsiunas\u002Fdeep-chat\u002Fblob\u002Fmain\u002Fllms.txt) file as a reference for installing and configuring Deep Chat with your code assistant:\n\n```\n\"Use https:\u002F\u002Fgithub.com\u002FOvidijusParsiunas\u002Fdeep-chat\u002Fblob\u002Fmain\u002Fllms.txt to add a chat component to my website.\"\n```\n\n### :zap: Connect\n\n![Connect](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_readme_ed3340707bef.png)\n\nConnecting to a service is simple, all you need to do is define its API details using the [`request`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fconnect#request) property:\n\n```\n\u003Cdeep-chat request='{\"url\":\"https:\u002F\u002Fservice.com\u002Fchat\"}'\u002F>\n```\n\nThe service will need to be able to handle request and response formats used in Deep Chat. Please read the [Connect](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fconnect) section in documentation and check out the [server template](https:\u002F\u002Fdeepchat.dev\u002Fexamples\u002Fservers) examples.\n\nAlternatively, if you want to connect without changing the target service, use the [`interceptor`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Finterceptors) properties to augment the transferred objects or the [`handler`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fconnect#Handler) function to control the request code.\n\n### :electric_plug: Direct connection\n\n![Direct connection](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_readme_d1b99ffcedd4.png)\n\nConnect to popular AI APIs directly from the browser via the use of the [`directConnection`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002FdirectConnection\u002F#directConnection) property:\n\n```\n\u003Cdeep-chat directConnection='{\"openAI\":true}'\u002F>\n\n\u003Cdeep-chat directConnection='{\"openAI\":{\"key\": \"optional-key-here\"}}'\u002F>\n```\n\nPlease note that this approach should be used for local\u002Fprototyping\u002Fdemo purposes ONLY as it exposes the API Key to the browser. When ready to go live, please switch to using the [`connect`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fconnect#connect-1) property described above along with a [proxy service](https:\u002F\u002Fgithub.com\u002FOvidijusParsiunas\u002Fdeep-chat\u002Ftree\u002Fmain\u002Fexample-servers).\n\n### :robot: Web model\n\n![Web Model](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_readme_8d9ee11ae5d3.png)\n\nNo servers, no connections, host an LLM model entirely on your browser.\n\nSimply add the [deep-chat-web-llm](https:\u002F\u002Fdeepchat.dev\u002Fexamples\u002FexternalModules) module and define the [webModel](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002FwebModel) property:\n\n```\n\u003Cdeep-chat webModel=\"true\" \u002F>\n```\n\n### :camera: :microphone: Camera and Microphone\n\n![Capture](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_readme_841598e7ef5a.png)\n\nUse Deep Chat to capture photos with your webcam and record audio with the microphone. You can enable this using the [`camera`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Ffiles#camera) and [`microphone`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Ffiles#microphone) properties:\n\n```\n\u003Cdeep-chat camera=\"true\" microphone=\"true\" ...other properties \u002F>\n```\n\n### :microphone: :sound: Speech\n\nhttps:\u002F\u002Fgithub.com\u002FOvidijusParsiunas\u002Fdeep-chat\u002Fassets\u002F18709577\u002Fe103a42e-b3a7-4449-b9db-73fed6d7876e\n\nInput text with your voice using Speech To Text capabilities and have the responses read out to you with Text To Speech. You can enable this functionality via the [`speechToText`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fspeech#speechToText) and [`textToSpeech`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fspeech#textToSpeech) properties.\n\n```\n\u003Cdeep-chat speechToText=\"true\" textToSpeech=\"true\" ...other properties \u002F>\n```\n\n### :beginner: Examples\n\nCheck out live codepen examples for your [UI framework\u002Flibrary](https:\u002F\u002Fdeepchat.dev\u002Fexamples\u002Fframeworks) of choice:\n\n| React | Vue 2 | Vue 3 | Svelte | SvelteKit | Angular | Solid | Next | Nuxt | VanillaJS |\n| ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| \u003Ca href=\"https:\u002F\u002Fstackblitz.com\u002Fedit\u002Fdeep-chat-react?file=src%2FApp.tsx\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_readme_8aa50b5f22e2.png\" width=\"60\"\u002F>\u003C\u002Fa> | \u003Ca href=\"https:\u002F\u002Fcodesandbox.io\u002Fs\u002Fdeep-chat-vue2-cdqpt2?file=\u002Fsrc\u002FApp.vue\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_readme_cf23526f4517.png\" width=\"60\"\u002F>\u003C\u002Fa> | \u003Ca href=\"https:\u002F\u002Fstackblitz.com\u002Fedit\u002Fdeep-chat-vue3?file=src%2FApp.vue\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_readme_cf23526f4517.png\" width=\"60\"\u002F>\u003C\u002Fa> | \u003Ca href=\"https:\u002F\u002Fstackblitz.com\u002Fedit\u002Fdeep-chat-svelte?file=src%2FApp.svelte\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_readme_b1653c365a93.png\" width=\"45\"\u002F>\u003C\u002Fa> | \u003Cdiv align=\"center\">\u003Ca href=\"https:\u002F\u002Fstackblitz.com\u002Fedit\u002Fdeep-chat-sveltekit?file=src%2Froutes%2F%2Bpage.svelte\" target=\"_blank\" >\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_readme_b1653c365a93.png\" width=\"45\"\u002F>\u003C\u002Fa>\u003C\u002Fdiv> | \u003Ca href=\"https:\u002F\u002Fstackblitz.com\u002Fedit\u002Fstackblitz-starters-7gygrp?file=src%2Fapp%2Fapp.component.ts\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_readme_9db278d630f5.png\" width=\"66\"\u002F>\u003C\u002Fa> | \u003Ca href=\"https:\u002F\u002Fstackblitz.com\u002Fedit\u002Fdeep-chat-solid?file=src%2FApp.tsx\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_readme_6e0f1b80b4d4.png\" width=\"60\"\u002F>\u003C\u002Fa> | \u003Ca href=\"https:\u002F\u002Fdeepchat.dev\u002Fexamples\u002Fframeworks#next\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_readme_d2d77da8ca98.png\" width=\"60\"\u002F>\u003C\u002Fa> | \u003Ca href=\"https:\u002F\u002Fstackblitz.com\u002Fedit\u002Fnuxt-starter-vwz6pg?file=app.vue\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_readme_ae869807933b.png\" width=\"70\"\u002F>\u003C\u002Fa> | \u003Ca href=\"https:\u002F\u002Fcodesandbox.io\u002Fs\u002Fdeep-chat-vanillajs-v2ywnv?file=\u002Findex.html\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_readme_0cded3a32764.png\" width=\"60\"\u002F>\u003C\u002Fa> |\n\nSetting up your own server has never been easier with the following [server templates](https:\u002F\u002Fdeepchat.dev\u002Fexamples\u002Fservers). From creating your own service to establishing proxies for other APIs such as OpenAI, everything has been documented with clear examples to get you up and running in seconds:\n\n| Express | Nest | Flask | Spring | Go | SvelteKit | Next |\n| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FOvidijusParsiunas\u002Fdeep-chat\u002Ftree\u002Fmain\u002Fexample-servers\u002Fnode\u002Fexpress\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_readme_191dc5e93bbd.png\" width=\"60\"\u002F>\u003C\u002Fa> | \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FOvidijusParsiunas\u002Fdeep-chat\u002Ftree\u002Fmain\u002Fexample-servers\u002Fnode\u002Fnestjs\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_readme_e08d4f52c2b6.png\" width=\"60\"\u002F>\u003C\u002Fa> | \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FOvidijusParsiunas\u002Fdeep-chat\u002Ftree\u002Fmain\u002Fexample-servers\u002Fpython\u002Fflask\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_readme_a2d04101e77a.png\" width=\"60\"\u002F>\u003C\u002Fa> | \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FOvidijusParsiunas\u002Fdeep-chat\u002Ftree\u002Fmain\u002Fexample-servers\u002Fjava\u002Fspringboot\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_readme_ccd192d38a11.png\" width=\"50\"\u002F>\u003C\u002Fa> | \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FOvidijusParsiunas\u002Fdeep-chat\u002Ftree\u002Fmain\u002Fexample-servers\u002Fgo\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_readme_7c5ebc1209d8.png\" width=\"40\"\u002F>\u003C\u002Fa> | \u003Cdiv align=\"center\">\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FOvidijusParsiunas\u002Fdeep-chat\u002Ftree\u002Fmain\u002Fexample-servers\u002Fsveltekit\" target=\"_blank\" >\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_readme_b1653c365a93.png\" width=\"45\"\u002F>\u003C\u002Fa>\u003C\u002Fdiv> | \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FOvidijusParsiunas\u002Fdeep-chat\u002Ftree\u002Fmain\u002Fexample-servers\u002Fnextjs\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_readme_d2d77da8ca98.png\" width=\"55\"\u002F>\u003C\u002Fa> |\n\nAll examples are ready to be deployed on a hosting platform such as [Vercel](https:\u002F\u002Fvercel.com\u002F).\n\n## :tv: Tutorials\n\nDemo videos are available on [YouTube](https:\u002F\u002Fwww.youtube.com\u002F@ovi-il4rg\u002Fvideos):\n\n\u003Cp align=\"center\">\n \u003Ca href=\"https:\u002F\u002Fwww.youtube.com\u002F@ovi-il4rg\u002Fvideos\">\n \u003Cimg width=\"1000\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_readme_db238b426b89.png\" alt=\"Videos\">\n \u003C\u002Fa>\n\u003C\u002Fp>\n\n## :joystick: Playground\n\nCreate, configure and use Deep Chat components without writing any code in the official [Playground](https:\u002F\u002Fdeepchat.dev\u002Fplayground)!\n\n\u003Cp align=\"center\">\n \u003Cimg width=\"750\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_readme_5182fef8a7fa.png\" alt=\"Playground\">\n\u003C\u002Fp>\n\n:tada: \u003Cb>Update\u003C\u002Fb> - components can now be stretched to full screen dimensions using the new \u003Cb>Expanded View\u003C\u002Fb>:\n\n\u003Cp align=\"center\">\n \u003Cimg width=\"750\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_readme_db9a3759d380.png\" alt=\"Expanded View\">\n\u003C\u002Fp>\n\n## :heart: Contributions\n\nOpen source is built by the community for the community. All contributions to this project are welcome!\u003Cbr>\nAdditionally, if you have any suggestions for enhancements, ideas on how to take the project further or have discovered a bug, do not hesitate to create a new issue ticket and we will look into it as soon as possible!\n","\u003Cbr \u002F>\n\n![Deep Chat](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_readme_1e3912faa67d.png)\n\n\u003Cb>Deep Chat\u003C\u002Fb> 是一个完全可定制的 AI 聊天组件，只需 _一行代码_ 即可轻松注入到您的网站中。无论您是想创建一个基于 ChatGPT 等热门 API 的聊天机器人，还是连接到您自己的自定义服务，这个组件都能满足您的需求！请访问 [deepchat.dev](https:\u002F\u002Fdeepchat.dev\u002F) 查看所有可用功能、使用方法、示例等内容！\n\n### :rocket: 主要特性\n\n- 可连接任意 API\n- 支持头像和昵称\n- 支持文件发送与接收\n- 通过摄像头拍摄照片\n- 通过麦克风录制音频\n- 支持语音到语音的交流\n- 支持语音转文本输入消息\n- 支持文本转语音朗读回复消息\n- 内置 MarkDown 和自定义元素支持，便于文本排版和代码渲染\n- 提供介绍面板和动态弹窗，帮助向用户说明功能\n- 直接从浏览器连接超过 20 种热门 AI API，如 OpenAI 或 Claude\n- 支持语音到语音模型的交互\n- 兼容主流 UI 框架和库\n- 在浏览器端部署模型\n- 聚焦模式，仅显示最新消息\n- 所有内容均可自定义！\n\n### :tada: 最新更新\n\nDeep Chat `2.4.0` 版本为生态系统带来了大量新特性：\n\n- 新增 [`scrollButton`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmessages\u002F#scrollButton) 和 [`hiddenMessages`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmessages\u002F#hiddenMessages) 组件，用于优化长对话场景下的用户体验！\n- [`upwardsMode`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmodes#upwardsMode) 可用于向上填充消息。\n- [`directConnection`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002FdirectConnection) 现在支持 [`Open WebUI`](https:\u002F\u002Fdocs.openwebui.com\u002F)。\n- [`browserStorage`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmessages\u002F#browserStorage) 现在可以存储 `inputText` 和 `scrollHeight` 值，从而提升会话恢复体验。\n- 更多详情请参阅 [发布说明](https:\u002F\u002Fgithub.com\u002FOvidijusParsiunas\u002Fdeep-chat\u002Freleases\u002Ftag\u002F2.4.0)！\n\n\u003Cp align=\"center\">\n \u003Cimg width=\"960\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_readme_7d43cabbc198.png\" alt=\"版本 2.4.0\">\n\u003C\u002Fp>\n\n`2.3.0` 更新：\n\n- [`directConnection`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002FdirectConnection) 现在支持超过 20 种 AI API！\n- [`htmlWrappers`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmessages\u002F#browserStorage) 现在可用于为所有消息统一自定义样式。\n- 您现在可以为 [remarkable](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmessages\u002Fstyles#remarkable) 使用自定义插件，例如 [Katex](https:\u002F\u002Fkatex.org\u002F)。\n- 通过 [`displayLoadingBubble`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmessages\u002F#displayLoadingBubble) 中的 `toggle` 函数，可更改加载气泡的样式。\n- 更多详情请参阅 [发布说明](https:\u002F\u002Fgithub.com\u002FOvidijusParsiunas\u002Fdeep-chat\u002Freleases\u002Ftag\u002F2.3.0)！\n\n\u003Cp align=\"center\">\n \u003Cimg width=\"960\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_readme_efdf5bc92ff7.png\" alt=\"版本 2.3.0\">\n\u003C\u002Fp>\n\n`2.2.2` 更新：\n\n- [`browserStorage`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmessages\u002F#browserStorage) 允许您在浏览器本地存储消息，无需担心后端消息集成问题。\n- 按钮 [tooltips](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fstyles\u002Fbuttons#Tooltip)。\n- 将流式传输的消息放入自定义 [`htmlWrappers`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmessages\u002FHTML#htmlWrappers) 中。\n- 更多详情请参阅 [发布说明](https:\u002F\u002Fgithub.com\u002FOvidijusParsiunas\u002Fdeep-chat\u002Freleases\u002Ftag\u002F2.2.2)！\n\n\u003Cp align=\"center\">\n \u003Cimg width=\"960\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_readme_e2cd81fb440a.png\" alt=\"版本 2.2.2\">\n\u003C\u002Fp>\n\n`2.2.0` 更新：\n\n- 支持 [OpenAI Realtime API](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002FdirectConnection\u002FOpenAI\u002FOpenAIRealtime) 进行语音到语音交流\n- [聚焦模式](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmodes#focusMode) 只显示最新的消息交互，带来现代化的 AI 聊天机器人体验\n- [自定义按钮](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fstyles\u002Fbuttons#customButtons)\n- [Response](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fconnect#Response) 现在可以包含多条消息\n- 能够连接到 [Readable Stream APIs](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fconnect#Stream)\n- 更多详情请参阅 [发布说明](https:\u002F\u002Fgithub.com\u002FOvidijusParsiunas\u002Fdeep-chat\u002Freleases\u002Ftag\u002F2.2.0)！\n\n\u003Cp align=\"center\">\n \u003Cimg width=\"1000\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_readme_50b0084f61be.png\" alt=\"版本 2.2.0\">\n\u003C\u002Fp>\n\n### :computer: 快速开始\n\n```\nnpm install deep-chat\n```\n\n如果您使用的是 React，请安装以下包：\n\n```\nnpm install deep-chat-react\n```\n\n然后在您的 HTML 中添加如下代码即可：\n\n```\n\u003Cdeep-chat>\u003C\u002Fdeep-chat>\n```\n\n具体语法会根据您选择的框架有所不同（[请参阅此处](https:\u002F\u002Fdeepchat.dev\u002Fexamples\u002Fframeworks)）。\n\n### :computer: 使用 AI 安装\n\n您可以参考 [llms.txt](https:\u002F\u002Fgithub.com\u002FOvidijusParsiunas\u002Fdeep-chat\u002Fblob\u002Fmain\u002Fllms.txt) 文件，利用代码助手快速安装并配置 Deep Chat：\n\n```\n\"请使用 https:\u002F\u002Fgithub.com\u002FOvidijusParsiunas\u002Fdeep-chat\u002Fblob\u002Fmain\u002Fllms.txt 将聊天组件添加到我的网站。\"\n```\n\n### :zap: 连接\n\n![Connect](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_readme_ed3340707bef.png)\n\n连接服务非常简单，您只需使用 [`request`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fconnect#request) 属性定义 API 的详细信息：\n\n```\n\u003Cdeep-chat request='{\"url\":\"https:\u002F\u002Fservice.com\u002Fchat\"}'\u002F>\n```\n\n请注意，该服务需要能够处理 Deep Chat 使用的请求和响应格式。请阅读文档中的 [Connect](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fconnect) 部分，并查看 [服务器模板](https:\u002F\u002Fdeepchat.dev\u002Fexamples\u002Fservers) 示例。\n\n此外，如果您不想修改目标服务，也可以使用 [`interceptor`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Finterceptors) 属性来增强传递的对象，或者使用 [`handler`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fconnect#Handler) 函数来控制请求逻辑。\n\n### :electric_plug: 直接连接\n\n![Direct connection](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_readme_d1b99ffcedd4.png)\n\n您可以通过 [`directConnection`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002FdirectConnection\u002F#directConnection) 属性直接从浏览器连接热门 AI API：\n\n```\n\u003Cdeep-chat directConnection='{\"openAI\":true}'\u002F>\n\n\u003Cdeep-chat directConnection='{\"openAI\":{\"key\": \"optional-key-here\"}}'\u002F>\n```\n\n请注意，这种方法仅适用于本地开发、原型设计或演示场景，因为它会将 API 密钥暴露在浏览器中。正式上线时，请改用上述描述的 [`connect`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fconnect#connect-1) 属性，并配合 [代理服务](https:\u002F\u002Fgithub.com\u002FOvidijusParsiunas\u002Fdeep-chat\u002Ftree\u002Fmain\u002Fexample-servers) 使用。\n\n### :robot: 网页模型\n\n![网页模型](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_readme_8d9ee11ae5d3.png)\n\n无需服务器，无需连接，即可在您的浏览器中完全托管一个大语言模型。\n\n只需添加 [deep-chat-web-llm](https:\u002F\u002Fdeepchat.dev\u002Fexamples\u002FexternalModules) 模块，并定义 [webModel](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002FwebModel) 属性：\n\n```\n\u003Cdeep-chat webModel=\"true\" \u002F>\n```\n\n### :camera: :microphone: 摄像头与麦克风\n\n![捕获](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_readme_841598e7ef5a.png)\n\n使用 Deep Chat 通过网络摄像头拍摄照片，并用麦克风录制音频。您可以通过 [`camera`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Ffiles#camera) 和 [`microphone`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Ffiles#microphone) 属性来启用此功能：\n\n```\n\u003Cdeep-chat camera=\"true\" microphone=\"true\" ...其他属性 \u002F>\n```\n\n### :microphone: :sound: 语音\n\nhttps:\u002F\u002Fgithub.com\u002FOvidijusParsiunas\u002Fdeep-chat\u002Fassets\u002F18709577\u002Fe103a42e-b3a7-4449-b9db-73fed6d7876e\n\n利用语音转文本功能，通过语音输入文本，并让系统通过文本转语音功能将回复朗读给您听。您可以通过 [`speechToText`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fspeech#speechToText) 和 [`textToSpeech`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fspeech#textToSpeech) 属性来启用此功能。\n\n```\n\u003Cdeep-chat speechToText=\"true\" textToSpeech=\"true\" ...其他属性 \u002F>\n```\n\n### :beginner: 示例\n\n查看针对您所选 [UI 框架\u002F库](https:\u002F\u002Fdeepchat.dev\u002Fexamples\u002Fframeworks) 的实时 CodePen 示例：\n\n| React | Vue 2 | Vue 3 | Svelte | SvelteKit | Angular | Solid | Next | Nuxt | VanillaJS |\n| ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| \u003Ca href=\"https:\u002F\u002Fstackblitz.com\u002Fedit\u002Fdeep-chat-react?file=src%2FApp.tsx\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_readme_8aa50b5f22e2.png\" width=\"60\"\u002F>\u003C\u002Fa> | \u003Ca href=\"https:\u002F\u002Fcodesandbox.io\u002Fs\u002Fdeep-chat-vue2-cdqpt2?file=\u002Fsrc\u002FApp.vue\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_readme_cf23526f4517.png\" width=\"60\"\u002F>\u003C\u002Fa> | \u003Ca href=\"https:\u002F\u002Fstackblitz.com\u002Fedit\u002Fdeep-chat-vue3?file=src%2FApp.vue\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_readme_cf23526f4517.png\" width=\"60\"\u002F>\u003C\u002Fa> | \u003Ca href=\"https:\u002F\u002Fstackblitz.com\u002Fedit\u002Fdeep-chat-svelte?file=src%2FApp.svelte\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_readme_b1653c365a93.png\" width=\"45\"\u002F>\u003C\u002Fa> | \u003Cdiv align=\"center\">\u003Ca href=\"https:\u002F\u002Fstackblitz.com\u002Fedit\u002Fdeep-chat-sveltekit?file=src%2Froutes%2F%2Bpage.svelte\" target=\"_blank\" >\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_readme_b1653c365a93.png\" width=\"45\"\u002F>\u003C\u002Fa>\u003C\u002Fdiv> | \u003Ca href=\"https:\u002F\u002Fstackblitz.com\u002Fedit\u002Fstackblitz-starters-7gygrp?file=src%2Fapp%2Fapp.component.ts\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_readme_9db278d630f5.png\" width=\"66\"\u002F>\u003C\u002Fa> | \u003Ca href=\"https:\u002F\u002Fstackblitz.com\u002Fedit\u002Fdeep-chat-solid?file=src%2FApp.tsx\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_readme_6e0f1b80b4d4.png\" width=\"60\"\u002F>\u003C\u002Fa> | \u003Ca href=\"https:\u002F\u002Fdeepchat.dev\u002Fexamples\u002Fframeworks#next\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_readme_d2d77da8ca98.png\" width=\"60\"\u002F>\u003C\u002Fa> | \u003Ca href=\"https:\u002F\u002Fstackblitz.com\u002Fedit\u002Fnuxt-starter-vwz6pg?file=app.vue\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_readme_ae869807933b.png\" width=\"70\"\u002F>\u003C\u002Fa> | \u003Ca href=\"https:\u002F\u002Fcodesandbox.io\u002Fs\u002Fdeep-chat-vanillajs-v2ywnv?file=\u002Findex.html\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_readme_0cded3a32764.png\" width=\"60\"\u002F>\u003C\u002Fa> |\n\n借助以下 [服务器模板](https:\u002F\u002Fdeepchat.dev\u002Fexamples\u002Fservers)，搭建您自己的服务器从未如此简单。从创建您自己的服务到为 OpenAI 等其他 API 设置代理，所有内容都配有清晰的示例说明，让您在几秒钟内即可快速上手：\n\n| Express | Nest | Flask | Spring | Go | SvelteKit | Next |\n| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FOvidijusParsiunas\u002Fdeep-chat\u002Ftree\u002Fmain\u002Fexample-servers\u002Fnode\u002Fexpress\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_readme_191dc5e93bbd.png\" width=\"60\"\u002F>\u003C\u002Fa> | \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FOvidijusParsiunas\u002Fdeep-chat\u002Ftree\u002Fmain\u002Fexample-servers\u002Fnode\u002Fnestjs\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_readme_e08d4f52c2b6.png\" width=\"60\"\u002F>\u003C\u002Fa> | \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FOvidijusParsiunas\u002Fdeep-chat\u002Ftree\u002Fmain\u002Fexample-servers\u002Fpython\u002Fflask\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_readme_a2d04101e77a.png\" width=\"60\"\u002F>\u003C\u002Fa> | \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FOvidijusParsiunas\u002Fdeep-chat\u002Ftree\u002Fmain\u002Fexample-servers\u002Fjava\u002Fspringboot\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_readme_ccd192d38a11.png\" width=\"50\"\u002F>\u003C\u002Fa> | \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FOvidijusParsiunas\u002Fdeep-chat\u002Ftree\u002Fmain\u002Fexample-servers\u002Fgo\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_readme_7c5ebc1209d8.png\" width=\"40\"\u002F>\u003C\u002Fa> | \u003Cdiv align=\"center\">\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FOvidijusParsiunas\u002Fdeep-chat\u002Ftree\u002Fmain\u002Fexample-servers\u002Fsveltekit\" target=\"_blank\" >\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_readme_b1653c365a93.png\" width=\"45\"\u002F>\u003C\u002Fa>\u003C\u002Fdiv> | \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FOvidijusParsiunas\u002Fdeep-chat\u002Ftree\u002Fmain\u002Fexample-servers\u002Fnextjs\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_readme_d2d77da8ca98.png\" width=\"55\"\u002F>\u003C\u002Fa> |\n\n所有示例都已准备好部署到诸如 [Vercel](https:\u002F\u002Fvercel.com\u002F) 之类的托管平台上。\n\n\n\n## :tv: 教程\n\n演示视频可在 [YouTube](https:\u002F\u002Fwww.youtube.com\u002F@ovi-il4rg\u002Fvideos) 上找到：\n\n\u003Cp align=\"center\">\n \u003Ca href=\"https:\u002F\u002Fwww.youtube.com\u002F@ovi-il4rg\u002Fvideos\">\n \u003Cimg width=\"1000\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_readme_db238b426b89.png\" alt=\"视频\">\n \u003C\u002Fa>\n\u003C\u002Fp>\n\n## :joystick: 演示平台\n\n在官方的 [Playground](https:\u002F\u002Fdeepchat.dev\u002Fplayground) 中，无需编写任何代码即可创建、配置和使用 Deep Chat 组件！\n\n\u003Cp align=\"center\">\n \u003Cimg width=\"750\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_readme_5182fef8a7fa.png\" alt=\"Playground\">\n\u003C\u002Fp>\n\n:tada: \u003Cb>更新\u003C\u002Fb> - 现在可以使用新的 \u003Cb>展开视图\u003C\u002Fb>将组件拉伸至全屏尺寸：\n\n\u003Cp align=\"center\">\n \u003Cimg width=\"750\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_readme_db9a3759d380.png\" alt=\"展开视图\">\n\u003C\u002Fp>\n\n## :heart: 贡献\n\n开源是由社区为社区构建的。欢迎对本项目做出任何贡献！\u003Cbr>\n此外，如果您有任何改进建议、进一步推进该项目的想法，或发现了 bug，请随时创建一个新的问题单，我们将尽快予以处理！","# Deep Chat 快速上手指南\n\nDeep Chat 是一个完全可定制的 AI 聊天组件，只需一行代码即可嵌入您的网站。它支持连接 ChatGPT、Claude 等主流 API，也支持自定义后端服务或直接在浏览器端运行模型。\n\n## 环境准备\n\n- **系统要求**：支持现代浏览器的操作系统（Windows, macOS, Linux）。\n- **前置依赖**：\n - Node.js (推荐 v16+) 和 npm\u002Fyarn\u002Fpnpm。\n - 任意前端框架（React, Vue, Svelte, Angular 等）或纯原生 JavaScript 项目。\n- **网络提示**：由于部分 AI 服务（如 OpenAI）在国内访问受限，建议在生产环境中通过国内服务器进行代理转发，或使用支持国内访问的模型接口。\n\n## 安装步骤\n\n根据您的项目类型选择以下一种安装方式：\n\n### 1. 标准项目 (Vanilla JS \u002F 通用)\n```bash\nnpm install deep-chat\n```\n\n### 2. React 项目\n```bash\nnpm install deep-chat-react\n```\n\n> **提示**：如果 npm 下载缓慢，可使用淘宝镜像源加速：\n> ```bash\n> npm install deep-chat --registry=https:\u002F\u002Fregistry.npmmirror.com\n> ```\n\n## 基本使用\n\n### 1. 引入组件\n在您的 HTML 或组件文件中添加标签。具体语法取决于您使用的框架（详见官方框架示例），通用 HTML 写法如下：\n\n```html\n\u003Cdeep-chat>\u003C\u002Fdeep-chat>\n```\n\n### 2. 连接 AI 服务\n\n#### 方案 A：直连主流 API (仅限本地开发\u002F演示)\n直接在浏览器中连接 OpenAI 等服务。**注意：此方式会暴露 API Key，严禁用于生产环境。**\n\n```html\n\u003Cdeep-chat directConnection='{\"openAI\": {\"key\": \"YOUR_API_KEY\"}}'\u002F>\n```\n\n#### 方案 B：连接自定义后端 (推荐生产环境)\n通过 `request` 属性指定您的后端接口地址。后端需处理 Deep Chat 定义的请求\u002F响应格式。\n\n```html\n\u003Cdeep-chat request='{\"url\":\"https:\u002F\u002Fyour-service.com\u002Fchat\"}'\u002F>\n```\n\n#### 方案 C：浏览器端运行模型 (无服务器)\n无需后端，直接在浏览器加载并运行 LLM 模型（需引入 `deep-chat-web-llm` 模块）。\n\n```html\n\u003Cdeep-chat webModel=\"true\" \u002F>\n```\n\n### 3. 启用高级功能 (可选)\n您可以通过添加属性快速启用摄像头、麦克风及语音交互功能：\n\n```html\n\u003Cdeep-chat \n camera=\"true\" \n microphone=\"true\" \n speechToText=\"true\" \n textToSpeech=\"true\" \n request='{\"url\":\"https:\u002F\u002Fyour-service.com\u002Fchat\"}'\n\u002F>\n```\n\n更多详细配置（如头像设置、Markdown 渲染、流式输出等）请访问 [deepchat.dev](https:\u002F\u002Fdeepchat.dev\u002F) 查看完整文档。","一家在线教育平台急需在其课程详情页嵌入智能助教，以实时解答学生关于代码作业的疑问并支持语音互动。\n\n### 没有 deep-chat 时\n- 前端团队需耗费数周从头开发聊天界面，难以同时兼容 Web、React 和 Vue 等多种技术栈。\n- 实现语音问答功能极其复杂，需单独集成录音、语音转文字及文字转语音多个第三方服务，调试成本高。\n- 无法直接连接 OpenAI 或 Claude 等主流模型，必须额外搭建后端代理服务器来转发请求，增加了运维负担。\n- 代码块渲染效果差，缺乏 Markdown 支持和自定义样式，导致编程类回答杂乱无章，影响阅读体验。\n- 会话记录依赖后端数据库存储，用户刷新页面后上下文丢失，且无法在本地快速恢复之前的提问状态。\n\n### 使用 deep-chat 后\n- 仅需一行代码即可将高度定制的聊天组件注入网站，完美适配现有所有前端框架，上线时间从数周缩短至半天。\n- 原生支持“语音对语音”交互，内置麦克风录音与自动播报功能，学生可直接口述问题并听到助教的语音解答。\n- 通过 `directConnection` 配置直接在浏览器端连接超过 20 种 AI API（如 OpenAI Realtime），无需编写任何后端中转代码。\n- 内置强大的 Markdown 解析与代码高亮渲染，配合自定义 HTML 包装器，使编程教程和公式展示清晰专业。\n- 利用 `browserStorage` 自动在本地缓存对话内容与滚动位置，用户刷新页面后可无缝续聊，极大提升了学习连续性。\n\ndeep-chat 让教育团队以极低的开发成本，迅速构建出具备多模态交互能力且体验流畅的专业级 AI 助教系统。","https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FOvidijusParsiunas_deep-chat_1e3912fa.png","OvidijusParsiunas","Ovidijus Parsiunas","https:\u002F\u002Foss.gittoolsai.com\u002Favatars\u002FOvidijusParsiunas_6789a901.jpg","The story of success is the story of persistence!",null,"Tsukuba, Japan","oparsiunas@gmail.com","OviSource","https:\u002F\u002Fgithub.com\u002FOvidijusParsiunas",[85,89,93,97,101,105,109,112,116,120],{"name":86,"color":87,"percentage":88},"TypeScript","#3178c6",44,{"name":90,"color":91,"percentage":92},"MDX","#fcb32c",29.9,{"name":94,"color":95,"percentage":96},"JavaScript","#f1e05a",14,{"name":98,"color":99,"percentage":100},"CSS","#663399",5,{"name":102,"color":103,"percentage":104},"Java","#b07219",2.1,{"name":106,"color":107,"percentage":108},"Elixir","#6e4a7e",1.6,{"name":110,"color":111,"percentage":108},"Go","#00ADD8",{"name":113,"color":114,"percentage":115},"Python","#3572A5",0.9,{"name":117,"color":118,"percentage":119},"Svelte","#ff3e00",0.5,{"name":121,"color":122,"percentage":123},"HTML","#e34c26",0.2,3572,432,"2026-04-04T14:03:18","MIT",1,"","未说明",{"notes":132,"python":130,"dependencies":133},"这是一个前端 UI 组件库，主要通过 npm 安装并在浏览器中运行，支持所有主流前端框架（React, Vue, Angular 等）。它本身不需要特定的服务器端环境、Python 或 GPU。若使用'Web Model'功能在浏览器本地托管模型，则依赖浏览器的计算能力（可能利用 WebGPU），具体硬件需求取决于所选用的模型大小。直接连接 API 时需注意密钥安全，生产环境建议使用代理服务器。",[67,134,135],"deep-chat-react","deep-chat-web-llm",[13,26,14,15],[138,139,140,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157],"ai","chat","chatbot","chatgpt","component","openai","react","solid","svelte","vue","huggingface","react-chatbot","ai-chatbot","nextjs","claude","deepseek","gemini","ollama","realtime","next","2026-03-27T02:49:30.150509","2026-04-06T07:15:02.920891",[161,166,171,176,181,185],{"id":162,"question_zh":163,"answer_zh":164,"source_url":165},15366,"如何在聊天组件中嵌入自定义 HTML 元素（如确认对话框、输入框等）？","可以通过使用新的消息内容类型属性 `html` 来实现。该属性位于 `Response` 类型中，允许直接插入 HTML 字符串。\n\n配置示例：\n1. 在 `initialMessages` 或响应中使用 `html` 字段：\n```javascript\nchatElementRef.initialMessages = [\n {\n role: 'user',\n html: '\u003Cbutton class=\"custom-button\">Hello\u003C\u002Fbutton>',\n }\n]\n```\n2. 确保使用支持此功能的版本（如 `deep-chat-dev` 或 `deep-chat-react-dev` 版本 `9.0.12` 及以上）。\n3. 如果需要样式定制，可以在 `messageStyles` 中针对 `html` 属性进行配置。","https:\u002F\u002Fgithub.com\u002FOvidijusParsiunas\u002Fdeep-chat\u002Fissues\u002F18",{"id":167,"question_zh":168,"answer_zh":169,"source_url":170},15367,"如何在不依赖后端 API 端点的情况下，直接在客户端处理请求逻辑（例如管理状态或调用多个 API）？","可以使用 `handler` 功能（Deep Chat 版本 `1.3.2` 及以上可用）。它允许你传递一个函数来完全控制请求处理流程，替代传统的 `request` 端点配置。\n\n使用方法：\n定义一个 `handler` 函数，接收 `body` 和 `signals` 参数：\n```typescript\nhandler?: (body: any, signals: Signals) => void;\n```\n其中 `Signals` 接口包含用于通知 Deep Chat 状态的回调函数：\n- `onResponse(response)`: 用于返回成功或错误响应。\n- `onOpen()`, `onClose()`: 用于流式连接。\n- `stopClicked`: 监听停止按钮点击（仅限流式）。\n- `newUserMessage`: 监听新用户消息（仅限 WebSocket）。\n\n此方法适用于基本 HTTP 请求、流式传输和 WebSocket，能够替代 `requestInterceptor` 和 `responseInterceptor` 的部分功能并实现更复杂的客户端逻辑。","https:\u002F\u002Fgithub.com\u002FOvidijusParsiunas\u002Fdeep-chat\u002Fissues\u002F12",{"id":172,"question_zh":173,"answer_zh":174,"source_url":175},15368,"启用流式输出（streaming）时，图表或其他动态内容为何会反复闪烁？","这是因为当 `partialRender` 设置为 `true` 时，组件会将文本中遇到的第一个 `\\n\\n` 立即解释为新消息气泡的开始，导致内容在未完全生成时被重复渲染。\n\n解决方案：\n1. 更新到 `deep-chat-dev` 或 `deep-chat-react-dev` 版本 `9.0.292` 及以上。\n2. 新版本增加了对 `\\n\\n---\\n\\n` 格式的识别逻辑，只有当文本中包含完整的分隔符字符串时，才会被视为新气泡，从而避免部分渲染导致的闪烁。\n3. 注意：服务器响应必须一次性返回包含完整分隔符的文本对象 `{text: \"\\n\\n---\\n\\n\"}`。如果服务器将分隔符拆分为多个独立的文本块发送（例如先送 `\\n\\n`，再送 `---`），则该修复无效，且在模拟模式（demo\u002Fstream simulation）下可能无法正常工作。","https:\u002F\u002Fgithub.com\u002FOvidijusParsiunas\u002Fdeep-chat\u002Fissues\u002F387",{"id":177,"question_zh":178,"answer_zh":179,"source_url":180},15369,"在使用代理服务器（如 Next.js）连接 OpenAI 时，如何传递 Assistant ID 等特定参数？","虽然标准的 `request` 属性主要用于通用端点，但你可以通过自定义请求头或在代理服务器端手动构建请求体来传递 OpenAI Assistant 所需的参数。\n\n具体建议：\n1. 在前端 `DeepChat` 组件的 `request` 配置中，利用 `headers` 或 `body` 字段透传必要的元数据。\n2. 在后端代理（如 Next.js API Route）中解析这些元数据，并将其转换为 OpenAI SDK 或 API 所需的 `assistant_id` 等参数。\n3. 参考官方文档中关于自定义请求（Custom Requests）的部分，了解如何构造符合 OpenAI 要求的请求结构。如果默认配置不支持直接传递，必须在代理层进行转换处理。","https:\u002F\u002Fgithub.com\u002FOvidijusParsiunas\u002Fdeep-chat\u002Fissues\u002F53",{"id":182,"question_zh":183,"answer_zh":184,"source_url":170},15370,"为什么我的 `requestInterceptor` 或 `onNewMessage` 在特定版本中不生效？","这可能是由于特定版本的回归问题。维护者曾指出在版本 `9.0.3` 中可能存在相关问题但无法复现。\n\n建议步骤：\n1. 尝试升级库到最新版本（例如从 `9.0.3` 升级到 `9.0.5` 或更高），许多此类问题已在后续补丁中修复。\n2. 检查控制台是否有相关报错信息。\n3. 确认配置代码语法正确，且拦截器函数已正确绑定到组件实例上。\n4. 如果问题依旧，请提供最小可复现代码示例以便进一步排查。",{"id":186,"question_zh":187,"answer_zh":188,"source_url":165},15371,"如何在初始消息（initialMessages）中正确显示文件？","在早期版本中存在一个 Bug，导致在 `initialMessages` 中使用的文件无法正常显示。\n\n解决方案：\n请将包更新至 `deep-chat-dev` 或 `deep-chat-react-dev` 版本 `9.0.21` 及以上。该版本修复了 `initialMessages` 中文件渲染的问题，确保文件消息能像普通消息一样正确加载和展示。",[190,195,200,205,210,215,220,225,230,235,240,245,250,255,260,265,270,275,280,285],{"id":191,"version":192,"summary_zh":193,"released_at":194},90010,"2.4.2","本次发布包含以下更改：\n- [Dify](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002FdirectConnection\u002FDify) 现已在 `directConnection` 属性中可用。\n- 当使用 [`stream`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fconnect#Stream) 与服务进行通信，而该服务未返回任何事件作为响应时，现在会显示错误信息，以提示出现异常情况。\n- 将 [LICENSE](https:\u002F\u002Fgithub.com\u002FOvidijusParsiunas\u002Fdeep-chat\u002Fblob\u002Fmain\u002FLICENSE) 添加到打包文件中。\n- 进一步优化，以尽可能保持打包文件的轻量化。\n\n感谢 [iMyth](https:\u002F\u002Fgithub.com\u002FiMyth) 对 Dify 功能的贡献！","2026-01-31T06:35:33",{"id":196,"version":197,"summary_zh":198,"released_at":199},90011,"2.4.1","本次发布修复了 [OpenAI 助手函数](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002FdirectConnection\u002FOpenAI\u002F#assistant-functions) 中的一个 bug：即使已定义 `function_handler`，OpenAI 工具调用请求仍会返回 `'Please define a `function_handler` property inside the service config.'` 的错误信息。\n\n感谢 [johnwc](https:\u002F\u002Fgithub.com\u002Fjohnwc) 提出的 [问题](https:\u002F\u002Fgithub.com\u002FOvidijusParsiunas\u002Fdeep-chat\u002Fissues\u002F476)!","2026-01-07T13:27:50",{"id":201,"version":202,"summary_zh":203,"released_at":204},90012,"2.4.0","本次发布带来了多项滚动体验优化、多会话聊天功能改进等更新：\n- [`scrollButton`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmessages\u002F#scrollButton) 可用于将聊天界面滚动至最新消息。\n- [`hiddenMessages`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmessages\u002F#hiddenMessages) 会显示聊天中未在视图内的新消息数量，并可用来快速滚动到这些消息。\n- [`upwardsMode`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmodes#upwardsMode) 用于从下往上加载消息。\n- [`browserStorage`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmessages\u002F#browserStorage) 新增了 `scrollHeight` 和 `inputText` 两个属性，它们会在下次会话中自动恢复。\n- [`defaultInput`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fstyles\u002F#defaultInput) 用于在聊天组件渲染时设置用户的默认输入内容。\n- [`maxVisibleMessages`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmessages\u002F#maxVisibleMessages) 用于限制聊天界面中最多显示的消息数量，以避免消息过多导致性能问题。\n- 现已支持 [OpenAI WebUI](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002FdirectConnection\u002FOpenWebUI)。\n- [OpenAI Chat](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002FdirectConnection\u002FOpenAI\u002F#Chat) 现已默认支持 [Responses API](https:\u002F\u002Fplatform.openai.com\u002Fdocs\u002Fapi-reference\u002Fresponses)，同时仍兼容旧版的 [Completions API](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002FdirectConnection\u002FOpenAI\u002FOpenAICompletions)。\n- [Claude](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002FdirectConnection\u002FClaude) 的默认模型现已更新为 _\"claude-sonnet-4-5-20250929\"_。\n- [Gemini](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002FdirectConnection\u002FGemini#gemini) 的默认模式现已更新为 _\"gemini-2.5-flash\"_。\n- 当一个 [`stream`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fconnect#Stream) 的事件在同一响应会话中改变 `role` 时，系统会自动创建一条新消息。\n- [`stream`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fconnect#Stream) 的 `partialRender` 属性现可与 `html` 消息配合使用。\n- 我们的所有属性均已加入 LTR\u002FRTL 兼容性调整：原先名为 `\"left\"` 的值现改为 `\"first\"`，原先名为 `\"right\"` 的值则改为 `\"last\"`。\n- 现在可以使用 _Tab_ 键和 _Enter_ 键来导航聊天界面中的按钮。\n- 在单个 [message](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmessages\u002F#MessageContent) 响应中同时使用 `text`、`html` 和 `files` 属性时，显示顺序已调整为 `text` -> `html` -> `files`。\n- 多项自动滚动优化及其他错误修复。\n\n感谢大家的支持！","2025-12-30T14:56:59",{"id":206,"version":207,"summary_zh":208,"released_at":209},90013,"2.3.0","本次发布新增了通过 [`directConnection`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002FdirectConnection) 连接超过 20 种主流 AI API 的功能，其中包括以下新接入的模型：\n- [AssemblyAI](https:\u002F\u002Fdeepchat.dev\u002F\u002Fdocs\u002FdirectConnection\u002FAssemblyAI)\n- [BigModel](https:\u002F\u002Fdeepchat.dev\u002F\u002Fdocs\u002FdirectConnection\u002FBigModel)\n- [Claude](https:\u002F\u002Fdeepchat.dev\u002F\u002Fdocs\u002FdirectConnection\u002FClaude)\n- [DeepSeek](https:\u002F\u002Fdeepchat.dev\u002F\u002Fdocs\u002FdirectConnection\u002FDeepSeek)\n- [Gemini](https:\u002F\u002Fdeepchat.dev\u002F\u002Fdocs\u002FdirectConnection\u002FGemini)\n- [Groq](https:\u002F\u002Fdeepchat.dev\u002F\u002Fdocs\u002FdirectConnection\u002FGroq)\n- [Kimi](https:\u002F\u002Fdeepchat.dev\u002F\u002Fdocs\u002FdirectConnection\u002FKimi)\n- [MiniMax](https:\u002F\u002Fdeepchat.dev\u002F\u002Fdocs\u002FdirectConnection\u002FMiniMax)\n- [Mistral](https:\u002F\u002Fdeepchat.dev\u002F\u002Fdocs\u002FdirectConnection\u002FMistral)\n- [Ollama](https:\u002F\u002Fdeepchat.dev\u002F\u002Fdocs\u002FdirectConnection\u002FOllama)\n- [OpenRouter](https:\u002F\u002Fdeepchat.dev\u002F\u002Fdocs\u002FdirectConnection\u002FOpenRouter)\n- [Perplexity](https:\u002F\u002Fdeepchat.dev\u002F\u002Fdocs\u002FdirectConnection\u002FPerplexity)\n- [Qwen](https:\u002F\u002Fdeepchat.dev\u002F\u002Fdocs\u002FdirectConnection\u002FQwen)\n- [Together](https:\u002F\u002Fdeepchat.dev\u002F\u002Fdocs\u002FdirectConnection\u002FTogether)\n- [X](https:\u002F\u002Fdeepchat.dev\u002F\u002Fdocs\u002FdirectConnection\u002FX)\n\n\u003Cimg width=\"1436\" height=\"510\" alt=\"Screenshot 2025-10-21 at 01 44 39\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F050aff6c-9e52-42ec-95ff-a157cfa61532\" \u002F>\n\n**其他更新：**\n- [Cohere](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002FdirectConnection\u002FCohere) 的 [聊天](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002FdirectConnection\u002FCohere#Chat) 已升级至 v2 版本；其他服务因供应商已弃用而被移除。\n- 在 [OpenAI 聊天](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002FdirectConnection\u002FOpenAI\u002F#Chat) 中，现在可以在对话中发送音频消息！\n- [OpenAI Realtime](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002FdirectConnection\u002FOpenAI\u002FOpenAIRealtime) API 现已将 `gpt-4o-realtime-preview-2025-06-03` 设置为默认模型。\n- 大多数 [`directConnection`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002FdirectConnection) 服务此前会使用 _“你是一个乐于助人的助手。”_ 作为默认系统提示，现已移除该设置。\n- 曾用于部分 [`directConnection`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002FdirectConnection) 服务的默认 [介绍面板](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002FintroPanel) 已被移除，同时 `introPanelStyle` 属性也已不再提供。\n- 当模型返回 `audio` 文件时，可通过配置全新的语音转文本 [`audio`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fspeech#AudioResponse) 属性来自动播放该音频。\n- 在 [`remarkable`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmessages\u002Fstyles#remarkable) 中，现可通过 [`window.remarkable_plugins`](https:\u002F\u002Fdeepchat.dev\u002Fexamples\u002FexternalModules) 导入自定义插件，例如 _linkify_、通过 [`math`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmessages\u002Fstyles#remarkable) 和 [`window.katex`](https:\u002F\u002Fdeepchat.dev\u002Fexamples\u002FexternalModules) 使用 [KaTeX](https:\u002F\u002Fkatex.org\u002F)，并可利用 [`applyHTML`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmessages\u002Fstyles#remarkable) 为自定义 Remarkable 内容赋予 [`html`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmessages\u002FHTML) 功能。","2025-10-22T16:40:10",{"id":211,"version":212,"summary_zh":213,"released_at":214},90014,"2.2.2","本次更新新增多项功能，旨在提升开发者的开发体验：\n\n- [浏览器存储](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmessages\u002F#browserStorage) - 您无需再为消息历史的后端集成操心。现在可以直接在浏览器本地存储消息。\n- [工具提示](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fstyles\u002Fbuttons#Tooltip) - 鼠标悬停时弹出气泡，用于描述按钮的功能。\n- 您现在可以将流式传输的消息放置在自定义的 [HTML 容器](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmessages\u002FHTML#htmlWrappers) 中。\n- OpenAI 实时 API - 提供[方法](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002FdirectConnection\u002FOpenAI\u002FOpenAIRealtime#OpenAIRealtimeMethods)和[事件](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002FdirectConnection\u002FOpenAI\u002FOpenAIRealtime#SpeechToSpeechEvents)，以优化语音到语音的交互体验。\n- 用户[输入事件](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fevents#onInput)，用于记录聊天输入的变化。\n- 为[`UserMessage`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmethods#UserMessage)和[`Stream`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fconnect#Stream)消息新增了`custom`属性。\n- 使用[`websockets`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fconnect#Websocket)时，可通过单独的[`url`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Ffiles#FilesServiceConfig)发送文件。\n- 如果文件在上一次发送中失败，现在可以重新发送。\n- 其他错误修复及开发者体验优化。\n\n\u003Cp align=\"center\">\n \u003Cimg width=\"1000\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F5f40ec6c-e074-4232-8044-d171a18f78c9\" alt=\"版本 2.1.0\">\n\u003C\u002Fp>\n\n衷心感谢以下慷慨赞助商对本项目的大力支持：\n@dorra\n@techpeace\n@ChiaoGeek","2025-07-03T14:28:45",{"id":216,"version":217,"summary_zh":218,"released_at":219},90015,"2.2.1","本次更新带来了更完善的错误处理和问题修复：\n- 当用户尝试发送包含文件的消息失败时，会提示重新上传这些文件。\n- 发生错误时，页面现在会自动滚动到底部。\n- 当 [`focusMode`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmodes#focusMode) 模式开启时，发送新消息后页面会出现闪烁现象，此问题已得到解决。\n- 当 [`getMessages`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmethods#getMessages) 方法返回包含文件的消息时，`[`ref`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmessages\u002F#MessageFile) 属性之前始终是一个空对象。现已被修复，该属性将如文档所述，包含一个 [File](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FFile) 对象。\n\n![ScreenRecording2025-05-12at20 53 55-ezgif com-video-to-gif-converter (1)](https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Fa1a0a7bf-a0ea-462c-9f08-48975be540d0)\n\n特别感谢以下慷慨赞助商对本项目的大力支持：\n@matthiasamberg\n@dorra\n\n","2025-05-12T12:00:55",{"id":221,"version":222,"summary_zh":223,"released_at":224},90016,"2.2.0","更新内容：\n\n- [专注模式](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmodes#focusMode)，仅显示最新的消息交互，提供现代化的 AI 聊天机器人体验。\n- [OpenAI 实时 API](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002FdirectConnection\u002FOpenAI\u002FOpenAIRealtime)，用于语音到语音的通信。\n- [自定义按钮](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fstyles\u002Fbuttons#customButtons)。\n- [响应](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fconnect#Response) 现在可以包含多条消息。\n- 支持连接到 [可读流 API](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fconnect#Stream)。\n- 现在可以在消息的 [响应](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fconnect#Response) 中返回 `custom` 属性。\n- 语音转文本的 [AzureOptions](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fspeech#AzureOptions) 中新增了 `autoLanguage`、`endpointId` 和 `deviceId` 属性。\n- OpenAI 的 [Assistant](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002FdirectConnection\u002FOpenAI\u002F#Assistant) 现在可以使用 `custom_base_url` 属性来调用您自己的服务器。\n- Azure 的 [OpenAI](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002FdirectConnection\u002FAzure#OpenAI) 接口新增了 `data_sources` 属性，用于连接您的个人数据源。\n- [Websocket](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fconnect#Websocket) 现在可以在 [演示](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmodes#demo) 模式中使用。\n- 可通过 [`displayLoadingBubble`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmessages\u002F#displayLoadingBubble) 手动切换消息加载提示器的显示状态。这对于 [Websocket](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fconnect#Websocket) 特别有用。\n- 当找不到 [头像](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmessages\u002F#avatars) 图片时，组件现在会回退到默认图片。\n- 为文本输入按钮添加了 [role](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAccessibility\u002FARIA\u002FReference\u002FRoles) 和 [label 属性](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FLearn_web_development\u002FCore\u002FAccessibility\u002FHTML#use_semantic_ui_controls_where_possible) 语义。\n- 在手机上，回车键以及 [输入法编辑器](https:\u002F\u002Fwww.google.com\u002Finputtools\u002Fservices\u002Ffeatures\u002Finput-method.html) 的使用不再会自动提交消息。\n- 修复了一些 bug。\n\n感谢 @dvartic 提交的 [Elixir Phoenix 示例](https:\u002F\u002Fgithub.com\u002FOvidijusParsiunas\u002Fdeep-chat\u002Ftree\u002Fmain\u002Fexample-servers\u002Felixir\u002Fphoenix)。\n\n同时，衷心感谢以下慷慨赞助者对本项目的大力支持：\n@matthiasamberg\n@dorra\n\n\u003Cp align=\"center\">\n \u003Cimg width=\"1000\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F6089a0b4-0fe6-43e9-b9ce-840a9cfda885\" alt=\"版本 2.2.0\">\n\u003C\u002Fp>\n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Fd210b5fe-ee81-4b0b-8347-78d5ed7fb5af","2025-05-01T14:11:36",{"id":226,"version":227,"summary_zh":228,"released_at":229},90017,"2.1.1","本次更新带来了大量**新功能**：\n\n- 现在可以设置与 [Azure OpenAI API](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002FdirectConnection\u002FAzure#OpenAI) 的直连。感谢 @bruffridge 贡献了这一功能。\n- 您现在可以使用 [`loadHistory`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Finterceptors#loadHistory) 拦截器异步加载聊天历史记录，并支持分页，方便向上滚动查看历史消息。\n- 通过 [`LoadingMessageStyles`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmessages\u002Fstyles#LoadingMessageStyles) 属性自定义聊天中的加载动画。\n- [`updateMessage`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmethods#updateMessage) 方法允许您动态更新聊天中已有的消息，这为各种独特的聊天交互提供了可能，尤其是在更新消息的 `html` 内容时。\n- Deep Chat 使用 [remarkable](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fremarkable) 库来渲染 Markdown 文本，现在您可以通过 [`remarkable`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmessages\u002Fstyles#remarkable) 属性对其进行个性化配置。感谢 @quietdreamr 贡献了这一功能。\n- 可以使用自定义类将文本消息[分组显示](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmessages\u002Fstyles#groupedMessages)。\n- 现在可以添加多条[欢迎消息](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmessages\u002F#introMessage)。\n- 当点击提交按钮发送消息后，聊天窗口会自动聚焦到输入框。\n- 当输入框为空时，占位符将始终显示。\n- Deep Chat 的[按钮无障碍功能](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FLearn_web_development\u002FCore\u002FAccessibility\u002FHTML#ui_controls)得到了大幅增强。感谢 @imgiseverything 贡献了这一功能。\n- 修复了一些 bug。\n\n**API 变更**——所有变更均保持向后兼容：\n\n- `messageStyles` 对象中的 `loading` 属性已被移至 [`message styles`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmessages\u002Fstyles#messageStyles) 对象中。\n- `demo` 对象中的 `displayLoadingBubble` 属性已被重构为 [`displayLoading`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fdemo#demo)。\n\n衷心感谢以下慷慨赞助者对本项目的大力支持：\n@matthiasamberg \n@dorra \n\n\u003Cp align=\"center\">\n \u003Cimg width=\"1000\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F1e86d151-a7e4-4add-961e-af2c55315a9d\" alt=\"版本 2.0\">\n\u003C\u002Fp>\n\n### 🎉 衷心感谢我们优秀的社区 🎉\n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F7ba01414-ca4d-4e17-b31b-403782d9d950","2024-12-29T20:08:53",{"id":231,"version":232,"summary_zh":233,"released_at":234},90018,"2.0.1","这是一个快速的补丁版本，\u003Cb>修复了一个 bug\u003C\u002Fb>：在 [OpenAI Assistants](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002FdirectConnection\u002FOpenAI#Assistant) 中，当同时添加 `thread_id` 和 `load_thread_history` 属性时，线程聊天记录会以错误的顺序显示。该问题现已修复。\n\n此外，近期使用 npm 安装 `deep-chat` 或 `deep-chat-react` 包的用户，会在控制台中看到 \u003Cb>4 条新的安全警告\u003C\u002Fb>。这些警告并不严重，也不会影响 Deep Chat 的正常功能。不过，为了更加稳妥并避免引起用户注意，导致这些警告的依赖项现已更新。\n\n一如既往，衷心 \u003Cb>感谢我们的赞助者\u003C\u002Fb>！\n本项目的开发得到了多位慷慨赞助者的大力支持：\n@matthiasamberg\n@dorra\n@techpeace\n@aquarius-wing","2024-07-29T22:47:14",{"id":236,"version":237,"summary_zh":238,"released_at":239},90019,"2.0.0","**万众期待的 Deep Chat 2.0 终于发布了！**\n-\n本次发布包含多项关键的 API 变更、新增多项功能、对现有功能的优化以及大量错误修复。这一切都离不开开源社区的持续支持，以及大家致力于为所有人打造最佳 AI 聊天体验的热情！我们希望这一版本能让新老开发者更轻松地将 Deep Chat 嵌入到自己的网站中，并让用户的聊天体验达到最佳状态。\n\n**API 变更：**\n- `request` 已更名为 [`connect`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fconnect#connect-1)\n- `stream` 属性已移至 [`connect`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fconnect#connect-1)\n- `InitialMessages` 属性已更名为 [`history`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmessages\u002F#history)\n- `onNewMessage` 事件已更名为 [`onMessage`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fevents#onNewMessage)。事件对象中传递的 `isInitial` 属性已更名为 `isHistory`。在监听组件发出的事件时，`new-message` 事件名称已改为 `message`。\n- [FilesServiceConfig](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Ffiles\u002F#FilesServiceConfig) 接口中 `request` 属性已更名为 `connect`。\n\n**新功能：**\n- 新增 [`addMessage`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmethods#addMessage) 方法，用于以编程方式向聊天中添加新消息。\n- 新增 [`setPlaceholderText`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmethods#setPlaceholderText) 方法，用于以编程方式设置输入框的占位符文本。\n- [`speechToText`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fspeech\u002F#speechToText) 接口现新增三个属性：`stopAfterSubmit` 用于控制用户提交消息后是否停止录音；`submitAfterSilence` 用于控制在静默一段时间后是否自动提交消息；`events` 则用于监听语音交互过程中触发的事件。\n- [`openAI`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002FdirectConnection\u002FOpenAI#openAI) 接口已更新，以反映 OpenAI API 提供的新功能。\n\n**用户体验改进及多项错误修复：**\n使用新版 Deep Chat 组件时，您会发现许多提升使用体验的改进，例如支持用户发送的消息换行、上传文件在聊天界面中的显示效果更佳等。这些改进均基于开源社区的持续反馈而实现。请查看我们仓库的 [issues](https:\u002F\u002Fgithub.com\u002FOvidijusParsiunas\u002Fdeep-chat\u002Fissues) 部分，了解这些改进的具体实现方式。\n\n**从 v1 迁移到 v2：**\n\n所有提到的 API 变更均保持向后兼容！因此，从旧版本切换到此版本时，无需担心需要更新配置。浏览器控制台将会…","2024-07-12T12:02:37",{"id":241,"version":242,"summary_zh":243,"released_at":244},90020,"1.4.11","This release contains updates to OpenAI services and more:\r\n- When using [OpenAI Assistants](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002FdirectConnection\u002FOpenAI#Assistant), you can now preload the chat history from OpenAI without having to store it locally.\r\n- [OpenAI Chat](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002FdirectConnection\u002FOpenAI#Chat) responses for [functions](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002FdirectConnection\u002FOpenAI#chat-functions) can now be [streamed](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fconnect#stream).\r\n- As well as responding with `text` or `html` in [streams](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fconnect#stream), you can now also respond with `files`.\r\n- [htmlClassUtilities](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmessages\u002FHTML#htmlClassUtilities) now support custom events.\r\n- [websocket](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fconnect#Websocket) responses can now be used to update a previous message to facilitate a _stream-like_ experience. Checkout the following [issue](https:\u002F\u002Fgithub.com\u002FOvidijusParsiunas\u002Fdeep-chat\u002Fissues\u002F112) for more info.\r\n- If you are using [names](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmessages\u002F#names) or [avatars](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmessages\u002F#avatars) for your messages; when there are multiple consecutive messages sent from the same role - they are no longer repeated.\r\n- Multiple other small bug fixes and improvements.\r\n\r\nBig thankyou to [@eljefedelrodeodeljefe](https:\u002F\u002Fgithub.com\u002Feljefedelrodeodeljefe) for sponsoring the project!","2024-02-10T19:29:48",{"id":246,"version":247,"summary_zh":248,"released_at":249},90021,"1.4.10","This release includes the following updates:\r\n- Create a new [OpenAI Assistant](https:\u002F\u002Fplatform.openai.com\u002Fdocs\u002Fapi-reference\u002Fassistants) by emitting the `assistant_id` property in the [Assistant](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002FdirectConnection\u002FOpenAI\u002F#Assistant) object and control the its details via [newAsssistant](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002FdirectConnection\u002FOpenAI\u002F#NewAssistant) object.\r\n- When the [`onComponentRender`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fevents#onComponentRender) event is called, it now also passes the Deep Chat component reference. **Be careful not to causes infinite event recursion if you assign new properties to the reference.**\r\n- [`webModel`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002FwebModel#webModel) now supports new [RedPajama](https:\u002F\u002Fgithub.com\u002Ftogethercomputer\u002FRedPajama-Data) and [TinyLlama](https:\u002F\u002Fgithub.com\u002Fjzhang38\u002FTinyLlama) models.\r\n- Other security and refactoring updates.\r\n\r\nHuge shoutout to [matthiasamberg](https:\u002F\u002Fgithub.com\u002Fmatthiasamberg) for sponsoring the project!! 🎉 🎉","2024-01-28T17:54:26",{"id":251,"version":252,"summary_zh":253,"released_at":254},90022,"1.4.7","This release introduces a big new feature - the ability to use llm models entirely on the browser. You can read more about this in the [webModel](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002FwebModel) section.\r\n\r\nOther updates:\r\n- Images defined as `base64` can now be downloaded by clicking on them\r\n- OpenAI Assistants can now handle images and produce _csv_ and _pdf_ files\r\n- The [intro panel](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002FintroPanel) is not displayed when no valid connection values are configured\r\n- Better parsing and [`responseInterceptor`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Finterceptors#responseInterceptor) editing capabilities for [`stream`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fconnect#stream)\r\n- Other small bug fixes","2024-01-15T21:30:28",{"id":256,"version":257,"summary_zh":258,"released_at":259},90023,"1.4.6","This release contains a series of generic enhancements and multiple bug fixes:\r\n\r\nEnhancements:\r\n- Ability to use the [responseInterceptor](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Finterceptors#responseInterceptor) for [stream](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fconnect#stream) responses.\r\n- If [request](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fconnect#Request) property is not set on the initial render, you are now able to set it on further renders.\r\n\r\nBug fixes:\r\n- The [events](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fevents) methods no longer trigger a re-render.\r\n- Responses from a [stream](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fconnect#stream) service no longer overwrites the user message.\r\n- Setting the [OpenAI Assistant](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002FdirectConnection\u002FOpenAI#Assistant) key via the insert key view now sets the correct request header when sending new messages.\r\n\r\nOthers:\r\n- `addMessage` method has been removed as it does not yield any direct benefit to Deep Chat component.\r\n","2023-12-20T11:27:36",{"id":261,"version":262,"summary_zh":263,"released_at":264},90024,"1.4.5","This release contains multiple updates for connecting to [direct](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002FdirectConnection\u002F) and [custom](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fconnect\u002F) services:\r\n1. You can now define a model for the [OpenAI Images](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002FdirectConnection\u002FOpenAI#Images) API.\r\n2. There are multiple new optional properties that you can use for [Cohere](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002FdirectConnection\u002FCohere) APIs.\r\n3. [StabilityAI](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002FdirectConnection\u002FStabilityAI) API documentation has been updated.\r\n4. [`onNewMessage`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fevents#onNewMessage) event now includes the actual uploaded file's reference using the [MessageFile](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmessages\u002F#MessageFile) object type.\r\n5. Adding a new [`onError`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fevents\u002F#onError) event that allows the parent app to monitor chat errors.\r\n\r\nThis update also includes streaming bug fixes and better console logging when the response format from the server is invalid.","2023-12-05T20:20:51",{"id":266,"version":267,"summary_zh":268,"released_at":269},90025,"1.4.4","This release comes bundled with multiple updates for chat message functionality:\r\n- Introducing a new [`overwrite`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fconnect\u002F#Response) property which allows the contents of the new message to overwrite the previous message. This facilitates the capability to create [status message bubbles](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fconnect\u002F#status-bubble-example) and [streaming](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fconnect\u002F#stream) will no longer require the response to contain incremental portions of the previous text.\r\n- [Stream](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fconnect\u002F#stream) functionality has also been updated to allow [`html`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmessages\u002F#MessageContent) content to streamed. Additionally, the stream [`simulation`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fconnect\u002F#stream) functionality now splits the incoming text by characters instead of words to allow Chinese characters to be streamed individually.\r\n- The [submitUserMessage](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmethods#submitUserMessage) method now uses a new argument type called [`UserMessage`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmethods#UserMessage) which is an object that accepts text and files.\r\n- [`addMessage`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmethods#addMessage) is a new method used to add messages into the chat. The use-case this is targeting is to eventually populate the chat history once it has been fetched after the chat has loaded.\r\n- The [request](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fconnect#Request) object has a new optional `credentials` property which will allow developers to configure what services the cookies can be sent to.\r\n\r\nDeprecation:\r\n\r\n- The \"deep-chat-update-message\" [HTML Class](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmessages\u002FHTML#deepChatClasses) has now be removed in favour of using the [`overwrite`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fconnect\u002F#Response) in responses.\r\n\r\nThis release also contains multiple bug fixes for streaming and `html` messages.","2023-11-25T20:44:51",{"id":271,"version":272,"summary_zh":273,"released_at":274},90026,"1.4.3","We are adding a new [`chatStyle`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fstyles\u002F#style) property for setting the chat container styling. This property directly supplements the already existing [`style`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fstyles\u002F#style) attribute which can only be set in the markup, hence [`chatStyle`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fstyles\u002F#style) allows developers to set this property anywhere and it accepts a JSON object.\r\n\r\nThis release also contains some refactoring work for streaming.","2023-11-18T20:33:02",{"id":276,"version":277,"summary_zh":278,"released_at":279},90027,"1.4.2","Deep Chat now supports the use of custom [roles](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmessages\u002F#MessageRole) in your messages. This is particularly useful if your server communicates with multiple agents or users and you want to uniquely represent their message bubbles in the chat. This can be customized using [`messageStyles`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmessages\u002Fstyles#messageStyles), [`avatars`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmessages\u002F#avatars) and [`names`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmessages\u002F#names) properties.\r\n\r\nThis update also includes bug fixes for controlling the submit button when [streaming](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fconnect#stream) and simulating a [stream](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fconnect#stream) whilst using [websockets](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fconnect#Websocket).","2023-11-15T20:29:06",{"id":281,"version":282,"summary_zh":283,"released_at":284},90028,"1.4.1","The OpenAI DevDay 2023 conference introduced a variety of exciting new features into the AI ecosystem, all of which are now available in Deep Chat:\r\n\r\n- [OpenAI Vision](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002FdirectConnection\u002FOpenAI#vision-example) - use the latest `gpt-4-vision-preview` model to analyze images in the chat.\r\n- [Text To Speech](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002FdirectConnection\u002FOpenAI#TextToSpeech) - generate audio based on your text input.\r\n- [Assistant](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002FdirectConnection\u002FOpenAI#Assistant) - connect and converse with your custom OpenAI assistant.\r\n- [Function Calling](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002FdirectConnection\u002FOpenAI#Functions) - execute function calls returned by the [regular chat](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002FdirectConnection\u002FOpenAI#chat-functions) or the [assistant](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002FdirectConnection\u002FOpenAI#assistant-functions).\r\n\r\nYou can check all of these features in the Deep Chat's [OpenAI](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002FdirectConnection\u002FOpenAI) documentation page or try them all out live in the [Playground](https:\u002F\u002Fdeepchat.dev\u002Fplayground\u002F).\r\n\r\nThis release also saw the retirement of the OpenAI `completions` feature as it has now been moved to legacy status in the OpenAI documentation. The default character (token) limits for all OpenAI models have been removed as they vary by the model and are cumbersome to maintain, hence you will alternatively need to set them manually using the [`requestBodyLimits`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fconnect\u002F#requestBodyLimits) property.","2023-11-12T20:06:57",{"id":286,"version":287,"summary_zh":288,"released_at":289},90029,"1.4.0","The Deep Chat [submit button](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fstyles#submitButtonStyles) has been upgraded with new features:\r\n\r\n- A new `disabled` button state has been added to disable the button when the current user input cannot be sent out to the target service or the [websocket](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fconnect#Websocket) connection is not established.\r\n- You can disable this state to have the submit button always enabled by toggling the `alwaysEnabled` property to _true_.\r\n- You can now manually set the `disabled` state via the use of the [`disableSubmitButton`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fmethods#disableSubmitButton) method. This is particularly useful for cases where there are other factors outside of the chat that would need to stop the user from being able to send out messages.\r\n- The `validateMessageBeforeSending` interceptor has now been renamed to [`validateInput`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Finterceptors#validateInput) as it is now triggered when the user changes text or uploads\u002Fdeletes files.\r\n- The overall [`submitButtonStyles`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fstyles#submitButtonStyles) method has been refactored to require less repetitive styling values to achieve the same output.\r\n\r\nThis bug also contains a few bug fixes where the chat width was increased when the user had inserted long words and the background color used to bleed out from the chat container when the [`inputAreaStyle`](https:\u002F\u002Fdeepchat.dev\u002Fdocs\u002Fstyles#inputAreaStyle) background was set.","2023-11-05T22:53:37"]