0.1.18 • Published 7 months ago
hq-aichat-snapshot v0.1.18
使用说明
current version 0.1.11
安装
# 内部仓库
pnpm add hq-aichat
# npm备份包
pnpm add hq-aichat-snapshot
使用
使用hq-aichat-snapshot时注意替换包名
默认配置占用了page=default,自定义page不可使用default字符串
1. 挂载组件及更新入参
import { AiChat, qinyanModel, PDF_LINK_VAR, botAvatorImg, setConfig } from "hq-aichat";
// botAvatorImg:内置头像文件
// PDF_LINK_VAR:开场白文件链接常量,会被替换成fileName和fileUrl
// AiChat 组件入口
// cozeModel等 内置的各种模型配置
setConfig({
// 精准教学跨域发请求需要设置server
server: "https://newcollector.hqjltech.com" ,
// 鉴权请求相关
// 服务名
project:"appfactoryserv",
// 以下为可选参数
// 请求携带的参数
query: {},
// 请求携带的请求头
header: {},
// 希望使用自定义ajax的情况,会按ajax.post(query,{headers})形式调用
ajax: null
});
// targetDom:挂载的dom节点
// props: 组件入参
const { update, dispose } = AiChat(targetDom,{
config :{
page: "page", // 页面key
type: "type", // 类型key
config:{// 当前的默认配置
// 这里的model是key,chat里则是model本身
model: qinyanModel.key,
suggests:[{title:"总结一下",text:""}],
prompt:"hello",
initLoad:"思考中...",
loading:"思考中...",
//...其他配置
}
},
header:{
title:"AI助理", // 头部标题
onClose:()=>{
// 自定义的关闭按钮的点击事件,传了会显示右上角关闭图标
}
},
modal:{
title:"弹窗标题"
},
buttle:{
user:{
// 用户头像里的用户名,会使用最后2个字
text:"用户"
},
// 导出pdf的文件名称,不带后缀
pdfName:"导出文件名"
},
// 是否可以刷新判断,设置为""可以初始不触发请求
ready: "1",
chat:{
// 异步获取文件
async getFile(state) {
// 当前类型,"exported" - 从最近导出获取(若不存在则立即导出获取) | "generate" - 立即导出,自行判断类型决定返回
const { datafrom }=state;
return {fileUrl:"/文件地址",fileType:"pdf",fileName:"test.pdf"};
},
}
});
// dispose:销毁组件
dispose();
// update:入参更新
// 1. object形式更新部分参数,浅合并,内层会覆盖
update({ready: "2"});
// 2. 函数形式更新, 参考immer produce,改在state上
update(state=>{
state.ready = "2";
})
- 删除配置
import { deleteConfig } from "hq-aichat";
deleteConfig().then(isOk=>{
// 删除成功-true,删除失败-false
})
其他说明 1. 代码高亮只包含常用的几种格式,避免冗余的体积 2. katex的公式展示自带60多个字体,基本不会同时都用到,如果直接bundle在一起有几百k在,最好能作为资源按需加载,在项目中没试验过能否分离出来
参数定义
export interface IAiChat {
/** 样式名,设置给最外层 */
class?: string;
/** 样式,设置给最外层 */
style?: any;
/** ref */
ref?: HTMLDivElement | ((el: HTMLDivElement) => void);
/** 设置页是否为弹窗形式,false时为当前面板切换 */
popmodal?: boolean;
/** 对话功能配置,定义见下 */
chat?: IChatConfig;
/** 准备完成的key,这个key改变且不为空时刷新对话,默认为"" */
ready?: string;
/** 可配置项配置 */
config?: {
/** 名称 配合types的选择框模式建议需要title*/
title?: string;
/** 当前页的存储key*/
page?: string;
/** 类型的存储key */
type?: string;
/** 可配置项的默认值,会覆盖组件部分的传参,默认为空 */
/** 使用配置存储的话用这个面板,不使用可配置项功能时,配置在chat和组件配置上*/
config?: Partial<IConfigStore>;
};
/** 结构同config,都是必填项,当前的config会默认作为第一项插入,实际是[config].concat(types) */
types?: IConfigChangeItem[];
/** 页面组件配置部分 */
/** 弹窗配置 */
modal?: {
/** 弹窗标题 */
title?: string;
/** 可开启的类型:页面配置/默认配置 */
panes?: Array<"page"|"type">;
/** 是否可保存到全局 */
saveGlobal?:boolean;
/** 开启拿几个配置面板,默认全部开启 */
tabs?: Array<"style" | "model" | "option">;
/** 选项的默认状态 @default true */
defaultStatus?: boolean;
/** 哪些选项的状态和default不同 */
inverse?: Array<keyof IConfigSave>;
/** 开启几个模型 */
models?: string[];
}
/** 主题名称,默认light,主题样式配置在[data-theme=主题名]的作用域下 */
theme?: string;
/** 全局loading的配置 */
loading?: IChatLoading;
/** 历史记录loading */
hisloading?: IChatLoading;
/** 对话列表外框配置 */
chatlist?: {
/** 样式名 */
class?: string;
/** 样式 */
style?: any;
};
/** 对话气泡配置 */
buttle?: {
/** 机器人配置 */
bot?: IImageAvator;
/** 用户配置 */
user?: IImageAvator;
/** 加载中 */
loading?: IChatLoading;
/** 开场白加载 */
initLoading?: IChatLoading;
/** 提示问题前缀 */
suggestTitle?: string;
/** 导出文件名,不带后缀*/
pdfName?: string | (() => string);
};
/** 输入框,false为不展示 */
search?: {
/** 是否显示Loading */
showLoad?: boolean;
/** 是否显示上传,默认false */
uploadable?: boolean;
/** 最大行数 */
maxRows?: number;
/** 最小行数 */
minRows?: number;
/** 提示语 */
placeholder?: string;
/** 换行/发送策略,默认为true,ctrl+enter换行 */
wrapOnCtrl?: boolean;
/** 加载配置 */
loading?: IChatLoading;
} | false;
/**对话框标题,false为不展示 */
header?: {
/** 标题 */
title?: string;
/** 是否可配置,true时显示"设置" */
configable?: boolean;
/** 关闭函数,有则显示关闭图标 */
onClose?: () => void;
/** 可用的配置的类型列表 */
types?: IConfigChangeItem[];
} | false;
/** 对话框层*/
box?:{
/** 样式名 */
class?: string;
/** 样式 */
style?: any;
}
}
/** 通用加载配置 */
export interface IChatLoading {
/** 文本 */
text?: string;
/** 图标 */
icon?: string;
/** 样式名 */
class?: string;
/** 样式 */
style?: any;
}
/** 头像可配置项 */
export interface IImageAvator {
/** 样式名 */
class?: string;
/** 样式 */
style?: any;
/** 是否展示 */
show?: boolean;
/** 图片地址,优先于文本 */
image?: string;
/** 大小 */
size?: number;
/** 内部大小 */
inner?: number;
/** 文本 */
text?: string;
/** 文本两侧最小留白 */
gap?: number;
/** 文本样式类 */
textClass?: string;
}
/** 存储文件的结构*/
export interface IUploadedFile {
/** 文件id */
fileKey: string;
/** 文件地址 */
fileUrl: string;
/** 文件名称 */
fileName: string;
/** 文件类型 */
fileType: string;
/** 文件大小 */
fileSize: number;
/** 文件内容File,keepFile的时候有用 */
fileContent: any;
}
/** 对话功能配置 */
export interface IChatConfig {
/** 模型配置内容 */
model?: IModelConfig;
/** 会话id */
conversationId?: string;
/** 上传的文件 */
file?: IUploadedFile;
/** 其他自定义存储数据区域 */
data?: any;
/** 开场问题 */
suggests?: Array<{
/** 提示词, 请求时提示词优先,不区分时设置为"" */
text: string;
/** 可见问题,展示时可见问题优先 */
title: string;
}>;
/** 开场白 */
prompt?: string | ((state: IChatConfig) => Promise<string>);
/** 大模型回复类型的开场白 */
requestPrompt: string;
/** 开场白类型 */
promptType?: "input" | "response" | "none";
/** 数据获取 */
datafrom?: "exported" | "generate" | "none";
/** 初始获取文件
* 返回fileUrl、fileName、fileType用于获取文件体,fileType传"pdf"
*/
getFile?: ((state: IChatConfig) => Promise<Partial<IUploadedFile>>) | null;
/** 是否可追问 */
suggestble?: boolean;
/** 是否可查询历史记录 */
historyable?: boolean;
/** 操作类型 */
actions?: Array<"copy" | "reuse" | "pdf">;
// 自定义的请求
ajax?: any;
/** 是否在清除时保持文件,配置页的对话框会固定启用keepFile */
keepFile?: boolean;
/** 每页条数 */
pageSize?: number;
}
/** 配置面板配置项 */
export interface IConfigStore {
/** 颜色主题配置 */
theme: Record<string, string>;
/** 模型的数据配置,以[模型key]:数据形式存储 */
data: Record<string, Record<string, any>>;
/** 首次loading文本 */
initLoad: string;
/** loading文本 */
loading: string;
/** 是否有头像 */
avator: boolean;
/** 当前模型的key */
model: string;
/** 是否开启追问功能 */
suggestable: boolean;
/** 数据获取 */
datafrom: "exported" | "generate" | "none";
/** 是否支持对话 */
chatable: boolean;
/** 开场问题 */
suggests: Array<{
/** 提示词, 请求时提示词优先,不区分时设置为"" */
text: string;
/** 可见问题,展示时可见问题优先 */
title: string;
}>;
/** 开场白 */
prompt: string;
/** 开场白类型 */
promptType: "input" | "response" | "none";
/** 启用哪些操作类型 */
actions: Array<"copy" | "reuse" | "pdf">;
}
样式变量
1. 对话框
对话框用到的颜色变量,也可以在样式面板调整后复制出来
/* 外边框线 */
--ac-wrap-border: #646cff24;
/* 背景色 */
--ac-wrap-bg: #f5f5f5;
/* 文本 */
--ac-text-color: #333;
/** 灰色调-用户停止*/
--ac-gray-color: gray;
/* 加载图标 */
--ac-load-color: #00d7c0;
/* 机器人角色对话框背景 */
--ac-bot-bg: #fff;
/* 机器人角色对话框边框 */
--ac-bot-border: #4096ff;
/* 用户角色对话框背景 */
--ac-user-bg: #fff;
/* 用户角色对话框边框 */
--ac-user-border: #4096ff;
/* 用户角色头像背景 */
--ac-avator-bg: #646cff;
/* 用户角色头像文字 */
--ac-avator-color: #ffffff;
/* 追问问题边框 */
--ac-sugg-border: #60a5fa;
/* 追问问题背景 */
--ac-sugg-bg: #fff;
/* 追问问题箭头 */
--ac-arrow-color: #9ca3af;
/* 输入框边框 */
--ac-search-border: #0000ff12;
/* 输入框背景 */
--ac-search-bg: #2f7eff0f;
/* 输入框图标激活状态 */
--ac-active-color: #333333a1;
/* 输入框图标禁用状态 */
--ac-disable-color: lightgray;
/** 操作行颜色*/
--ac-action-color: #4f4f4f;
/* markdown链接 */
--ac-link-color: #3cb3fe;
/* markdown标签背景 */
--ac-badge-bg: #3cb3fe;
/* markdown标签文字 */
--ac-badge-color: #fff;
2. 对话框外的样式变量
/** 主色调 */
--ac-primary: #4284D3;
/** 按钮文本色*/
--ac-btn-text: #fff;
/** 文本颜色*/
--ac-text : #333;
/** ui组件空白底色,使用transparent会破坏checkbox等组件的样式 */
--ac-ui-bg: #fff;
/** 组件灰色,toggle false状态,select、input边框等 */
--ac-ui-gray: #a6adbb;
/** input disabled颜色 */
--ac-input-disabled: #f2f2f2;
/** 滚动条相关颜色 */
--scrollbar-thumb: #ddd;
--scrollbar-track: #f5f5f5;