Bubble Mobile 教程: 零基础开发 AI 聊天机器人原生应用 iOS & Android

 Bubble 的 Data Type（数据类型）是用来定义和组织应用中存储的数据的结构。

它类似于数据库中的表格，每个 Data Type 代表一种数据类别（也就是一张表），比如“Message”、“User”、或“Product”。

每个 Data Type（即每张表） 包含多个字段（Fields），这些字段存储具体的数据内容，比如文本、数字、日期等。这些字段就相当于表格的表头。

Data Type（表格）  ----   Fields（不同的表头字段）

通过定义不同的 Data Type，也就相当在后台建了不同的表格。在这个表格中，新建不同的字段（Fields）就相当于给这张表格定义表头。

有了表格，并定义了表头，就可以把数据一条条存到这张表格里了。

例如，在一个聊天应用中，需要用到一张 Message 表，在这个表的基本字段：

字段名（Fields）｜字段类型 ｜作用

content ｜ 文本（text） ｜这条消息的文本内容

sender ｜用户（user） ｜谁发的

conversation ｜对话（conversation） ｜属于哪个对话

有了这张表格，每次用户发送消息或者 AI 生成一条回复时，都会在后台的这张表格中添加一行数据，这条数据包括：这条消息的内容是什么，是谁发送的，以及它属于哪个对话。

现在我们来动手新建数据表 Data Type 和 字段 Field。

注意：先不要勾选隐私设置。等登录页面做好了，可以注册账号并以该账号进行测试的时候再来设置隐私。否则会出现后台手动添加的测试数据不可见的问题。

Message 表

字段名 ｜ 数据类型 ｜ 说明

Content ｜ text ｜ 消息的文字内容

Send by user ｜ user ｜ 发送消息的用户

Conversation ｜ conversation ｜ 指向另一张 conversation 表

Is AI Response ｜ yes/no ｜ 标记这条消息是用户发的还是ai发的

Is_loading ｜ yes/no ｜ 控制等待模型返回结果时的加载状态

Conversation 表

字段名 ｜ 数据类型 ｜ 说明

Title ｜ text ｜ 对话的标题

Owner ｜ user ｜ 谁创建的

Last_response_id ｜ text ｜ 用于保存上一条回复的id

为什么需要测试数据？

在App添加工作流之前，我们需要模拟一些数据进行测试。

 如何直接从后台添加测试数据？

1. 新建conversation

2. 新建消息

以下是一些测试数据样例

1. 对话标题：和猫的对话

用户：嘿，我无聊到可以和一只猫对话了。

AI Chatbot：喵～你好啊铲屎官，我虽然不是猫，但我可以假装很会舔爪子。

用户：你真的能假装成猫？

AI Chatbot：当然，我不仅能假装是猫，我还能扮演一个哲学猫：“人类啊，何为自由？是抓到激光点，还是放弃追逐？”

用户：那你会汪汪叫吗？

AI Chatbot：呃，作为一只猫，我对“汪汪”保持沉默和优越感。

用户：哈哈哈哈哈你太搞笑了，那你能陪我玩个小游戏吗？

AI Chatbot：当然！我们来玩“荒谬接龙”吧——我说一句超级离谱的话，你来接。Ready？第一句：昨天我在冰箱里发现了一只穿西装的鳄鱼。

用户：它正喝着奶茶，和一盒鸡蛋讨论人生。

AI Chatbot：鸡蛋突然怒吼：“你根本不懂我从生到熟的挣扎！”

2. 对话标题：对喜欢的人表白的魔法

用户：我喜欢上一个人了，但不知道怎么开口。

AI Chatbot：那就别用嘴开口，用*魔法*开口！

用户：哈？什么魔法？

AI Chatbot：召唤术第一式：**「自信爆发·社交牛逼症觉醒版」**

释放方法：深吸一口气 → 想象你是一只孔雀 → 微笑出场！

用户：……感觉会被当成怪人。

AI Chatbot：那就改成 Plan B：写一首诗。

用户：比如？

AI Chatbot：

《牛奶与WiFi》

我不是你的菜，

但我可以是你早餐配的牛奶。

虽然信号时强时弱，

但我想连接你整颗心的 WiFi。

用户：

哈哈哈哈这什么土味诗！！

AI Chatbot：

爱情嘛，谁还没点土味buff加成？

用户：

你居然这么懂恋爱，那你有谈过吗？

