HarmonyOS NEXT实现文字和图片的方式和AI对话 - IT评测·应用市场-qidao123.com

// 这里描述的是右边的十字按钮，点击时改变ViewModel isMoreFunction
Row() {
Image($r("app.media.ic_public_agent_more_plus_mark"))
.width(25)
.height(25)
.borderRadius(25)
.fillColor(Color.Black)
.rotate({ angle: this.rotateAngle })
}
.width(40)
.height(40)
.borderRadius(40)
.justifyContent(FlexAlign.Center)
.backgroundColor(Color.White)
.shadow({
radius: 10,
color: $r("app.color.agent_btm_func_item_icon_gray"),
offsetX: 0,
offsetY: 0
})
.onClick(() => {
// 设置属性动画
this.getUIContext()?.animateTo({ curve: curves.springMotion() }, async () => {
// 打开任务栏
this.isMoreFunction = !this.isMoreFunction
this.rotateAngle = this.isMoreFunction ? 45 : 0
if (this.isMoreFunction) {
// 关闭键盘
await inputMethod.getController().stopInputSession()
}
})
})

复制代码

@State isMoreFunction: boolean = false // 是否展现底部的多功能栏
......
// 底部结构
if (this.isMoreFunction) {
Row() {
GridRow({ columns: 4 }) {
ForEach(this.bottomFunctionList, (item: PopupComp) => {
GridCol() {
this.getBottomCard(item)
}.height(100)
})
}
.width('100%')
}
.margin({ top: 20 })
.width($r("app.string.full_percent"))
.padding({ left: 10, right: 10 })
}

复制代码

/**
* 选择照片
* @param photoNum
* @returns
*/
static async getImageUrisFromAlbum(photoNum: number = 1): Promise<string> {
try {
const photo = new picker.PhotoViewPicker()
const result = await photo.select({
maxSelectNumber: photoNum,
MIMEType: picker.PhotoViewMIMETypes.IMAGE_TYPE
})
return result.photoUris[0]
} catch (error) {
AlertDialog.show({
message: '选取相册图片uris失败：\n' + JSON.stringify(error, null, 2)
})
return ''
}
}

复制代码

@State @Watch('getPlaceHolder') selectedUri: string = '' // 当前选中的图片的地址
//......
this.selectedUri = await MediaOperate.getImageUrisFromAlbum(1)

复制代码

// 输入文字的系统组件
TextArea({
placeholder: this.placeHolder,
text: this.inputTextContent
})
.height(50)
.textOverflow(TextOverflow.Ellipsis)
.layoutWeight(1)
.borderRadius(14)
.backgroundColor($r("app.color.agent_textarea_background_color"))
.id('input')
.focusable(true)
.defaultFocus(true)
.onFocus(() => {
// 聚焦键盘的时候，隐藏底部功能栏
this.isMoreFunction = false
this.rotateAngle = 0
// 消息列表滚动到底部
this.scroller.scrollEdge(Edge.Bottom)
})
.onChange((value) => {
this.inputTextContent = value
})
.onSubmit(() => {
this.sendTextMessage(this.inputTextContent)
this.inputTextContent = ''
})

复制代码

@State rcdMsgList: MessageInfoModel[] = [] // 记录生活信息数据
@State qstMsgList: MessageInfoModel[] = [] // 问题模式信息数据
@State showMsgList: MessageInfoModel[] = [] // 需要展示的数据信息

复制代码

