HarmonyOS NEXT体验官#聊天UI效果与简单AI接口调用

.constraintSize({minHeight:"100%"})
1.

// 聊天内容区域
Scroll() {
  Column(){
    ForEach(this.messages, (item: message) => {
      Flex({justifyContent: item.role === 'user' ? FlexAlign.End : FlexAlign.Start}) {
        if (item.role === 'user') {
          ItemComponent(item, true)   // 自己发送的消息
        } else {
          ItemComponent(item, false)  // 对方发送的消息
        }
      }
    })
  }
  .constraintSize({minHeight:"100%"})	// 设置子组件最小长度为Scroll容器长度
}
.width("100%")
.height("90%")
.scrollBar(BarState.Off)
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

//渲染消息
@Builder
function ItemComponent(item: message, isSelf: boolean) {
  Flex({ justifyContent:isSelf ? FlexAlign.End : FlexAlign.Start}) {
    if(!isSelf) {
      Image($r("app.media.chatbot"))
        .width("50vp")
    }
    Text(item.content)
      .fontSize(16)
      .lineHeight(24)
      .backgroundColor(isSelf ? '#ffdddd' : '#ddffdd') // 根据发送者设置背景色
      .padding({ top: 8, bottom: 8, left: 10, right: 10 })
      .borderRadius(10)
      .textAlign(TextAlign.Start)
      .constraintSize({maxWidth: "240vp"})	// 设置最大宽度

    if(isSelf) {
      Image($r("app.media.me"))
        .width("50vp")
    }
  }
  .margin({ top: 4, bottom: 4 }) 	// 消息间距
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.

// 发送的每条消息类型
class message{	
  role: string;		// 发送角色
  content: string;	// 发送的消息	
    				// 如有更多需求，如：发消息人物昵称，可进行相应的设计
  constructor(role: string,  content: string) {
    this.role = role
    this.content = content
  }
}

// 根据ai反回的数据类型定义的接口类型，next不支持any类型
interface userInfo{
  id: string,
  object: string,
  created: string,
  result: string
  is_truncated: boolean,
  need_clear_history: boolean,
  finish_reason: string
}


// @State数据与页面双向数据绑定，当消息增加时页面刷新显示
@State messages: Array<message> = [
    new message("user","你好"),
    new message("assistant", "你好，请问有什么我可以帮助你的吗？无论你有什么问题或需要帮助，我都会尽力回答和协助你。请随时告诉我你的需求。")
];
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.

// 可滚动的容器组件，当子组件的布局尺寸超过父组件的尺寸时，内容可以滚动。
myScroll: Scroller = new Scroller();
locat: OffsetResult = {xOffset: 0, yOffset: 0};

// 输入框和发送按钮
Row() {
  TextInput({ text: this.inputText, placeholder: '输入你想询问的问题' })
    .height(40)
    .width("70%")
    .onChange((val) => {
      this.inputText = val
    })
    .margin({right: 2})
    .onClick(() => {
      this.locat = this.myScroll.currentOffset();
    })
    .onEditChange((isEditing) => {
      if(isEditing) {
        this.myScroll.scrollTo(this.locat);
      }
    })
  Button('发送')
    .onClick(() => {
      // 发送消息并更新UI
      this.messages.push(new message("user", this.inputText))
      this.inputText = ''
      getTake(this.messages, this.token).then((response: AxiosResponse<userInfo>) =>{
        let text = response.data.result
        this.messages.push(new message("assistant", text))
      })
    })
}
.justifyContent(FlexAlign.Center)
.height("10%")
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.

import axios, {AxiosResponse} from '@ohos/axios'
1.

const apiKey = "xxxxxx"
const secret = "xxxxxxxxxxx"

// 根据apikey和secret获取token
export function get_access_token(){
  return axios.post(`/oauth/2.0/token?grant_type=client_credentials&client_id=${apiKey}&client_secret=${secret}`)
}
// 根据token和所有消息发送一次请求，获取结果
export function getTake(messages: Array<message>, token: string): Promise<AxiosResponse>{
  const params =  JSON.stringify({
    messages: messages
  })
  return axios.post(`/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/completions_pro?access_token=${token}`, params)
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.