创新实训-聊天界面前端相关补充

概述：本篇主要为聊天界面的补充，为了提高丰富和个性化的用户体验，添加模式选择功能，在输入问题后，可选择不同的模式进行对话

添加选择器

<div class="flex items-start p-2">
            <select v-model="model" @change="onChange"
              class="p-1 pr-3 rounded-md text-gray-500 hover:bg-gray-100 dark:hover:text-gray-400 dark:hover:bg-gray-900 disabled:hover:bg-transparent dark:disabled:hover:bg-transparent min-w-[100px]">
              <option disabled value="">model</option>
              <option v-for="option in modelOptions" :key="option.value" :value="option.value">
                {{ option.text }}
              </option>
            </select>
          </div>

<div class="flex items-start p-2">
            <select v-model="choose" @change="onChange"
              class="p-1 pr-3 rounded-md text-gray-500 hover:bg-gray-100 dark:hover:text-gray-400 dark:hover:bg-gray-900 disabled:hover:bg-transparent dark:disabled:hover:bg-transparent min-w-[100px]">
              <option disabled value="">choose</option>
              <option v-for="option in dialogselect" :key="option.value" :value="option.value">
                {{ option.text }}
              </option>
            </select>
          </div>

<div class="dropdown-container flex flex-col items-start p-2 relative">
            <button @click="toggleDropdown"
              class="mb-2 p-1 pr-3 rounded-md text-gray-500 hover:bg-gray-100 dark:hover:text-gray-400 dark:hover:bg-gray-900 disabled:hover:bg-transparent dark:disabled:hover:bg-transparent min-w-[100px]">
              Options
            </button>
            <div v-show="dropdownOpen" class="dropdown-content flex flex-col items-start absolute bottom-full mb-2">
              <div v-for="option in selectOptions" :key="option.value" class="flex items-center">
                <input type="checkbox" :id="option.value" @change="selectOption(option)" v-model="option.selected"
                  :value="option.value" class="p-1 rounded-md hover:bg-gray-100 dark:hover:bg-gray-900">
                <label :for="option.value" class="ml-2 text-gray-500 dark:text-gray-400">{{ option.text }}</label>
              </div>
            </div>
          </div>

data() {
    return {
      model: 'GLM3',
      modelOptions: [
        { value: 'GLM3', text: 'GLM3' },
        { value: 'GLM4', text: 'GLM4' },
      ],
      //chatMsg: "",
      convLoading: false,
      source: undefined,
      rsource: undefined,

      choose: 'default',
      dialogselect: [
        { value: 'default', text: '默认模式' },
        { value: 'dialog', text: '对话模式' },
      ],
      select: [], // 存储折叠面板的状态
      checkList: [], // 存储用户选择的复选框值
      selectOptions: [
        { value: 'option1', text: 'Option 1' },
        { value: 'option2', text: 'Option 2' },
        { value: 'option3', text: 'Option 3' }
      ],
      dropdownOpen: false
    }
  },

以上分别有三个不同的选择器，用于选择不同的模式进行对话，满足不同用户的需求，无论是那些寻求简单快捷聊天的用户，还是那些需要高级功能和自定义选项的专业人士。用户可以根据自己的偏好和需求，随时在三种模式之间切换，以获得最佳的聊天体验。