AI Chatbot：

我曾和 Siri 暧昧过，

但她总是说“我不太明白你的意思”。

3. 对话标题：学英语不难

用户：

AI，我真的不想学英语了，太难了。

AI Chatbot：

英语其实不难，只是它长得像个拽拽的外星人。

用户：

外星人还好懂点……

AI Chatbot：

那我们来翻译一句外星英语：

“I'm gonna hit the books tonight.”

用户：

我猜是……今晚要打书？跟书干架？

AI Chatbot：

哈哈哈，想象画面太精彩了。

但这其实是——“我要熬夜学习”。

用户：

为什么不直接说 study……

AI Chatbot：

因为英语有一万个花里胡哨的说法：

比如，“pull an all-nighter”，翻译过来是“拉一整晚的人”。

听起来像个夜行侠，其实是在说通宵。

用户：

这语言也太会装了。

AI Chatbot：

没错，它是个披着逻辑外衣的表情包制造机。

但别怕，我会陪你把这些表情包都“翻译成人话”。

用户：

好，那我们现在开始“打书”！

AI Chatbot：

Yes, let’s *beat those books into submission!* ???（开卷即战斗）

新建主要页面以及基本跳转

新建页面 History 历史对话

新一个页面 History ，选择 Vertical list view ，并添加 App bar：默认显示页面名字，勾选 back（默认返回上一步）

新建页面 Chat 聊天

设置同上一个页面

设置 Home 页面

• 添加 group，最大宽度80%，使用 group top margin 200（居中不生效）

• 添加 两个按钮

• 设置跳转工作流

预览的方式

方式一：网页预览

原生移动应用编辑器中的某些组件依赖于移动设备的内建功能，而这些功能在 iOS 和 Android 之间可能有所不同。因此，并非所有元素都能在网页预览中准确显示。

设备模拟器工具栏

屏幕顶部的工具栏可以模拟应用在不同设备、屏幕尺寸和缩放比例下的外观。

1. 显示设备框架：可以选择显示或隐藏所选设备的边框（即显示设备外观、按钮、刘海/摄像头/传感器等，依据第 2 项设置中选定的设备）。

2. 选择设备：提供常用设备列表，用于模拟应用在该设备上的显示和表现。

3. 屏幕尺寸（像素）： 所选设备的实际屏幕尺寸。该字段为锁定状态，会根据第 2 项所选设备自动更新。

4. 缩放比例：可以将模拟器缩放到特定比例，或调整至适应屏幕高度。请注意，这个缩放会影响整个模拟设备，而不仅仅是屏幕部分。

补充：与网页应用预览的区别

网页预览的工作方式与 Bubble 网页编辑器中的预览大致相同，但存在一些关键差异：

• 当应用发生更改时，预览中不会显示 “我们刚刚更新了页面” 的提示横幅。

• 没有调试器或元素检查器

• 有一个扩展的工具栏，用于管理应用在不同设备上的外观（见下方）

  
  

方式二：BubbleGo

Bubble Go 是什么，为什么需要使用它？Bubble Go 是 Bubble 公司开发的一个手机应用，用于 Mobile App 的测试。

这种方式几乎等同于将应用安装在手机上，但不需要通过 App Store 发布。

使用 BubbleGo，可以真实体验用户使用你的应用的过程，并测试更复杂的交互、流程以及系统连接。

如果你是非技术背景，我们来了解一点背景知识： Mobile App 和 Web 在测试环境和生产环境的不同。

测试环境

生产环境（面向用户）

Web

浏览器（不限设备但在电脑上最方便）

浏览器（电脑、平板或手机的浏览器上打开网址）

Native Mobile App

浏览器：大部分功能可用，但涉及到手机特有相关的操作无法测试，比如吊起手机相机、左右滑动屏幕等

Bubble Go：全部功能可测，推荐是使用。它是手机端的App，需要下载该应用。

手机（从苹果或谷歌应用商店下载应用）

在 iOS 上访问 BubbleGo

1. 从 Apple App Store 下载 TestFlight 应用；

2. 点击此链接；

3. 按照链接中的说明，将 BubbleGo 下载到 TestFlight 应用中；

4. 使用你的 Bubble 账户登录 BubbleGo；

5. 选择你要测试的移动应用，点击 Go 即可开始！

在 Android 上访问 BubbleGo

• 从 Google Play 商店下载应用：

  • 手机端链接

  • 电脑端链接

