参考来自 https://github.com/wongjohn/for-my-love 并做了部分改造
以聊天交互的方式向女朋友表达想说的话,支持便捷的内容配置,急速替换为自己想要的内容,点击下方链接预览效果。
- 国内用户访问:https://sg.chenjianhui.site/girlfriend-gift-collection/chat-want-to-say/
- Github Pages: https://calebman.github.io/girlfriend-gift-collection/chat-want-to-say/
项目 chat-want-to-say 根目录中的 .env.* 为环境配置文件,默认打包使用 .env.production 配置,配置内容如下所示:
配置项 | 含义 | 备注 |
---|---|---|
VITE_APP_TITLE | 聊天框标题 | 可填入如“与XXX正在聊天”等内容 |
VITE_BASE_URL | 网页基础路径 | 如果部署在服务器的二级路径则需要填写 |
VITE_CHAT_OPTIONS_PATH | 聊天内容配置(重要) | 填入内容对应的 json 文件地址,寻找 public 目录下的文件 |
参考 .env.development 一个完整的配置文件如下所示:
VITE_APP_TITLE=与XXX聊天中
VITE_BASE_URL=chat-interactive-demo/
VITE_CHAT_OPTIONS_PATH=options/demo/chat.json
聊天内容配置由一个 json 数组构成,数组内每一项对应一段聊天内容,其支持的配置信息如下所示:
配置项 | 含义 | 类型 | 备注 |
---|---|---|---|
msgs | 聊天内容 | 数组 | 支持文本/图片/信件/VLog等形式内容,文本情况下数组传入多个内容可以形成回退效果。 |
msgInputSpeed | 文本输入速度 | 数字 | 默认为 150,当内容为文本时,代表键入数组,单位为 ms。 |
triggerNextAction | 触发下一段聊天的行为配置 | 对象 | 默认为空,当有内容时会暂停等待用户交互触发下一个聊天内容。 |
author | 聊天内容的归属人 | 字符串 | 默认为空,当需要模拟对方有内容输入时,可以填入 “me” |
用户交交互的行为触发 triggerNextAction 配置信息如下所示:
配置项 | 含义 | 类型 | 备注 |
---|---|---|---|
type | 触发行为的类型 | 字符串 | 目前针对不同的内容组件支持两种类型值,userInput/componentClose,具体解释见表格下方所示 |
options | 触发行为的配置 | 对象 |
triggerNextAction.type 解释
- userInput: 代表等待用户输入指定内容完成一轮交互,支持关键字配置
- componentClose: 代表等待用户关闭组件完成一轮交互,常用于信件/VLog等组件,用户点击关闭回到聊天页面触发后续的内容播放
triggerNextAction.options 解释,当 triggerNextAction.type = userInput 时,该配置有效
- resolveKeyTexts: 类型为数组,触发下一行为的关键词,只需要包含即可,比如 ["好的", "可以", "同意"],用户只要输入如 "好的呢" 就会触发下一行为
- rejectKeyTexts: 类型为数组,触发下一行为的黑名单关键词,只需要包含即可,优先级高,比如 ["不想"],用户只要输入 "我不想" 就会已经卡在这一聊天内容中
- rejectHitTexts: 类型为数组,交互提示内容,当用户输入不满足预期时,给予提示,提示会按照数组顺序进行,提示不够了会强行触发下一个聊天内容
下面对多种形式的内容做一些说明
- 如下是一条输入速度为 80ms 的文本内容
{ "msgs": ["普通消息,有输入动画"], "msgInputSpeed": 80 }
- 如下是带有回退效果的文本内容
{
"msgs": ["普通消息会回退", "普通消息回退后的结果,也能调整动画速度"],
"msgInputSpeed": 120
}
- 如下是带有触发效果的文本内容
{
"msgs": ["有些心里话,你想听吗?"],
"msgInputSpeed": 40,
"triggerNextAction": {
"type": "userInput",
"options": {
"resolveKeyTexts": ["好的", "可以", "同意", "愿意", "想", "想听", "是" ],
"rejectKeyTexts": ["不想"],
"rejectHitTexts": [
"不听?信不信我分分钟出 bug 给你看?",
"好吧,既然你实在不想听,那我就讲给你听吧~"
]
}
}
}
- 如下是自定义文本颜色的内容
{
"msgs": ["<span style=\"color: red;\">红色的span标签字体</span>"],
"msgInputSpeed": 80
}
图片内容示例如下所示,图片文件放到 public 目录下,使用相对路径引用
{ "msgs": ["<img src='options/demo/imgs/test.png'/>"] }
信件内容示例如下所示,信件内容文件放到 public 目录下,使用相对路径引用,当信件被用户关闭时触发下一段聊天内容
{
"msgs": ["<letter src='options/demo/letters/test.json'/>"],
"triggerNextAction": { "type": "componentClose" }
}
信件的配置项如下所示:
配置项 | 含义 | 类型 | 备注 |
---|---|---|---|
openTip | 信件打开提示 | 字符串 | |
title | 信件标题 | 字符串 | |
speed | 文本输入速度 | 数字 | 信件文字的输入速度 |
paragraphs | 信件段落信息 | 数组 | 数组每一项为字符串,支持文本/图片,具体解释如下所示 |
比如如下的一个信件配置段落含义为,"几场梅雨" 输入完成后停顿 1000ms,然后输入 "几卷荷风".....,段落完成后放置一张图片。
{
"openTip": "Lover",
"title": "给xx的一封信",
"speed": 10,
"paragraphs": [
"几场梅雨^1000,几卷荷风^1000,江南已是烟水迷离。",
"<img src='options/demo/imgs/test.png'/>",
"几场梅雨^1000,几卷荷风^1000,江南已是烟水迷离。",
]
}
VLog内容示例如下所示,视频文件放到 public 目录下,使用相对路径引用,当视频被用户关闭时触发下一段聊天内容
{
"msgs": ["<vlog src='options/demo/vlogs/test.mp4'/>"],
"triggerNextAction": { "type": "componentClose" }
}
cd chat-want-to-say
yarn dev
# see http://localhost:3000/
sh bin/build.sh
cd dist
# 将 dist 目录的内容部署到静态服务器,通过 anywhere 可以预览效果
yarn global add anywhere
anywhere
scp -r chat-want-to-say/dist/** root@domain:/nginx-html/