// 发送信息给大模型
async sendTextMessage(inputContent: string) {
if (this.agentMode === AgentModeEnum.Record) {
const tempUri = this.selectedUri
// 删除选中的图片
this.selectedUri = ''
// 分享生活
const msgStored = new MessageInfoModel({
sender: currentUser,
receiver: currentAgent,
content: inputContent,
sendTimeStamp: Date.now(),
sourceFilePath: tempUri, // 照片的地址
type: tempUri === '' ? MessageTypeEnum.TEXT : MessageTypeEnum.IMAGE // 照片
} as MessageInfo)
hilog.info(0, 'AgentMessage', `AgentMessage Info: ${JSON.stringify(msgStored, null, 2)}`)
// 更新到记录生活的列表里面去，展示UI界面
this.rcdMsgList.push(msgStored)
// 添加信息到数据库里面去
await relationalDatabase.addMessage(msgStored, TABLE_RECORD_MESSAGE)
this.scroller.scrollEdge(Edge.Bottom)
let requestContent = inputContent
// 辅助记录生活的语句
requestContent =
'帮我记录我的生活:\n' + `现在是` + getCurrentTimeStringFormat(Date.now()) + '，\n' + inputContent
// 用于辅助询问信息的对象
const msgAsked = new MessageInfoModel({
sender: currentUser,
receiver: currentAgent,
content: requestContent,
sendTimeStamp: Date.now(),
sourceFilePath: tempUri, // 照片的地址
type: tempUri === '' ? MessageTypeEnum.TEXT : MessageTypeEnum.IMAGE // 照片
} as MessageInfo)
// 更新UI
this.showMsgList = this.rcdMsgList
this.getResponseMessage(msgAsked)
} else {
const tempUri = this.selectedUri
// 删除选中的图片
this.selectedUri = ''
// 解答疑惑
const msg = new MessageInfoModel({
sender: currentUser,
receiver: currentAgent,
content: inputContent,
sendTimeStamp: Date.now(),
sourceFilePath: tempUri, // 照片的地址
type: tempUri === '' ? MessageTypeEnum.TEXT : MessageTypeEnum.IMAGE // 照片
} as MessageInfo)
// 更新到解答疑问的列表里面去，展示UI界面
this.qstMsgList.push(msg)
// 添加信息到数据库里面去
await relationalDatabase.addMessage(msg, TABLE_QUESTION_MESSAGE)
// 滑动到最低端
this.scroller.scrollEdge(Edge.Bottom)
// 构建问题语句，这个是根据用户输入的信息进行优化的prompt
// 用户原始的输入的信息将通过inputContent存储到数据库中去
// 问题语句
let requestContent = inputContent
requestContent = '我有一个问题想问你:\n' + inputContent
// 用于辅助询问信息的对象
const msgAsked = new MessageInfoModel({
sender: currentUser,
receiver: currentAgent,
content: requestContent,
sendTimeStamp: Date.now(),
sourceFilePath: tempUri, // 照片的地址
type: tempUri === '' ? MessageTypeEnum.TEXT : MessageTypeEnum.IMAGE // 照片
} as MessageInfo)
// 更新UI
this.showMsgList = this.qstMsgList
// 获取Agent响应
await this.getResponseMessage(msgAsked)
}
}

复制代码

//聊天内容
List({ space: 20, scroller: this.scroller }) {
ForEach(this.showMsgList, (item: MessageInfoModel) => {
ListItem() {
// 单个消息UI 解决this丢失问题
MessageComp({ item, popupBuilder: this.popupBuilder.bind(this), showPopup: this.showPopup })
}
})
}
.layoutWeight(1)
.width('100%')
.scrollBar(BarState.Off)
.padding({ top: 20, bottom: 60 })
.onClick(async () => {
// 关闭键盘
await inputMethod.getController().stopInputSession()
})

复制代码

@Component
struct MessageComp {
@State item: MessageInfoModel = new MessageInfoModel({} as MessageInfo)
@State showPopup: boolean = false
@State popupCompList: PopupComp[] = []
// 使用自定义组件的自定义构建函数初始化@BuilderParam
@BuilderParam popupBuilder: () => void = this.doNothingBuilder; // list: PopupComp[]
@Builder
doNothingBuilder() {
};
build() {
Row() {
Row() {
Column({ space: 10 }) {
if (this.item.sourceFilePath && this.item.sender.username === currentUser.username) {
Image(this.item.sourceFilePath)
.width(230)
.borderRadius(10)
.margin({ left: 25, right: 25 })
}
// 消息类型渲染
Text(this.item.content)
.backgroundColor(this.item.sender.user_id === currentUser.user_id ? $r('app.color.user_massage_color') :
$r('app.color.agent_message_color'))
.fontColor(this.item.sender.user_id === currentUser.user_id ? Color.White : Color.Black)
.margin({ left: 10, right: 10 })
.borderRadius({
topLeft: this.item.sender.user_id === currentUser.user_id ? 16 : 0,
topRight: this.item.sender.user_id === currentUser.user_id ? 0 : 16,
bottomLeft: 16,
bottomRight: 16
})
.lineHeight(24)
.padding(10)
.bindPopup(this.showPopup, {
builder: this.popupBuilder,
popupColor: Color.White,
backgroundBlurStyle: BlurStyle.NONE,
onStateChange: (event) => {
// 当手指点了其他位置关闭状态
this.showPopup = event.isVisible
}
})
}
}
.layoutWeight(4)
.justifyContent(this.item.sender.user_id === currentUser.user_id ? FlexAlign.End : FlexAlign.Start)
// 站位
Text().layoutWeight(1)
}
.width('100%')
.padding({ left: 10, right: 10 })
.direction(this.item.sender.user_id === currentUser.user_id ? Direction.Rtl : Direction.Ltr)
.gesture(
// 长按显示弹层，操作信息
LongPressGesture()
.onAction(() => {
this.showPopup = true
}))
}
}
export { MessageComp }

复制代码