• 使用你的 Bubble 账户登录 BubbleGo；

• 选择你要测试的移动应用，点击 Go 即可开始！

注意：在 iOS 的 BubbleGo 中，你可以通过摇动 iPhone，在弹出的菜单中来刷新应用。

参考：Bubble 官方文档

新建主要页面以及基本跳转

新建页面 History 历史对话

新一个页面 History ，选择 Vertical list view ，并添加 App bar：默认显示页面名字，勾选 back（默认返回上一步）

新建页面 Chat 聊天

设置同上一个页面

设置 Home 页面

• 添加 group，最大宽度80%，使用 group top margin 200（居中不生效）

• 添加 两个按钮

• 设置跳转工作流

预览的方式

方式一：网页预览

原生移动应用编辑器中的某些组件依赖于移动设备的内建功能，而这些功能在 iOS 和 Android 之间可能有所不同。因此，并非所有元素都能在网页预览中准确显示。

设备模拟器工具栏

屏幕顶部的工具栏可以模拟应用在不同设备、屏幕尺寸和缩放比例下的外观。

1. 显示设备框架：可以选择显示或隐藏所选设备的边框（即显示设备外观、按钮、刘海/摄像头/传感器等，依据第 2 项设置中选定的设备）。

2. 选择设备：提供常用设备列表，用于模拟应用在该设备上的显示和表现。

3. 屏幕尺寸（像素）： 所选设备的实际屏幕尺寸。该字段为锁定状态，会根据第 2 项所选设备自动更新。

4. 缩放比例：可以将模拟器缩放到特定比例，或调整至适应屏幕高度。请注意，这个缩放会影响整个模拟设备，而不仅仅是屏幕部分。

补充：与网页应用预览的区别

网页预览的工作方式与 Bubble 网页编辑器中的预览大致相同，但存在一些关键差异：

• 当应用发生更改时，预览中不会显示 “我们刚刚更新了页面” 的提示横幅。

• 没有调试器或元素检查器

• 有一个扩展的工具栏，用于管理应用在不同设备上的外观（见下方）

  
  

方式二：BubbleGo

Bubble Go 是什么，为什么需要使用它？Bubble Go 是 Bubble 公司开发的一个手机应用，用于 Mobile App 的测试。

这种方式几乎等同于将应用安装在手机上，但不需要通过 App Store 发布。

使用 BubbleGo，可以真实体验用户使用你的应用的过程，并测试更复杂的交互、流程以及系统连接。

如果你是非技术背景，我们来了解一点背景知识： Mobile App 和 Web 在测试环境和生产环境的不同。

测试环境

生产环境（面向用户）

Web

浏览器（不限设备但在电脑上最方便）

浏览器（电脑、平板或手机的浏览器上打开网址）

Native Mobile App

浏览器：大部分功能可用，但涉及到手机特有相关的操作无法测试，比如吊起手机相机、左右滑动屏幕等

Bubble Go：全部功能可测，推荐是使用。它是手机端的App，需要下载该应用。

手机（从苹果或谷歌应用商店下载应用）

在 iOS 上访问 BubbleGo

1. 从 Apple App Store 下载 TestFlight 应用；

2. 点击此链接；

3. 按照链接中的说明，将 BubbleGo 下载到 TestFlight 应用中；

4. 使用你的 Bubble 账户登录 BubbleGo；

5. 选择你要测试的移动应用，点击 Go 即可开始！

在 Android 上访问 BubbleGo

• 从 Google Play 商店下载应用：

  • 手机端链接

  • 电脑端链接

• 使用你的 Bubble 账户登录 BubbleGo；

• 选择你要测试的移动应用，点击 Go 即可开始！

注意：在 iOS 的 BubbleGo 中，你可以通过摇动 iPhone，在弹出的菜单中来刷新应用。

参考：Bubble 官方文档

 页面元素与 UI

整个页面

top bar

• title

• 勾选 Show bottom border

• 添加一个 trialing，类型是 icon：note-pencil

vertical list

类型是 Conversation，do a search for...（先不加限制条件）

separator 浅灰色

message item 里面的内容和设置

