Hq-aichat-snapshot NPM

使用说明

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;

7 months ago

7 months ago

7 months ago

7 months ago