类gpt前端会话代码

GPT的会话窗口是一个一个字print，这种方式怎么做到呢？这边用vue写了一个！

<script setup>
import { useDisplay } from 'vuetify'
import {useDrawer} from "../composables/states";

const route = useRoute()
const { $i18n, $settings } = useNuxtApp()
const colorMode = useColorMode()
const {mdAndUp} = useDisplay()
const drawerPermanent = computed(() => {
  return mdAndUp.value
})
const user = useUser()


const exportConversation = async (index) => {
  let conversation = conversations.value[index]
  let data = {}
  data.conversation_topic = conversation.topic
  data.messages = []
  let messages = await loadMessage(conversation.id)
  for (let message of messages) {
    let msg = {}
    msg.role = message.is_bot ? "assistant" : "user"
    msg.content = message.message
    data.messages.push(msg)
  }
  let file_content = JSON.stringify(data)
  let file_name = `${conversation.topic}_${new Date()}`.replace(/[\/\\:*?"<>]/g, "_")
  const element = document.createElement('a');
  element.setAttribute(
    "href",
    "data:text/plain;charset=utf-8," + encodeURIComponent(file_content),
  );
  element.setAttribute("download", file_name);
  element.style.display = "none";
  document.body.appendChild(element);
  element.click();
  document.body.removeChild(element);
}

const openImportFileChooser = async () => {
  let input_element = document.getElementById("import_conversation_input")
  input_element.click()
}

const importConversation = async () => {
  let input_element = document.getElementById("import_conversation_input")
  let fileHandles = input_element.files
  let imports = []
  const reader = new FileReader()
  for (let handle of fileHandles) {
    let content = await new Promise((resolve, reject) => {
      reader.readAsText(handle)
      reader.onload = () => resolve(reader.result);
      reader.onerror = eror => reject(error);
    })
    let json = JSON.parse(content)
    imports.push(json)
  }
  let new_conversation_ids = []
  try {
    const { data, error } = await useAuthFetch('/api/upload_conversations/', {
      method: 'POST',
      headers: {
        'accept': 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        imports: imports,
      }),
    })
    if (!error.value) {
      new_conversation_ids = data.value
      loadConversations()
    } else {
      console.log(err)
      showSnackbar(err.message)
    }
  } catch (err) {
    console.log(err.message)
    showSnackbar(err.message)
  }
}


</script>

<template>
  <v-navigation-drawer
      v-model="drawer"
      :permanent="drawerPermanent"
      width="300"
  >
    <template
        v-slot:prepend
        v-if="user"
    >
      <v-list>
        <v-list-item
            :title="user.username"
            :subtitle="user.email"
        >
          <template v-slot:prepend>
            <v-icon
                icon="face"
                size="x-large"
            ></v-icon>
          </template>
          <template v-slot:append>
            <v-menu>
              <template v-slot:activator="{ props }">
                <v-btn
                    v-bind="props"
                    size="small"
                    variant="text"
                    icon="expand_more"
                ></v-btn>
              </template>
              <v-list>
                <v-list-item
                    :title="$t('resetPassword')"
                    to="/account/resetPassword"
                >
                </v-list-item>
                <v-list-item
                    :title="$t('signOut')"
                    @click="signOut"
                >
                </v-list-item>
              </v-list>
            </v-menu>

          </template>
        </v-list-item>
      </v-list>

      <v-divider></v-divider>
    </template>

    <div class="px-2">
      <v-list>
        <v-list-item v-show="loadingConversations">
          <v-list-item-title class="d-flex justify-center">
            <v-progress-circular indeterminate></v-progress-circular>
          </v-list-item-title>
        </v-list-item>
      </v-list>

      <v-list>
        <template
            v-for="(conversation, cIdx) in conversations"
            :key="conversation.id"
        >
          <v-list-item
              active-color="primary"
              rounded="xl"
              v-if="editingConversation && editingConversation.id === conversation.id"
          >
            <v-text-field
                v-model="editingConversation.topic"
                :loading="editingConversation.updating"
                variant="underlined"
                append-icon="done"
                hide-details
                density="compact"
                autofocus
                @keyup.enter="updateConversation(cIdx)"
                @click:append="updateConversation(cIdx)"
            ></v-text-field>
          </v-list-item>
          <v-hover
              v-if="!editingConversation || editingConversation.id !== conversation.id"
              v-slot="{ isHovering, props }"
          >
     ...
  <v-snackbar v-model="snackbar" multi-line location="top">
    {{ snackbarText }}
    <template v-slot:actions>
      <v-btn color="red" variant="text" @click="snackbar = false" density="compact" size="default">
        Close
      </v-btn>
    </template>
  </v-snackbar>
  <input
    type="file" id="import_conversation_input" style="display:none"
    accept="text/plain, text/json"
    multiple
    @change="importConversation"
  >
</template>

这里提供一个好用的Chatgpt代码和资源，安装即可使用：
http://chat.itopdesign.com/file/ChatGpt.apk