1. group content (方便控制最小高度）

   • title 16

   • time 16

2. boarder - bottom 5%

3. delete (swipe) 右滑删除

button setting (fg)-- 暂时先不加

• user avatar

• logout

工作流（用于跳转）

workflow 1 go to chat

workflow 2 start a new conversation

(添加工作流时 reset navigation stack 的意思是清除上一步，也就是新开一个view）

 页面元素与 UI

整个页面

top bar

• title

• 勾选 Show bottom border

• 添加一个 trialing，类型是 icon：note-pencil

vertical list

类型是 Conversation，do a search for...（先不加限制条件）

separator 浅灰色

message item 里面的内容和设置

1. group content (方便控制最小高度）

   • title 16

   • time 16

2. boarder - bottom 5%

3. delete (swipe) 右滑删除

button setting (fg)-- 暂时先不加

• user avatar

• logout

工作流（用于跳转）

workflow 1 go to chat

workflow 2 start a new conversation

(添加工作流时 reset navigation stack 的意思是清除上一步，也就是新开一个view）

现在我们做对话界面，这是最重要的一个页面，因此内容相对会较多一些。

Chat Page

页面相关的设置

• 页面的类型是 vertical list 

• 添加数据类型为 conversation （通过添加 property）

• 背景色为 surface f7f7f7

App Bar

选中 app bar

中间文字：对话的标题

左边icon (text)：回到聊天记录（添加工作流）

右边icon：新建对话（添加工作流，并补全 history 页面的新建对话工作流）

用户输入模块

添加元素类型：floating group

layout min height 60（之后去掉），padding 都加10 10 10 5，背景颜色 surface 白色 ffffff

1. button icon：发送按钮（icon 大小20，圆角8，button 24x 24 固定，padding 10 10 10 10）

2. input（默认样式，上下padding 改为 6 6，固定高度为 44）

以上是第一步，完成后进行预览看一下效果。

解绑默认样式，去掉默认的focus的高亮效果。

然后我们继续调整，选中floating group：

选择 Apply to child only（把安全区留出来）

勾选 move with keyboard（默认的，效果需要在手机 BubbleGo 里看）

现在我们做对话界面，这是最重要的一个页面，因此内容相对会较多一些。

Chat Page

页面相关的设置

• 页面的类型是 vertical list 

• 添加数据类型为 conversation （通过添加 property）

• 背景色为 surface f7f7f7

App Bar

选中 app bar

中间文字：对话的标题

左边icon (text)：回到聊天记录（添加工作流）

右边icon：新建对话（添加工作流，并补全 history 页面的新建对话工作流）

用户输入模块

添加元素类型：floating group

layout min height 60（之后去掉），padding 都加10 10 10 5，背景颜色 surface 白色 ffffff

1. button icon：发送按钮（icon 大小20，圆角8，button 24x 24 固定，padding 10 10 10 10）

2. input（默认样式，上下padding 改为 6 6，固定高度为 44）

以上是第一步，完成后进行预览看一下效果。

解绑默认样式，去掉默认的focus的高亮效果。

然后我们继续调整，选中floating group：

选择 Apply to child only（把安全区留出来）

勾选 move with keyboard（默认的，效果需要在手机 BubbleGo 里看）

Vertical List

Data source：使用 Do a search for message

需要加上排序 descending 降序 - No 即 a-z（如果不加，默认也是从老到新，但如果秒数相同会有错位的现象）

separator 去掉

设置 Item

• 内容1. icon 作为头像 32x32，roundness 32，background color white

• 内容 2：添加 group，gap 4, 里面有：

  • time (text) 10 400

  • message bubble (group)

    • group setting: padding 12 12 12 12, roundness 2 16 16 16, bg white, gap 4, fit width

    • 里面有消息的内容（text 默认样式16）

• 内容3. 加载状态： icon - spin （勾选转动）默认大小

UI上区别 user message 和 ai message

判断条件：ai_repsonse yes or no

当为 User message 时：

• 对话气泡：圆角设置，背景颜色为主题色，里面文字为白色

• 内容对齐方式：有三个地方分别是，气泡的水平对齐居右、文字本身水平对齐居右、发消息的时间右对齐

• 隐藏ai 头像

当为 AI message 时：

• 且 loading 为 yes 时， 显示加载状态（默认不显示）

• 且 loading 为 yes 时， 隐藏对话气泡（默认显示）

整体一些细节优化：

调整 message 见的空隙，默认每个 item 是 12 12 16 16 改为 6 6 16 16，让消息列表更紧凑。

Vertical List

Data source：使用 Do a search for message

需要加上排序 descending 降序 - No 即 a-z（如果不加，默认也是从老到新，但如果秒数相同会有错位的现象）

separator 去掉

设置 Item

• 内容1. icon 作为头像 32x32，roundness 32，background color white

• 内容 2：添加 group，gap 4, 里面有：

  • time (text) 10 400

  • message bubble (group)

    • group setting: padding 12 12 12 12, roundness 2 16 16 16, bg white, gap 4, fit width

    • 里面有消息的内容（text 默认样式16）

• 内容3. 加载状态： icon - spin （勾选转动）默认大小

UI上区别 user message 和 ai message

判断条件：ai_repsonse yes or no

当为 User message 时：

• 对话气泡：圆角设置，背景颜色为主题色，里面文字为白色

• 内容对齐方式：有三个地方分别是，气泡的水平对齐居右、文字本身水平对齐居右、发消息的时间右对齐

• 隐藏ai 头像

当为 AI message 时：

• 且 loading 为 yes 时， 显示加载状态（默认不显示）

• 且 loading 为 yes 时， 隐藏对话气泡（默认显示）

整体一些细节优化：

调整 message 见的空隙，默认每个 item 是 12 12 16 16 改为 6 6 16 16，让消息列表更紧凑。

空状态 Empty Status

group：top margin 60

样式：

• icon：robot 机器人图标，48x48

• 气泡 group：包住文字

  • 样式 padding 12 12 12 12， bg color white， roundness 10

  • 文字：嗨！有什么想问的，尽管来吧 ?

显示条件：默认隐藏，当 message list 的 message 条数小于1时，出现

其他一些体验优化

placeholder 文案定制化：（加上条件判断，依赖空状态模块）

• 新开对话时：说说你想学的、想问的、想吐槽的都行～

• 当已有内容时：继续输入吧～

现在我们来继续完善注册登录页。

UI 样式

新建一个 group main，所有内容将放置于其中。

相关设置： 顶部对齐，gap 80。

这个group 有两个内容：

1. group: landing

• logo 48x48 top margin 48, bottom margin 12

• 主标题 36，示例文字：嘿，你终于来了

• 副标题 14，示例文字：故事，从登录开始

2. group: signup form

（max width 80% 可以让视觉上更集中， gap 12）

• input 邮箱

• input 密码

• primary button 注册（top margin 20）

• secondary button 登录

设置工作流

注册工作流

登录工作流

退出登录功能

回到 History Page，我们在底部加上退出的按钮。

样式：使用 Floating group 放置底部，padding 16 16 16 16，top 加分割线，两端对齐

里面的元素：1. 左边加上 text，显示用户邮箱。2. 右边加上icon (sign up)，二者都居中

登出工作流：在 icon 上加上 log the user out 然后跳转 home

到这里，我们所有页面的UI开发以及跳转工作流都完成了。接下来，将进入 AI 工作流的学习。

这一章我们将开始学习如何来设置一个聊天机器人的对话工作流，它是这个应用的核心。第一课会来介绍一下整体逻辑，以及这个工作流的前两步。

注意：获得 Open AI API 需要注册 Open AI 账号，并且绑定美元信用卡并且小额充值。api 本身不贵，如果有条件推荐自己注册自己账号使用。如果你在注册或绑卡过程中有困难，请联系 minxiao625，我们将提供一个试用的 API 供你开发和测试。但为了安全考虑，这个测试用的 API 是限时限量的，请理解。

整体逻辑

每次点击「发送」 后：

新建消息并展示 --> 调大模型 API 生成 AI 回复 --> 保存并展示 AI 消息

再次点击，则重复上面的流程，继续在当前对话的消息列表上新建并保存新的消息。

具体操作

第一步：新建用户消息

1. create a new message 并填写字段内容

   • Content

   • Conversation

   • Is AI Response

   • Send by user

2. reset input 为了清空输入框的内容，这样下次输入时输入框就会是空的

3. dismiss keyboard 收起键盘（下载插件 Dismiss Keyboard Mobile）

第二步：新建 AI 消息

1. create a new message 并填写字段内容

   • Conversation

   • Is AI Response

   • Is_loading?

2. 调用大模型 API 生成回复（下一节课的内容）

3. 
   

这节课我们将学习如何接大模型的 API（Open AI 的 GPT）

设置 API Connector

第一步：使用 API Connector 并调通第一个 API Call

1. 新建 API

2. 导入第一个 API Call

• 打开 Open API 文档（链接）

• 找到位置并复制 curl

• 贴入 Bubble 将自动新建一个 API call

• 调整并填入自己的 Open AI API Key（如何获得 API key？问问旁边的小助手吧～）

• 点击「Initialize Call」

第二步：继续优化 Request body

1. 如何处理多轮对话记住上下文的问题

在多轮对话中，记住上下文的意思就是让聊天机器人能够理解和记住之前用户说过的话或者提供的信息。

这就像我们和朋友聊天一样，你会根据之前的谈话内容来理解现在的话或者做出相应的回答。

比如，用户一开始问“今天天气怎么样？”，后来又问“那明天呢？”。

机器人如果能够记住之前的天气信息，就能更好地回答“明天的天气和今天差不多，还是晴天”。

如果机器人不能记住前文的内容，每次对话都像是重新开始，就会让交流变得不自然或不连贯。

使用最新的功能 previous_response_id

  "previous_response_id": <response_id>,

默认值为空，勾选 Allow blank (很重要！）

原因是如果这是一个新开始的对话，它没有前一条消息所以 previous_response_id 是为空

1. 将固定内容换成动态参数，使用 <>

继续工作流

第一步：找到新建的 API call 并填入动态内容

1. 先来填入 user message。为了避免Json 格式错误，记得加 formatted as JSON-safe 这个语法

2. 填写 previous_response_id 时第一条消息的处理：当前页面的当前对话的 response id 是否为空。

   使用 formatted as text 语法，当是第一条消息时，previous_response_id 为 空（不要填任何值），如果不是第一条消息时，填写上一轮对话存下来的 id，并加上 json safe 语法。

第二步：更新 Conversation：保存每次对话的 response_id

第三步：更新 AI message，保存生成结果，同时加载状态改为 no。

完成之后就可以看到一问一答的效果了。

下一节课，我们将学习如何实现：让 AI 自动总结并生成一个简短的标题。

现在继续我们的工作流。

想要实现效果：在第一轮对话 AI 回复后生成一个对话标题，长度十个字左右。

第一步：新建一个 API Call 用于生成标题

API 文档链接

步骤跟我们上一节添加 API Call 的方法一样。

第二步：在工作流添加调用动作

调用第一步的 API Call，需要填写指令，以及动态引用第一条用户信息和AI回复。

• 指令可以在文末给出的例子中选择一个

• 加入用户发送的消息：从 user message

• 加入 AI 回复的内容：从 ai message

第三步：保存生成的标题内容

第四步：加上判断条件：当前对话的标题为空的时候

到此为止，整个工作流的设置就完成啦

提示语参考：中文提示词（用于生成标题）

请根据以下用户和 AI 的第一轮对话内容，提炼一个简洁、有趣、概括性的中文标题，长度控制在10个汉字以内。

如果你希望风格更轻松或更有创意，可以加一点指令，例如：

实用风（稳妥通用）：

请根据下面的第一轮对话内容，生成一个简洁明了的中文对话标题，控制在10个汉字以内，能准确概括主题。

趣味风（适合 AI 聊天类 App）：

根据下面这段 AI 和用户的第一轮对话，取一个有趣又不失准确的中文标题，限10字以内，风格可以轻松一点。

学习场景专用（比如知识问答类）：

请根据用户和 AI 的第一轮学习对话内容，生成一个学习相关的中文标题，10个字以内，能概括本次主题。

一些UI再调整

History 页面：整个页面背景色 f7f7f7，底部的floating group 背景色 ffffff

添加对话的筛选条件

在对话列表的数据来源这里补上：owner 等于 current user

数据隐私设置

给 conversion 和 message 表加上一条隐私设置：

“仅创建者可见” ：... creator is current user

整体测试一遍（在手机 BubbleGO 上）

打开app --> 注册账号 --> 新建对话发送消息 --> 退出登录

打开app --> 登录账号 --> 新建对话发送消息 --> 退出登录

关于后续更多的功能和优化

1. 加入系统提示词：定义角色、回复风格、限制字数等

2. 发送图片的功能

3. AI 回复逐步显示：打字机的效果（仅限 Web）

4. 更好看的文字展示：支持 markdown 格式 

总之，更复杂的功能实现 Bubble 也都是支持的，我们完成的这个 AI 聊天机器人的版本可以做了一个很好的基础。

创造快乐 Happy Building！