vue3 implements AI chat dialog box function

@="handleSend"
@="newline"

<el-button
  type="primary"
  :loading="loading"
  @click="handleSend"
  >
  <template #icon>
    <el-icon><Position /></el-icon>
  </template>
  send
</el-button>

  &.message-user {
    flex-direction: row-reverse;
    //Flip to realize user layout on the right    .message-content {
      align-items: flex-end;
    }
  }

//
<template>
  <div :class="{ 'dark': isDarkMode }">
  <router-view />
  </div>
  </template>
  <script setup>
  import { computed } from 'vue'
import { useSettingsStore } from './stores/settings'
const settingsStore = useSettingsStore()
const isDarkMode = computed(() => )
  </script>
//
 {
  // Element Plus Dark Mode Variable Override  --el-bg-color: var(--bg-color);
  --el-bg-color-overlay: var(--bg-color-secondary);
  --el-text-color-primary: var(--text-color-primary);
  --el-text-color-regular: var(--text-color-regular);
  --el-border-color: var(--border-color);
  // Element Plus component dark mode style overlay  .el-input-number {
    --el-input-number-bg-color: var(--bg-color-secondary);
    --el-input-number-text-color: var(--text-color-primary);
  }
  .el-select-dropdown {
    --el-select-dropdown-bg-color: var(--bg-color);
    --el-select-dropdown-text-color: var(--text-color-primary);
  }
  .el-slider {
    --el-slider-main-bg-color: var(--primary-color);
  }
}
//
import './assets/styles/'

onMounted(() => {
  // Initialize the topic according to the storage settings  ('data-theme',  ? 'dark' : 'light')
})

async sendMessage(messages, stream = false) {
    // ...
    const response = await fetch(`${API_BASE_URL}/chat/completions`, {
        method: 'POST',
        headers: {
            ...createHeaders(),
            ...(stream && { 'Accept': 'text/event-stream' }) // If it is a streaming response, add the corresponding Accept header        },
        body: (payload)
    })
    // ...
    if (stream) {
        return response // For streaming response, directly return the response object    }
    // ...
}

async processStreamResponse(response, { updateMessage, updateTokenCount }) {
  try {
      let fullResponse = '';
      const reader = ();
      const decoder = new TextDecoder();
          // 1. Read stream data      while (true) {
          const { done, value } = await ();
          if (done) {
              ('Stream response is completed');
              break;
          }
          //2. Decode the data block          const chunk = (value);  // Here each chunk is a possible array that may contain multiple arrays          //3. Process the decoded data, first split it into rows (arrays), then convert it into a json string, then convert it into a js object, extract the content content in the object, update the message, and update the usage of token          // 3.1 Split into rows          const lines = ('\n').filter(line => () !== '');
          for (const line of lines) {
              if (('data: ')) {
          // 3.2 Convert to json string                  const jsonStr = ('data: ', '');
                  // Check whether it is finished                  if (jsonStr === '[DONE]') {
                      ('Stream response is completed, read is completed');
                      continue;
                  }
          // 3.3 Convert to js object                  try {
                      const jsData = (jsonStr);
                      if ([0].) {
                          const content = [0].;
          //3.4 Extract the content content from the object and update the message                          fullResponse += content;
                          updateMessage(fullResponse);
                      }
          // 3.5 update token usage                      if () {
                          updateTokenCount();
                      }
                  } catch (e) {
                      ('Parse JSON failed:', e);
                  }
              }
          }
      }
  } catch (error) {
      ('Stream processing error:', error);
      throw error;
  }
},

const handleSend = async (content) => {
    // ...
    try {
        const response = await (
            (0, -1).map(m => ({
                role: ,
                content: 
            })),
            
        );
        if () {
          // Will this change to synchronization when using await? I learned that after using await, I will wait for the subsequent function to be called before executing the subsequent code. Is that true?            await (response, {
                updateMessage: (content) => (content),
                updateTokenCount: (usage) => (usage)
            });
        }
        // ...
    } catch (error) {
        ('Sorry, an error occurred, please try again later.  ')
    } finally {
         = false
    }
}

{ done: true/false, value: Uint8Array | undefined }

Streams API  
├── ReadableStream（type） → Provide streaming data blocks
│    ├── getReader() → Get reader
│    │    └── () → Read a single block of data {done, value}
│    │
│    └── Data blocks are usually Uint8Array type
│
└── TextDecoder → decoding Uint8Array as a string
└── Blob → decoding Uint8Array For image video

let response = await fetch('');
if (!) {
  throw new Error(`HTTP error! status: ${}`);
}