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

// 聊天內(nèi)容區(qū)域
Scroll() {
  Column(){
    ForEach(this.messages, (item: message) => {
      Flex({justifyContent: item.role === 'user' ? FlexAlign.End : FlexAlign.Start}) {
        if (item.role === 'user') {
          ItemComponent(item, true)   // 自己發(fā)送的消息
        } else {
          ItemComponent(item, false)  // 對(duì)方發(fā)送的消息
        }
      }
    })
  }
  .constraintSize({minHeight:"100%"})	// 設(shè)置子組件最小長(zhǎng)度為Scroll容器長(zhǎng)度
}
.width("100%")
.height("90%")
.scrollBar(BarState.Off)

//渲染消息
@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') // 根據(jù)發(fā)送者設(shè)置背景色
      .padding({ top: 8, bottom: 8, left: 10, right: 10 })
      .borderRadius(10)
      .textAlign(TextAlign.Start)
      .constraintSize({maxWidth: "240vp"})	// 設(shè)置最大寬度

    if(isSelf) {
      Image($r("app.media.me"))
        .width("50vp")
    }
  }
  .margin({ top: 4, bottom: 4 }) 	// 消息間距
}

// 發(fā)送的每條消息類型
class message{	
  role: string;		// 發(fā)送角色
  content: string;	// 發(fā)送的消息	
    				// 如有更多需求，如：發(fā)消息人物昵稱，可進(jìn)行相應(yīng)的設(shè)計(jì)
  constructor(role: string,  content: string) {
    this.role = role
    this.content = content
  }
}

// 根據(jù)ai反回的數(shù)據(jù)類型定義的接口類型，next不支持any類型
interface userInfo{
  id: string,
  object: string,
  created: string,
  result: string
  is_truncated: boolean,
  need_clear_history: boolean,
  finish_reason: string
}


// @State數(shù)據(jù)與頁(yè)面雙向數(shù)據(jù)綁定，當(dāng)消息增加時(shí)頁(yè)面刷新顯示
@State messages: Array<message> = [
    new message("user","你好"),
    new message("assistant", "你好，請(qǐng)問(wèn)有什么我可以幫助你的嗎？無(wú)論你有什么問(wèn)題或需要幫助，我都會(huì)盡力回答和協(xié)助你。請(qǐng)隨時(shí)告訴我你的需求。")
];

// 可滾動(dòng)的容器組件，當(dāng)子組件的布局尺寸超過(guò)父組件的尺寸時(shí)，內(nèi)容可以滾動(dòng)。
myScroll: Scroller = new Scroller();
locat: OffsetResult = {xOffset: 0, yOffset: 0};

// 輸入框和發(fā)送按鈕
Row() {
  TextInput({ text: this.inputText, placeholder: '輸入你想詢問(wèn)的問(wèn)題' })
    .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('發(fā)送')
    .onClick(() => {
      // 發(fā)送消息并更新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%")

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

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

// 根據(jù)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}`)
}
// 根據(jù)token和所有消息發(fā)送一次請(qǐng)求，獲取結(jié)果
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)
}