├── LICENSE ├── README.md ├── bubble.config.ts ├── bubble ├── index.tsx └── main.tsx ├── index.html ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── embed.bubble.js └── logo.png ├── src ├── App.tsx ├── assets │ └── react.svg ├── index.css ├── main.tsx ├── pages │ ├── chatbot │ │ ├── components │ │ │ ├── CommonExpress.tsx │ │ │ ├── Header.tsx │ │ │ ├── InputToolbar.tsx │ │ │ ├── Markdown.tsx │ │ │ ├── MessageBubble.tsx │ │ │ ├── MessageContainer.tsx │ │ │ ├── MessageTextArea.tsx │ │ │ └── SendButton.tsx │ │ └── index.tsx │ └── home │ │ └── index.tsx ├── router │ └── index.tsx ├── utils │ └── invertBgColorToTextColor.ts └── vite-env.d.ts ├── tailwind.config.js ├── tsconfig.json ├── tsconfig.node.json ├── vite.config.ts └── yarn.lock /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 szguoxz 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

Newoaks AI React Chat Bubble

2 |
NewOaks AI is an AI chatbot builder, which allows you to engage with customers, nurture leads and book conversational appointments for your website, text SMS and files by Custom ChatGPT and Claude. The open source code is the chat bubble embedded on websites to engage with customers. 3 | 4 | [Website](https://www.newoaks.ai) | [Documentation](https://www.newoaks.ai/guide/main) | [Blog](https://www.newoaks.ai/blog/) | [Twitter](https://twitter.com/Rockwood_XRay)
5 | 6 | ![NewOaks AI](https://cdn.newoaks.ai/open/newoaksai-chatbubble/chatbot.png) 7 | 8 | ### ✨ features 9 | 10 | * 🎈 Chat page is embedded in a website as a bubble 11 | * You can also use `iframe` to embed the chat bubble as part of the page 12 | * Or you can simple use the chat bubble as a syandalone page 13 | 14 | ### Quick Start 15 | 16 | ```shell 17 | npx degit github:szguoxz/chatbubble my-chatbot-example 18 | 19 | cd my-chatbot-example 20 | 21 | yarn install 22 | 23 | yarn dev 24 | ``` 25 | 26 | Visit：[`http://localhost:3000 ` ](http://localhost:3000) 27 | 28 | ### How to use the code 29 | 30 | ```html 31 | 32 | 33 | 34 | 35 | 138 | {/* )} */} 139 | 140 | ); 141 | } 142 | 143 | function WelcomeBubble({ 144 | onClickMsg, 145 | delay = 3000, 146 | data = [], 147 | isHide, 148 | align, 149 | }: { 150 | align: "left" | "right"; 151 | isHide: boolean; 152 | data: string[]; 153 | delay?: number; 154 | onClickMsg: () => void; 155 | }) { 156 | const timer = useRef(); 157 | const [isShow, setIsShow] = useState(false); 158 | const [isClickClose, setIsClickClose] = useSessionStorageState< 159 | boolean | undefined 160 | >("message_bubbles_have_been_shown"); 161 | 162 | useEffect(() => { 163 | timer.current = setTimeout(() => { 164 | setIsShow(true); 165 | }, delay); 166 | }, []); 167 | 168 | useEffect(() => { 169 | if (isHide) { 170 | clearTimeout(timer.current); 171 | setIsShow(false); 172 | } 173 | }, [isHide]); 174 | 175 | if (data.length === 0 || isClickClose || !isShow) { 176 | return null; 177 | } 178 | return ( 179 |
193 |
{ 210 | setIsClickClose(true); 211 | }} 212 | > 213 | 221 | 226 | 227 |
228 | {data.map((item: string, index: number) => ( 229 |

{ 232 | onClickMsg(); 233 | setIsClickClose(true); 234 | }} 235 | style={{ 236 | padding: "12px 16px", 237 | backgroundColor: "#fff", 238 | borderRadius: 10, 239 | lineHeight: 1.6, 240 | border: "1px solid #ebebeb", 241 | boxShadow: "0 0 16px rgba(0,0,0,.1)", 242 | }} 243 | > 244 | {item} 245 |

246 | ))} 247 |
248 | ); 249 | } 250 | 251 | // const switchIconStyle: CSSProperties = { 252 | // color: '#fff', 253 | // fontSize: 24, 254 | // lineHeight: '32px', 255 | // display: 'flex', 256 | // justifyContent: 'center', 257 | // alignItems: 'center' 258 | // }; 259 | 260 | const switchButtonStyle: CSSProperties = { 261 | userSelect: "none", 262 | cursor: "pointer", 263 | width: 56, 264 | height: 56, 265 | borderRadius: 28, 266 | position: "fixed", 267 | zIndex: 2147483645, 268 | bottom: 48, 269 | display: "flex", 270 | justifyContent: "center", 271 | alignItems: "center", 272 | overflow: "hidden", 273 | }; 274 | 275 | function ChatbotBubbleSwitch({ 276 | boxShadow, 277 | align = "right", 278 | open, 279 | onClick, 280 | bgColor, 281 | icon, 282 | }: { 283 | boxShadow: string; 284 | align: "left" | "right"; 285 | open: boolean; 286 | onClick: () => void; 287 | bgColor: string; 288 | icon: string; 289 | }) { 290 | if (icon) { 291 | return ( 292 |
296 | 297 |
298 | ); 299 | } 300 | return ( 301 |
310 | {open ? ( 311 | 312 | ) : ( 313 | 314 | )} 315 |
316 | ); 317 | } 318 | 319 | function MobileBg({ show, onClose }: { show: boolean; onClose: () => void }) { 320 | if (!show) { 321 | return null; 322 | } 323 | return ( 324 |
{ 336 | e.stopPropagation(); 337 | onClose(); 338 | }} 339 | >
340 | ); 341 | } 342 | 343 | function Close({ color }: { color: string }) { 344 | return ( 345 | 353 | 358 | 359 | ); 360 | } 361 | 362 | function Comment({ color }: { color: string }) { 363 | return ( 364 | 372 | 377 | 382 | 387 | 392 | 393 | ); 394 | } 395 | -------------------------------------------------------------------------------- /bubble/main.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import Bubble from "./index.tsx"; 4 | 5 | const bubbleContainer = document.createElement("div"); 6 | bubbleContainer.id = "chatbot-bubble-DshdC19v"; 7 | document.body.appendChild(bubbleContainer); 8 | 9 | ReactDOM.createRoot(bubbleContainer).render(); 10 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | React Chatbot 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-chat-bubble", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc && vite build", 9 | "build:bubble": "tsc && vite build -c bubble.config.ts", 10 | "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", 11 | "preview": "vite preview" 12 | }, 13 | "dependencies": { 14 | "ahooks": "^3.7.10", 15 | "antd": "^5.15.4", 16 | "clsx": "^2.1.0", 17 | "invert-color": "^2.0.0", 18 | "react": "^18.2.0", 19 | "react-device-detect": "^2.2.3", 20 | "react-dom": "^18.2.0", 21 | "react-markdown": "^9.0.1", 22 | "react-router-dom": "^6.22.3", 23 | "react-syntax-highlighter": "^15.5.0", 24 | "tinycolor2": "^1.6.0" 25 | }, 26 | "devDependencies": { 27 | "@types/node": "^20.12.2", 28 | "@types/react": "^18.2.66", 29 | "@types/react-dom": "^18.2.22", 30 | "@types/react-syntax-highlighter": "^15.5.11", 31 | "@types/tinycolor2": "^1.4.6", 32 | "@typescript-eslint/eslint-plugin": "^7.2.0", 33 | "@typescript-eslint/parser": "^7.2.0", 34 | "@vitejs/plugin-react": "^4.2.1", 35 | "autoprefixer": "^10.4.19", 36 | "eslint": "^8.57.0", 37 | "eslint-plugin-react-hooks": "^4.6.0", 38 | "eslint-plugin-react-refresh": "^0.4.6", 39 | "postcss": "^8.4.38", 40 | "tailwindcss": "^3.4.3", 41 | "typescript": "^5.2.2", 42 | "vite": "^5.2.0" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/szguoxz/newoaksai-chatbubble/deebbc88eae8c67067e9157418aea27a58bd28da/public/logo.png -------------------------------------------------------------------------------- /src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { ConfigProvider } from "antd"; 3 | import { RouterProvider } from "react-router-dom"; 4 | import { router } from "@/router"; 5 | 6 | export default function App() { 7 | return ( 8 | 9 | 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import App from "./App.tsx"; 4 | import "./index.css"; 5 | 6 | ReactDOM.createRoot(document.getElementById("root")!).render(); 7 | -------------------------------------------------------------------------------- /src/pages/chatbot/components/CommonExpress.tsx: -------------------------------------------------------------------------------- 1 | interface CommonExpressionsProps { 2 | onClick: (str: string) => void; 3 | data?: Array; 4 | color?: string; 5 | } 6 | 7 | export default function CommonExpressions({ 8 | data = [], 9 | onClick, 10 | color = '#828fff' 11 | }: CommonExpressionsProps) { 12 | return ( 13 |
14 | {/* absolute bottom-0 right-0 */} 15 | {data.map((item, index) => ( 16 |

onClick && onClick(item)} 24 | > 25 | {item} 26 |

27 | ))} 28 |
29 | ); 30 | } 31 | -------------------------------------------------------------------------------- /src/pages/chatbot/components/Header.tsx: -------------------------------------------------------------------------------- 1 | import React, { CSSProperties } from 'react'; 2 | import { SyncOutlined } from '@ant-design/icons'; 3 | 4 | interface HeaderProps { 5 | headerStyle?: CSSProperties; 6 | avatar?: string; 7 | title?: string; 8 | extra?: React.ReactNode; 9 | onRefresh?: () => void; 10 | } 11 | 12 | export default function Header({ 13 | headerStyle, 14 | avatar, 15 | title, 16 | extra, 17 | onRefresh 18 | }: HeaderProps) { 19 | return ( 20 | <> 21 |
25 |
26 | {avatar && ( 27 | 31 | )} 32 |
{title}
33 |
34 |
35 | 36 | {extra} 37 |
38 |
39 |
40 | 41 | ); 42 | } 43 | -------------------------------------------------------------------------------- /src/pages/chatbot/components/InputToolbar.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | import SendButton from './SendButton'; 3 | import MessageTextArea from './MessageTextArea'; 4 | import clsx from 'clsx'; 5 | 6 | interface InputToolbarProps { 7 | placeholder: string; 8 | color: string; 9 | loading: boolean; 10 | disabled: boolean; 11 | onSend: (v: string) => void; 12 | } 13 | 14 | export default function InputToolbar({ 15 | placeholder, 16 | color, 17 | loading, 18 | disabled, 19 | onSend 20 | }: InputToolbarProps) { 21 | const [value, setValue] = useState(''); 22 | 23 | return ( 24 |
25 |
31 | { 38 | if (loading) { 39 | return null; 40 | } 41 | onSend(value); 42 | setValue(''); 43 | }} 44 | /> 45 |
46 | { 50 | if (loading) { 51 | return null; 52 | } 53 | onSend(value); 54 | setValue(''); 55 | }} 56 | /> 57 |
58 |
59 |
60 | ); 61 | } 62 | -------------------------------------------------------------------------------- /src/pages/chatbot/components/Markdown.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/no-explicit-any */ 2 | import ReactMarkdown from "react-markdown"; 3 | import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"; 4 | import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism"; 5 | 6 | interface MarkdownProps { 7 | content: string; 8 | } 9 | 10 | export default function Markdown({ content }: MarkdownProps) { 11 | return ( 12 | ( 15 |

{props.children}

16 | ), 17 | h2: (props: any) => ( 18 |

{props.children}

19 | ), 20 | h3: (props: any) => ( 21 |

{props.children}

22 | ), 23 | blockquote: (props: any) => ( 24 |
{props.children}
25 | ), 26 | a: (props: any) => ( 27 | 28 | {props.children} 29 | 30 | ), 31 | ul: (props: any) =>
    {props.children}
, 32 | ol: (props: any) =>
    {props.children}
, 33 | li: (props: any) => ( 34 |
  • 40 | {props.children} 41 |
    • 42 | ), 43 | code({ inline, className, children, ...props }: any) { 44 | if (inline) { 45 | return ( 46 | 47 | {children} 48 | 49 | ); 50 | } 51 | const match = /language-(\w+)/.exec(className || ""); 52 | return !inline && match ? ( 53 | 60 | ) : ( 61 | 62 | {children} 63 | 64 | ); 65 | }, 66 | }} 67 | > 68 | {content} 69 |     70 | ); 71 | } 72 | -------------------------------------------------------------------------------- /src/pages/chatbot/components/MessageBubble.tsx: -------------------------------------------------------------------------------- 1 | import { ReactNode, PropsWithChildren } from "react"; 2 | import { 3 | CustomerServiceOutlined, 4 | ExclamationCircleFilled, 5 | } from "@ant-design/icons"; 6 | import Markdown from "./Markdown"; 7 | import clsx from "clsx"; 8 | 9 | export interface Message { 10 | content: string; 11 | type: 0 | 1 | 2 | 3; // 0 表示用户消息; 1 表示AI回复消息; 2 表示人工回复消息 3 表示系统消息 12 | messageId?: number; 13 | loading?: true; 14 | status?: "success" | "error"; 15 | } 16 | 17 | interface MessageBubbleProps { 18 | text: string; 19 | messageType: Message["type"]; 20 | loading?: boolean; 21 | status?: Message["status"]; 22 | textColor?: string; 23 | bgColor?: string; 24 | footer?: ReactNode; 25 | } 26 | 27 | export default function MessageBubble({ 28 | bgColor, 29 | textColor, 30 | text, 31 | messageType = 1, 32 | loading, 33 | status, 34 | footer, 35 | }: MessageBubbleProps) { 36 | const isUserMsg = messageType === 0; 37 | const userMsgStyle = isUserMsg 38 | ? { 39 | backgroundColor: bgColor || "#3b81f6", 40 | color: textColor || "#fff", 41 | } 42 | : undefined; 43 | 44 | if (!loading && !text) { 45 | return null; 46 | } 47 | 48 | if (messageType === 3) { 49 | return ; 50 | } 51 | 52 | return ( 53 |
    57 | 58 |
    69 | {!loading && isUserMsg ? ( 70 | 71 | ) : ( 72 | 73 | )} 74 | {footer} 75 | {messageType === 2 && ( 76 |

    77 | 78 |   Reply by human 79 |

    80 | )} 81 |
    82 |     83 |
    84 | ); 85 | } 86 | 87 | function Message({ text }: { text: MessageBubbleProps["text"] }) { 88 | return
    {text}
    ; 89 | } 90 | 91 | function SystemMessage({ text }: { text: string }) { 92 | return ( 93 |
    94 |

    95 | {text} 96 |

    97 |
    98 | ); 99 | } 100 | 101 | function MessageStatus({ 102 | direction, 103 | status, 104 | children, 105 | }: PropsWithChildren<{ 106 | status: Message["status"]; 107 | direction: "left" | "right"; 108 | }>) { 109 | if (!status || status === "success") { 110 | return children; 111 | } 112 | return ( 113 | <> 114 | {direction === "left" && ( 115 | 116 | )} 117 | {children} 118 | {direction === "right" && ( 119 | 120 | )} 121 | 122 | ); 123 | } 124 | -------------------------------------------------------------------------------- /src/pages/chatbot/components/MessageContainer.tsx: -------------------------------------------------------------------------------- 1 | import { HTMLAttributes, LegacyRef, forwardRef } from 'react'; 2 | 3 | function MessageContainer( 4 | { className, ...props }: HTMLAttributes, 5 | ref: LegacyRef 6 | ) { 7 | return ( 8 |
    13 | ); 14 | } 15 | 16 | export default forwardRef(MessageContainer); 17 | -------------------------------------------------------------------------------- /src/pages/chatbot/components/MessageTextArea.tsx: -------------------------------------------------------------------------------- 1 | import { useRef } from "react"; 2 | import { useEventListener, useUpdateEffect } from "ahooks"; 3 | 4 | interface MessageTextProps { 5 | placeholder: string; 6 | loading: boolean; 7 | disabled: boolean; 8 | value: string; 9 | onChange: (v: string) => void; 10 | onPressEnter?: (v: string) => void; 11 | } 12 | 13 | export default function MessageText({ 14 | placeholder, 15 | loading, 16 | disabled, 17 | value, 18 | onChange, 19 | onPressEnter, 20 | }: MessageTextProps) { 21 | const textareaRef = useRef(null); 22 | 23 | useUpdateEffect(() => { 24 | !loading && textareaRef.current?.focus(); 25 | }, [loading]); 26 | 27 | useEventListener( 28 | "input", 29 | (e: any) => { 30 | const lineHeight = parseInt( 31 | getComputedStyle(textareaRef.current as any).lineHeight 32 | ); 33 | const maxHeight = lineHeight * 5; 34 | e.target.style.height = lineHeight + "px"; 35 | const scrollHeight = e.target.scrollHeight; 36 | e.target.style.height = 37 | scrollHeight < maxHeight ? scrollHeight + "px" : maxHeight + "px"; 38 | }, 39 | { target: textareaRef } 40 | ); 41 | 42 | const defaultPlaceholder = 43 | navigator.language === "zh-CN" 44 | ? "按下 Ctrl + Enter 换行，按下 Enter 发送消息" 45 | : "Ctrl + Enter line feed, Enter send message; Please type a message."; 46 | 47 | return ( 48 |