// gpt.js
import { CHATGPT_API_URL } from '@/common/config.js'
const OPENAI_API_KEY = '你的接口'
// TODO 適用直接調(diào)chatgpt接口
export async function* getChatgpt_Multurn_qa(messages) {
  const response = await fetch(CHATGPT_API_URL + '你的url', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${ OPENAI_API_KEY }`
    },
    body: JSON.stringify({
      model: 'gpt-3.5-turbo',
      stream: true,
      messages: messages
    })
  });

  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }

  const reader = response.body.getReader();
  let decoder = new TextDecoder();
  let resultData = '';

  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    resultData += decoder.decode(value);
    while (resultData.includes('\n')) {
      const messageIndex = resultData.indexOf('\n');
      const message = resultData.slice(0, messageIndex);
      resultData = resultData.slice(messageIndex + 1);
      if (message.startsWith('data: ')) {
        const jsonMessage = JSON.parse(message.substring(5));
        if (resultData.includes('[DONE]')) {
          break
        }
        const createdID = jsonMessage.created
        yield {
          content: jsonMessage.choices[0]?.delta?.content || '',
          role: "assistant",
          id: createdID
        };
      }
    }
  }
}

{"id":"chatcmpl-7B48ttLhb1iR4JoaCzElQTvxyAgsw","object":"chat.completion.chunk","created":1682871887,"model":"gpt-3.5-turbo-0301","choices":[{"delta":{"content":"."},"index":0,"finish_reason":null}]}

// vue組件部分代碼  

const currentDialogId = ref(null)

const dialogId = uniqueId()
currentDialogId.value = dialogId   

// 獲取聊天機器人的回復
for await (const result of getChatgpt_Multurn_qa(messages.value)) {
  // 如果返回的結(jié)果 ID 與當前對話 ID 相同，則將聊天機器人的回復拼接到當前對話中
  if (result.id === currentDialogId.value) {
    const index = list.value.findIndex(item => item.id === currentDialogId.value)
    const dialog = list.value[index]
    dialog.content += result.content
  } else {
    currentDialogId.value = result.id
    list.value.push({
      content: result.content,
      role: "assistant",
      id: result.id,
      timestamp: Date.now()
    })
    messages.value.push({
      role: "assistant",
      content: result.content
    })
  }
}

# ChatGPT流式輸出接口

## 接口路徑

```bash
https://后端提供的url
```

## 請求方式

**POST**

## 請求參數(shù)


```bash
{
    "messages": [
        {
            "role": "user",
            "content": "你好"
        }
    ]
}
```

## 請求參數(shù)說明

```bash
messages: 消息體
```


## curl

```bash
curl --location 'https://后端提供的url' \
--header 'Content-Type: application/json' \
--data '{
    "messages": [
        {
            "role": "user",
            "content": "你好"
        }
    ]
}'
```


## 返回數(shù)據(jù)

```bash
{
    "id": "chatcmpl-7GpjNUPkhPZF0MtJBqTMvW2bbWPPG",
    "object": "chat.completion.chunk",
    "created": 1684246457,
    "model": "gpt-3.5-turbo-0301",
    "choices": [
        {
            "delta": {
                "role": "assistant"
            },
            "index": 0,
            "finish_reason": null
        }
    ]
}
{
    "id": "chatcmpl-7GpjNUPkhPZF0MtJBqTMvW2bbWPPG",
    "object": "chat.completion.chunk",
    "created": 1684246457,
    "model": "gpt-3.5-turbo-0301",
    "choices": [
        {
            "delta": {
                "content": "你"
            },
            "index": 0,
            "finish_reason": null
        }
    ]
}
{
    "id": "chatcmpl-7GpjNUPkhPZF0MtJBqTMvW2bbWPPG",
    "object": "chat.completion.chunk",
    "created": 1684246457,
    "model": "gpt-3.5-turbo-0301",
    "choices": [
        {
            "delta": {
                "content": "好"
            },
            "index": 0,
            "finish_reason": null
        }
    ]
}
{
    "id": "chatcmpl-7GpjNUPkhPZF0MtJBqTMvW2bbWPPG",
    "object": "chat.completion.chunk",
    "created": 1684246457,
    "model": "gpt-3.5-turbo-0301",
    "choices": [
        {
            "delta": {
                "content": "！"
            },
            "index": 0,
            "finish_reason": null
        }
    ]
}
{
    "id": "chatcmpl-7GpjNUPkhPZF0MtJBqTMvW2bbWPPG",
    "object": "chat.completion.chunk",
    "created": 1684246457,
    "model": "gpt-3.5-turbo-0301",
    "choices": [
        {
            "delta": {},
            "index": 0,
            "finish_reason": "stop"
        }
    ]
}
```

## 返回參數(shù)說明

```bash
role = assistant, 開始輸出
finish_reason = stop, 輸出結(jié)束
finish_reason = null, 正在輸出
content 輸出內(nèi)容
```

// TODO 改用chatgpt接口
import { _BASE_API_URL } from '@/common/config.js'

// 流式輸出接口
export async function* getChatgpt_Multurn_qa(messages, onStreamDone) {
  const response = await fetch(_BASE_API_URL + `你的url`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      messages: messages
    })
  })

  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`)
  }

  const reader = response.body.getReader()

  let result = ''
  let done = false

  while (!done) {
    const { value, done: streamDone } = await reader.read()

    if (value) {
      const decoder = new TextDecoder()
      result += decoder.decode(value)
      const lines = result.split('\n')
      result = lines.pop()

      for (const line of lines) {
        try {
          const json = JSON.parse(line)
          if (json.choices && json.choices.length > 0) {
            const content = json.choices[0].delta.content
            if (content) {
              yield { id: json.created, content }
            }
          }
          if (json.choices && json.choices[0].finish_reason === 'stop') {
            done = true
            onStreamDone()
            break
          }
        } catch (e) {
          console.error(e)
        }
      }
    }
    if (streamDone) {
      done = true;
    }
  }
}

// vue父組件 
     for await (const result of getChatgpt_Multurn_qa(messages.value, onStreamDone)) {
        if (currentConversationId.value === null) {
          currentConversationId.value = result.id;
        }
        if (result.id === currentConversationId.value) {
          const index = list.value.findIndex(item => item.id === currentConversationId.value);
          const dialog = list.value[index];
          dialog.content += result.content;
        } else {
          currentConversationId.value = result.id;
          list.value.push({
            content: result.content || '',
            role: "assistant",
            id: result.id,
            timestamp: Date.now()
          });
          messages.value.push({
            role: "assistant",
            content: result.content || ''
          });
        }
      }

// 父組件

<session-box :list="list" @sent="handleSent"></session-box>

// 子組件
const props = defineProps({
  list: {
    type: Array,
    default: []
  }
})

const { list } = toRefs(props)

const sessionList = ref(null)

const sortedList = computed(() => {
  return list.value.slice().sort((a, b) => a.timestamp - b.timestamp)
})

// 模板中
<MdPreview
   :showCodeRowNumber="true"            // 顯示行號
   :modelValue="item.content"
/>


import { MdPreview } from 'md-editor-v3'
import 'md-editor-v3/lib/style.css'