hwmom-ui/src/layout/components/TopBar/aiAssistant.vue

<template>
  <div v-if="state.isShowSearch" :class="['ai-float-window', currentSizeClass]"
       :style="currentSize === 'custom' ? {
      width: windowSize.width,
      height: windowSize.height,
      left: typeof windowPosition.x === 'string' ? 'auto' : windowPosition.x + 'px',
      right: typeof windowPosition.x === 'string' ? '0' : 'auto',
      top: windowPosition.y + 'px'
    } : {}">
    <div class="ai-float-main">
      <div class="ai-float-left" v-if="isShowLeft">
        <component :is="currentComponent" v-bind="currentProps" v-if="currentComponent"/>
      </div>
      <div class="ai-float-right" v-loading="aiLoading">
        <div class="ai-float-header" @mousedown="startDrag">
          <span>AI智能填报助手</span>
          <!-- 将两个图标按钮放在一个容器内 -->
          <div class="ai-float-header-actions">
            <el-icon  v-if="currentSize==='minimize'" class="ai-float-minimize" @click.stop="toggleSize">
              <Plus />
            </el-icon>
            <el-icon v-if="currentSize!=='minimize'" class="ai-float-minimize" @click.stop="toggleSize">
              <Minus />
            </el-icon>

            <el-icon class="ai-float-close" @click="close">
              <Close/>
            </el-icon>
          </div>
        </div>
        <div class="ai-float-form-list ai-float-scroll">
          <div class="form-list-top">
            <div class="ai-float-welcome">👋 欢迎使用AI智能填报助手</div>
            <div class="ai-model-selector">
              <el-select
                v-model="selectedModelId"
                placeholder="选择AI模型"
                size="small"
                popper-class="topIndex"
                style="width: 150px"
                :teleported="true"
                append-to="body"
                :disabled="aiThinking"
                @change="onModelChange"
              >
                <el-option
                  v-for="model in aiModelList"
                  :key="model.modelId"
                  :label="model.modelName"
                  :value="model.modelId"
                />
              </el-select>
            </div>
          </div>
          <div class="form-list-title">请选择需要填报的表单：</div>
          <!-- 加载状态 -->
          <div v-if="formsLoading" class="loading-container">
            <el-icon class="is-loading">
              <Loading/>
            </el-icon>
            <span>加载表单中...</span>
          </div>
          <!-- 表单列表 -->
          <div v-else class="form-list">
            <el-tag
              v-for="aiFormSetting in aiFormSettingList"
              :key="aiFormSetting.formSettingId"
              :type="aiFormSetting.formSettingId === selectedFormSettingId ? 'success' : 'info'"
              class="form-tag"
              @click="selectForm(aiFormSetting)"
              effect="dark"
            >
              {{ aiFormSetting.formName }}
            </el-tag>
            <el-button v-if="aiFormSettingList.length > 5" type="text" class="more-btn" @click="showMore = !showMore">
              更多
            </el-button>
          </div>
          <el-dialog v-model="showMore" title="选择其他表单" width="400px" @close="moreFilterText = ''">
            <el-input
              v-model="moreFilterText"
              placeholder="输入表单名称过滤"
              clearable
              style="margin-bottom: 12px;"
            />
            <el-scrollbar style="max-height:300px;">
              <el-tag
                v-for="form in filteredForms"
                :key="form.formSettingId"
                :type="form.formSettingId === selectedFormSettingId ? 'success' : 'info'"
                class="form-tag"
                style="margin-bottom: 8px;"
                @click="selectForm(form); showMore = false"
                effect="dark"
              >
                {{ form.formName }}
              </el-tag>
            </el-scrollbar>
          </el-dialog>
        </div>
        <!-- 聊天区始终渲染，内容为空时不显示消息 -->
        <div class="ai-float-chat-list" ref="chatListRef">
          <div v-for="(msg, idx) in chatList" :key="idx"
               :class="['ai-float-chat-item', msg.from === 'ai' ? 'ai-chat-ai' : 'ai-chat-user']">
            <template v-if="msg.from === 'ai'">
              <div class="ai-avatar">🤖</div>
              <div class="ai-float-chat-bubble ai-float-chat-bubble-ai">
                <div v-if="msg.type === 'select' && msg.selectLists">
                  <div class="ai-select-title" style="font-weight:bold; margin-bottom:8px;">{{ msg.text }}</div>
                  <div class="ai-select-lists">
                    <div v-for="(list, lidx) in msg.selectLists" :key="lidx" class="ai-select-list-block">
                      <div class="ai-select-list-title">{{ list.title }}</div>
                      <div class="ai-select-options">
                        <el-button v-for="opt in list.options.slice(0,4)" :key="opt" size="small"
                                   @click="() => handleSelectOption(opt,lidx)"
                                   :type="selectedOption === opt ? 'primary' : 'default'">{{ opt.fieldValue }}
                        </el-button>
                        <el-button v-if="list.options.length > 4" size="small" type="primary" link
                                   @click="() => openSelectDialog(list,lidx)">更多
                        </el-button>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-else v-html="formatMsg(msg.text)"></div>
              </div>
            </template>
            <template v-else>
              <div class="ai-float-chat-bubble-user-wrap">
                <div class="ai-float-chat-bubble" v-html="formatMsg(msg.text)"></div>
                <div class="ai-avatar ai-avatar-user">👤</div>
              </div>
            </template>
          </div>
        </div>
        <el-dialog v-model="selectDialog" title="更多选项" width="400px" @close="selectDialogFilterText = ''">
          <div v-if="selectDialogList">
            <div class="ai-select-title">{{ selectDialogList.title }}</div>
            <el-input
              v-model="selectDialogFilterText"
              placeholder="输入关键字过滤"
              clearable
              style="margin-bottom: 12px;"
            />
            <div class="ai-select-options">
              <el-button v-for="opt in filteredSelectDialogOptions" :key="opt" size="small"
                         @click="() => handleSelectOption(opt)"
                         :type="selectedOption === opt ? 'primary' : 'default'">
                {{ opt.fieldValue }}
              </el-button>
            </div>
          </div>
        </el-dialog>
        <div class="ai-float-input-area">
          <div v-if="selectedFormSettingId" class="ai-float-form-info">
            <div class="form-info-title">
              当前表单：{{ aiFormSettingList.find(f => f.formSettingId === selectedFormSettingId)?.formName }}
            </div>
            <div class="form-info-tip">请根据下方示例填写内容，AI将自动为您智能填报。</div>
            <div class="form-info-example">{{ aiFormSettingList.find(f => f.formSettingId === selectedFormSettingId)?.remark ?? '如：申请10个物料A用于生产线1，计划交付日期为2024-07-01'}}</div>
          </div>
          <div class="ai-float-input-row">
            <el-button
              @click="toggleRecording"
              :class="['recording-btn', { 'recording': isRecording }]"
              v-loading="audioAsrLoading"
              :disabled="aiThinking"
              circle
              type="primary"
            >
              <template #icon>
                <el-icon v-if="isRecording"><VideoPause /></el-icon>
                <el-icon v-else><Microphone /></el-icon>
              </template>
            </el-button>
            <el-input
              v-model="inputValue"
              type="textarea"
              :rows="2"
              :autosize="{ minRows: 2, maxRows: 6 }"
              :maxlength="300"
              :disabled="!selectedFormSettingId || aiThinking"
              placeholder="请输入内容（最多300字符）"
              @keydown="onInputKeydown"
              class="ai-float-input"
              show-word-limit
              clearable
            />
            <el-button
              class="ai-float-send-btn"
              :disabled="!canSend || aiThinking"
              icon="Top"
              @click="() => handleSend()"
              circle
              type="success"
            />

          </div>
        </div>
      </div>
    </div>

    <!-- 新增：调整大小的句柄 -->
    <div class="ai-float-resize-handle" @mousedown="startResize"></div>
  </div>
</template>

<script setup lang="ts">
import {ref, reactive, computed, onMounted, onBeforeUnmount, nextTick, shallowRef, watch, getCurrentInstance} from 'vue'
import {ElMessage} from 'element-plus'
import {Close, Loading} from '@element-plus/icons-vue'
import type {ComponentInternalInstance} from 'vue'
import {getAiFormSettingList, getAiFormSettingDetailList} from '@/api/ai/base/aiFormSetting';
import {AiFormSettingVO, AiFormSettingDetailVO} from '@/api/ai/base/aiFormSetting/types';
import {aiFillForm, recognizeSpeechByUrl, uploadFile} from '@/api/ai/skill/aiAssistant';
import router from "@/router"
import {useSharedDataStore} from '@/api/monitorData'
import {getAiModelJoinList} from "@/api/ai/skill/aiChat";
import {AIModelVO} from "@/api/ai/skill/aiChat/types";

const sharedStore = useSharedDataStore()

const {proxy} = getCurrentInstance() as ComponentInternalInstance

const aiFormSettingList = ref<AiFormSettingVO[]>([])
const aiFormSettingDetailListMap = ref<Record<number, AiFormSettingDetailVO[]>>({});
const selectedFormSettingId = ref<number | null>(null)
const selectedForm = ref();
const formsLoading = ref(false)
const isShowLeft = ref(false);
const aiLoading = ref(false);
const currentSize = ref("menu");

const currentSizeClass = computed(() =>
  `size-${currentSize.value}`
);


// 用reactive对象直接定义state
const state = reactive({
  isShowSearch: false,
  menuQuery: '',
  menuList: []
});

// 搜索弹窗打开
const openSearch = () => {
  state.menuQuery = '';
  state.isShowSearch = true;
  nextTick(() => {
    setTimeout(() => {
      // layoutMenuAutocompleteRef.value.focus();
    });
  });
};

// 动态生成的表单页面映射
const formPageMap = ref<Record<number, { loader: () => Promise<any>, props: any }>>({})

// 加载表单数据并初始化formPageMap
const loadForms = async () => {
  try {
    formsLoading.value = true
    const res = await getAiFormSettingList({})
    if (res.code === 200) {
      aiFormSettingList.value = res.data || []
      // 动态生成formPageMap
      initFormPageMap()
    }
  } catch (error) {
    console.error('加载表单数据失败:', error)
    ElMessage.error('加载表单数据失败')
  } finally {
    formsLoading.value = false
  }
}

// 动态生成formPageMap
const initFormPageMap = () => {
  const newFormPageMap: Record<number, { loader: () => Promise<any>, props: any }> = {}

  aiFormSettingList.value.forEach(form => {
    // // 根据表单的formPath字段动态生成组件路径
    // let componentPath = form.formPath
    // if(!form.dialogVisibleVariable ||  form.dialogVisibleVariable===''){
    //   componentPath = '../../../views/'+componentPath;
    // }else{
    //   componentPath = "/"+componentPath;
    // }
    // 创建动态加载器
    const loader = () => {
      try {
        // const dd = new URL(`@/views/system/user/index.vue`, import.meta.url).href;
        // return import(`${componentPathUrl}`);
        if (!form.dialogVisibleVariable || form.dialogVisibleVariable === '') {
          const componentPath = '../../../views/' + form.formPath;
          return import(/* @vite-ignore */ componentPath)
        }
      } catch (error) {
        // console.error(`加载组件失败: ${componentPath}`, error)
        // return import('@/views/ai/skill/aiForm/index.vue')
      }
    }

    // 根据表单类型设置不同的props
    const props = getFormProps(form)

    newFormPageMap[form.formSettingId] = {loader, props}
  })

  formPageMap.value = newFormPageMap
}

// 根据表单信息生成props
const getFormProps = (form: AiFormSettingVO) => {
  const baseProps = {
    formSettingId: form.formSettingId,
    formName: form.formName,
    formType: form.formType,
    dialogVisibleVariable: form.dialogVisibleVariable,
    formPath: form.formPath,
    userInput: ''
  }

  // 根据表单类型添加特定props
  switch (form.formType) {
    case 'system':
      return {...baseProps, pageNum: 1, pageSize: 10}
    case 'ai':
      return {...baseProps, aiType: 'form', mode: 'edit'}
    default:
      return baseProps
  }
}

const selectForm = async (aiFormSetting: AiFormSettingVO) => {
  if( selectedFormSettingId.value === aiFormSetting.formSettingId) return;
  selectedFormSettingId.value = aiFormSetting.formSettingId
  selectedForm.value = aiFormSetting;
  aiLoading.value = true
  try {
    resetAiAssistant();
    if (!aiFormSettingDetailListMap.value[aiFormSetting.formSettingId]) {
      const res = await getAiFormSettingDetailList(
        {formSettingId: aiFormSetting.formSettingId, settingFlag: '1'})
      if (res.code === 200) {
        aiFormSettingDetailListMap.value[aiFormSetting.formSettingId] = res.data || []
      }
    }
  } finally {
    aiLoading.value = false
  }
  console.log(aiFormSettingDetailListMap.value[aiFormSetting.formSettingId])
}

const resetAiAssistant = () =>{
  chatList.value = [];
}

// function selectForm(aiFormSetting: AiFormSettingVO) {
//   selectedFormSettingId.value = aiFormSetting.formSettingId
//   if(!aiFormSettingDetailListMap[aiFormSetting.formSettingId]){
//     const res = await getAiFormSettingDetailList({formSettingId: aiFormSetting.formSettingId})
//     if (res.code === 200) {
//       aiFormSettingDetailListMap.value[aiFormSetting.formSettingId] = res.data || []
//     }
//   }
// }


const currentComponent = shallowRef(null)
const currentProps = ref({})
watch(selectedFormSettingId, async (formSettingId) => {
  if (formSettingId && formPageMap.value[formSettingId]) {
    try {
      if (formPageMap.value[formSettingId].props && formPageMap.value[formSettingId].props.dialogVisibleVariable && formPageMap.value[formSettingId].props.dialogVisibleVariable !== '') {
        isShowLeft.value = false
        currentSize.value = "menu";
        router.push({path: "/" + formPageMap.value[formSettingId].props.formPath, query: {from: "ai"}})

        // proxy.$store.commit('aiFormSettingId', formSettingId)
        // proxy.$store.commit('aiFormSetting', formPageMap.value[formSettingId])
      } else {
        isShowLeft.value = true
        currentSize.value = "form";
        const mod = await formPageMap.value[formSettingId].loader()
        console.log(formPageMap.value[formSettingId].props)
        currentComponent.value = mod.default
        currentProps.value = {...formPageMap.value[formSettingId].props, userInput: ''}
      }


    } catch (error) {
      console.error('加载表单组件失败:', error)
      ElMessage.error('加载表单组件失败')
      currentComponent.value = null
      currentProps.value = {}
    }
  } else {
    currentComponent.value = null
    currentProps.value = {}
  }
})


// 暴露变量
defineExpose({
  openSearch
});


const getAiModelList = async () => {
  // loading.value = true;
  const res = await getAiModelJoinList({modelTypeId: 1});
  aiModelList.value = res.data;
  await setDefaultAiModel();
  // console.log(res)
  // platformList.value = res.data;
  // loading.value = false;
}

const setDefaultAiModel = async () => {
  aiModelList.value.forEach((item: AIModelVO) => {
    if (item.defaultFlag === "1") {
      // alert(JSON.stringify(item))
      selectedModelId.value = item.modelId;
      selectedPlatformId.value = item.platformId;
      // provider.value = item.platformCode;
      // console.log(item.platformIcon)
      // platformIcon.value = item.platformIcon;
    }
  })
}

function onModelChange() {
  const model = aiModelList.value.find(m => m.modelId === selectedModelId.value)
  if (model) {
    selectedPlatformId.value = model.platformId
    // platformIcon.value = model.platformIcon;
  }
}

watch(state, (newVal) => {
  if (newVal.isShowSearch) {
    loadForms()
    getAiModelList();
  }
});

const selectLists = ref([]);

// 存储fieldType为1的元素及其位置信息,显示使用
const type1Elements = ref([]);
// 存储fieldType为2的元素及其位置信息，赋值使用
const type2Elements = ref([]);

// 存储选中后对应的fieldType为2的元素
const selectedType2Elements = ref([]);

// 处理数据，找出所有fieldType为1的元素
const processData = (data) => {
  type1Elements.value = [];
  type2Elements.value = [];
  let title = "";
  data.forEach((subArray, subArrayIndex) => {
    if (Array.isArray(subArray)) {
      subArray.forEach(item => {
        if (item.fieldType === '3' || item.fieldType === 3) {//请选择关联表的表名title信息
          if (title == '') title = item.fieldValue;
        }

        if (item.fieldType === '1' || item.fieldType === 1) {//赋值
          type1Elements.value.push({
            ...item,
            subArrayIndex
          });
        }

        if (item.fieldType === '2' || item.fieldType === 2) {//显示的名称
          type2Elements.value.push({
            ...item,
            subArrayIndex
          });
        }
      });

    }
  });
  selectLists.value.push({title: title, options: type2Elements.value, formOptions: type1Elements.value});
};


const sendForm = ref({});
const handleSend = async (selectedText?: string) => {
  if ((!canSend.value || aiThinking.value) && !selectedText) return
  const userMsg = selectedText || inputValue.value
  chatList.value.push({text: userMsg, from: 'user', type: 'text'})
  scrollToBottom()
  aiThinking.value = true
  inputValue.value = 'AI思考中....'
  aiLoading.value = true
  console.log(aiFormSettingDetailListMap.value[selectedFormSettingId.value]);
  try {
    let params = {
      naturalLanguageQuery: userMsg,
      formSettingId: selectedFormSettingId.value,
      formSettingDetailList: aiFormSettingDetailListMap.value[selectedFormSettingId.value],
      modelId: selectedModelId.value,
      platformId: selectedPlatformId.value
    }

    // chatList.value.push({
    //   text: '操作成功,请选择相关信息:',
    //   from: 'ai',
    //   type: 'select',
    //   selectLists: selectLists.value
    // })
    //
    // sharedStore.updateDynamicValue({
    //   message: {deptId:100},
    //   timestamp: new Date().toLocaleString()
    // })
    // return;

    const response = await aiFillForm(params)
    sendForm.value = response;
    inputValue.value = ''
    aiThinking.value = false
    traverseJSON();

    if (selectedForm.value && selectedForm.value.dialogVisibleVariable && selectedForm.value.dialogVisibleVariable !== '') {
      //打开菜单时赋值使用
      sharedStore.updateDynamicValue({
        message: sendForm.value,
        timestamp: new Date().toLocaleString()
      })
    } else {
      //直接打开表单赋值使用
      currentProps.value = sendForm.value;
    }


    // 固定AI回复+多个选择列表
    // chatList.value.push({
    //   text: '操作成功，请选择相关信息：',
    //   from: 'ai',
    //   type: 'select',
    //   selectLists: [
    //     {title: '物料信息', options: ['物料A', '物料B', '物料C', '物料D', '物料E', '物料F']},
    //     {title: 'BOM信息', options: ['BOM-001', 'BOM-002', 'BOM-003', 'BOM-004', 'BOM-005']}
    //   ]
    // })


    if (selectLists.value.length > 0) {
      chatList.value.push({
        text: '操作成功,请选择相关信息:',
        from: 'ai',
        type: 'select',
        selectLists: selectLists.value
      })
    } else {
      chatList.value.push({
        text: '操作成功',
        from: 'ai',
      })
    }


    scrollToBottom()

    console.log(1)
    console.log(response)

  } catch (error) {
    proxy?.$modal.msgError(error);
    console.log("Error:" + error)
    chatList.value.push({
      text: '请重试：'+error,
      from: 'ai',
    })
  } finally {
    aiThinking.value = false
    inputValue.value = ''
    aiLoading.value = false
  }
}


// 递归遍历JSON对象的函数
function traverseJSON() {


  // 判断是否为数组
  if (Array.isArray(sendForm.value)) {
    console.log('这是一个数组，包含 ' + sendForm.value.length + ' 个元素:');
    // 遍历数组中的每个元素
    // obj.forEach((item, index) => {
    //   console.log('  '.repeat(indent) + '索引 ' + index + ':');
    // });
  } else {
    // 遍历对象的所有key值
    for (const key in sendForm.value) {
      // 确保key是对象自身的属性（非继承）
      if (sendForm.value.hasOwnProperty(key)) {
        const value = sendForm.value[key];

        // 判断value是否为数组
        if (Array.isArray(value)) {
          // selectLists: [
          //     {title: '物料信息', options: ['物料A', '物料B', '物料C', '物料D', '物料E', '物料F']},
          //     {title: 'BOM信息', options: ['BOM-001', 'BOM-002', 'BOM-003', 'BOM-004', 'BOM-005']}
          //   ]
          sendForm.value[key] = '';
          if (value.length == 1) {

            const firstValue = value[0];
            firstValue.forEach(item => {
              if(item.fieldType ==='1' || item.fieldType===1){
                sendForm.value[key] = item.fieldValue
              }
            });

            // let selectList = {title: value[0].relateTableDesc, options: value}
            // selectLists.value.push(selectList);
          }else if (value.length > 1) {
            processData(value)
          }

          // 遍历数组中的每个元素
          // value.forEach((item, index) => {
          //   console.log('  '.repeat(indent + 1) + '数组元素 ' + index + ':');
          // });
        }
        // 如果value是对象但不是数组，递归遍历
        // else if (value !== null && typeof value === 'object') {
        //   console.log('  '.repeat(indent) + '值是一个对象:');
        //   traverseJSON(value, indent + 1);
        // }
        // 基本类型值直接输出
        // else {
        //   console.log('  '.repeat(indent) + '值:', value);
        // }
      }
    }
  }
}


// 录音相关对象
const isRecording = ref(false);
let mediaRecorder = null
let microphoneStream = null
let audioChunks = []
let audioContext = null
const targetSampleRate = 16000 // 目标采样率，可根据后端要求调整

// 状态变量
const audioAsrLoading = ref(false);
const isUploading = ref(false)
const uploadProgress = ref(0)
const recognitionResult = ref('')
const recordings = ref([])

const toggleRecording = () => {
  if (isRecording.value) {
    stopRecording();
  } else {
    startRecording();
  }
}

// 开始录音
async function startRecording() {
  try {
    // 检查浏览器支持
    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
      proxy.$modal.msgError('您的浏览器不支持录音功能')
      return
    }

    // 获取用户麦克风权限
    microphoneStream = await navigator.mediaDevices.getUserMedia({
      audio: {
        echoCancellation: true,
        noiseSuppression: true,
        autoGainControl: true
      }
    })

    // 初始化Web Audio API用于后续处理
    if (!audioContext) {
      audioContext = new (window.AudioContext)()
    }

    // 设置MediaRecorder
    const options = {
      mimeType: 'audio/webm;codecs=opus' // 优先使用opus编码
    }

    // 降级处理，确保兼容性
    if (!MediaRecorder.isTypeSupported(options.mimeType)) {
      options.mimeType = 'audio/webm'
      if (!MediaRecorder.isTypeSupported(options.mimeType)) {
        options.mimeType = 'audio/ogg;codecs=opus'
        if (!MediaRecorder.isTypeSupported(options.mimeType)) {
          proxy.$modal.msgError('您的浏览器不支持高质量录音格式')
          return
        }
      }
    }

    mediaRecorder = new MediaRecorder(microphoneStream, options)
    audioChunks = []

    // 收集音频数据
    mediaRecorder.ondataavailable = (event) => {
      if (event.data.size > 0) {
        audioChunks.push(event.data)
      }
    }

    // 录音开始
    mediaRecorder.start()
    isRecording.value = true
    // addLog('录音已开始')

  } catch (error) {
    console.error('开始录音失败:', error)
    // addLog(`开始录音失败: ${error.message}`)
    stopRecording()
  }
}

// 停止录音
function stopRecording() {

  try {
    if (!isRecording.value) return
    // 更新录音状态
    isRecording.value = false
    // 停止MediaRecorder
    if (mediaRecorder && mediaRecorder.state !== 'inactive') {
      mediaRecorder.stop()
      // 录音停止后的处理
      mediaRecorder.onstop = async () => {
        audioAsrLoading.value = true;
        try {
          // 关闭麦克风流
          if (microphoneStream) {
            microphoneStream.getTracks().forEach(track => track.stop())
            microphoneStream = null
          }

          // addLog('录音已停止，正在处理音频...')

          // 将录音数据转换为WAV格式
          const wavBlob = await convertToWav(audioChunks)

          // 保存录音到历史记录
          const recordingName = `recording_${new Date().toISOString().replace(/[:.]/g, '-')}.wav`
          const recordingUrl = URL.createObjectURL(wavBlob)
          recordings.value.unshift({
            name: recordingName,
            url: recordingUrl,
            file: wavBlob
          })

          // 限制历史记录数量
          if (recordings.value.length > 5) {
            const oldestRecording = recordings.value.pop()
            URL.revokeObjectURL(oldestRecording.url)
          }

          // addLog(`音频处理完成，文件大小: ${(wavBlob.size / 1024).toFixed(2)}KB`)

          // 自动上传录音文件
          await uploadAudioFile(wavBlob, recordingName)

        } catch (error) {
          console.error('处理录音文件失败:', error)
          proxy.$modal.msgError('处理录音文件失败，请重试', error)
          // addLog(`处理录音文件失败: ${error.message}`)
        } finally {
          audioAsrLoading.value = false;
        }
      }
    }

  } catch (error) {
    console.error('停止录音失败:', error)
    // addLog(`停止录音失败: ${error.message}`)
  } finally {

  }
}

// 将音频数据转换为WAV格式
async function convertToWav(audioChunks) {
  // 将音频块合并为单个Blob
  const audioBlob = new Blob(audioChunks)

  // 读取音频数据并转换为WAV
  return new Promise((resolve, reject) => {
    const fileReader = new FileReader()
    fileReader.onload = async (e) => {
      try {
        // 获取ArrayBuffer
        const arrayBuffer = e.target.result

        // 使用Web Audio API解码音频数据
        const audioBuffer = await audioContext.decodeAudioData(arrayBuffer)

        // 转换为目标采样率的WAV格式
        const wavBuffer = await resampleAndConvertToWav(audioBuffer, targetSampleRate)

        resolve(new Blob([wavBuffer], {type: 'audio/wav'}))
      } catch (error) {
        reject(error)
      }
    }
    fileReader.onerror = reject
    fileReader.readAsArrayBuffer(audioBlob)
  })
}

// 重采样并转换为WAV格式
async function resampleAndConvertToWav(audioBuffer, targetRate) {
  // 获取原始音频数据
  const channels = audioBuffer.numberOfChannels
  const sampleRate = audioBuffer.sampleRate
  const length = audioBuffer.length

  // 计算重采样后的长度
  const newLength = Math.floor(length * targetRate / sampleRate)

  // 创建目标采样率的AudioContext
  const offlineContext = new OfflineAudioContext(channels, newLength, targetRate)

  // 创建缓冲区源节点
  const source = offlineContext.createBufferSource()
  source.buffer = audioBuffer

  // 连接到输出
  source.connect(offlineContext.destination)

  // 开始播放
  source.start()

  // 渲染重采样后的音频
  const renderedBuffer = await offlineContext.startRendering()

  // 将AudioBuffer转换为WAV格式
  return encodeWAV(renderedBuffer)
}

// 将AudioBuffer编码为WAV格式
function encodeWAV(audioBuffer) {
  const numberOfChannels = audioBuffer.numberOfChannels
  const sampleRate = audioBuffer.sampleRate
  const bitDepth = 16

  // 获取所有声道的数据
  const channels = []
  for (let i = 0; i < numberOfChannels; i++) {
    channels.push(audioBuffer.getChannelData(i))
  }

  // 计算总样本数
  const sampleCount = channels[0].length
  const byteRate = sampleRate * numberOfChannels * bitDepth / 8

  // 创建WAV文件头部
  const wavHeader = new ArrayBuffer(44)
  const view = new DataView(wavHeader)

  // RIFF标识符
  writeString(view, 0, 'RIFF')
  // 文件大小
  view.setUint32(4, 36 + sampleCount * numberOfChannels * 2, true)
  // WAVE标识符
  writeString(view, 8, 'WAVE')
  // fmt子块标识符
  writeString(view, 12, 'fmt ')
  // fmt子块大小
  view.setUint32(16, 16, true)
  // 音频格式（PCM）
  view.setUint16(20, 1, true)
  // 声道数
  view.setUint16(22, numberOfChannels, true)
  // 采样率
  view.setUint32(24, sampleRate, true)
  // 字节率
  view.setUint32(28, byteRate, true)
  // 块对齐
  view.setUint16(32, numberOfChannels * 2, true)
  // 位深度
  view.setUint16(34, bitDepth, true)
  // data子块标识符
  writeString(view, 36, 'data')
  // data子块大小
  view.setUint32(40, sampleCount * numberOfChannels * 2, true)

  // 创建PCM数据
  const pcmBytes = new ArrayBuffer(wavHeader.byteLength + sampleCount * numberOfChannels * 2)
  const pcmView = new DataView(pcmBytes)

  // 复制WAV头部
  for (let i = 0; i < wavHeader.byteLength; i++) {
    pcmView.setUint8(i, new Uint8Array(wavHeader)[i])
  }

  // 写入PCM数据
  let offset = 44
  for (let i = 0; i < sampleCount; i++) {
    for (let channel = 0; channel < numberOfChannels; channel++) {
      const sample = Math.max(-1, Math.min(1, channels[channel][i]))
      // 将Float32转换为Int16
      pcmView.setInt16(offset, sample < 0 ? sample * 0x8000 : sample * 0x7FFF, true)
      offset += 2
    }
  }

  return pcmBytes
}

// 写入字符串到DataView
function writeString(view, offset, string) {
  for (let i = 0; i < string.length; i++) {
    view.setUint8(offset + i, string.charCodeAt(i))
  }
}

// 上传音频文件
async function uploadAudioFile(blob, fileName) {
  try {
    isUploading.value = true
    uploadProgress.value = 0
    recognitionResult.value = ''

    // addLog(`开始上传音频文件: ${fileName}`)

    // 创建FormData对象
    const formData = new FormData()
    formData.append('file', blob, fileName)

    const response = await uploadFile(formData);
    console.log(response)

    // 处理响应
    if (response.code === 200) {
      // addLog('音频上传成功，正在识别')

      const response1 = await recognizeSpeechByUrl(response.data.url);
      if (response1.code === 200) {
        console.log("--" + response1);
        inputValue.value += response1.data.text
        // recognitionResult.value = response1.data.text || '识别成功，但未返回文本结果'
        // addLog('识别成功，结果为: ' + recognitionResult.value)
      }
    } else {
      // addLog(`上传失败，状态码: ${response.status}`)
    }

  } catch (error) {
    console.error('上传音频文件失败:', error)
    proxy.$message.error('上传音频文件失败', error)
    // addLog(`上传音频文件失败: ${error.message || '未知错误'}`)
  } finally {
    isUploading.value = false
    uploadProgress.value = 0
  }
}


function handleSend1(selectedText?: string) {
  if ((!canSend.value || aiThinking.value) && !selectedText) return
  const userMsg = selectedText || inputValue.value
  chatList.value.push({text: userMsg, from: 'user', type: 'text'})
  // 动态传递userInput参数给左侧组件
  if (currentComponent.value) {
    currentProps.value = {...currentProps.value, userInput: userMsg}
  }
  scrollToBottom()
  aiThinking.value = true
  inputValue.value = 'AI思考中....'
  setTimeout(() => {
    inputValue.value = ''
    aiThinking.value = false
    // 固定AI回复+多个选择列表
    chatList.value.push({
      text: '操作成功，请选择相关信息：',
      from: 'ai',
      type: 'select',
      selectLists: [
        {title: '物料信息', options: ['物料A', '物料B', '物料C', '物料D', '物料E', '物料F']},
        {title: 'BOM信息', options: ['BOM-001', 'BOM-002', 'BOM-003', 'BOM-004', 'BOM-005']}
      ]
    })
    scrollToBottom()
  }, 2000)
}


const showMore = ref(false)
const inputValue = ref('')
const canSend = computed(() => selectedFormSettingId.value && inputValue.value.trim().length > 0)

// AI模型相关数据
const aiModelList = ref([
  { modelId: 1, modelName: 'GPT-3.5' },
  { modelId: 2, modelName: 'GPT-4' },
  { modelId: 3, modelName: 'Claude-3' },
  { modelId: 4, modelName: 'Gemini-Pro' }
])
const selectedModelId = ref() // AI模型ID
const selectedPlatformId = ref() // AI平台ID

// 新增：更多弹窗过滤输入
const moreFilterText = ref('')
const filteredForms = computed(() =>
  aiFormSettingList.value.filter(form => form.formName.includes(moreFilterText.value))
)

type ChatSelectList = { title: string, options: string[] }
type ChatMsg = { text: string, from: 'user' | 'ai', type?: 'text' | 'select', selectLists?: ChatSelectList[] }
const chatList = ref<ChatMsg[]>([])
const selectDialog = ref(false)
const selectDialogList = ref<ChatSelectList | null>(null)
const selectDialogListIndex = ref();
const aiThinking = ref(false)
const chatListRef = ref<HTMLElement | null>(null)
const selectedOption = ref('')
const iframeRef = ref<HTMLIFrameElement | null>(null)

// 新增：AI更多弹窗过滤输入
const selectDialogFilterText = ref('')
const filteredSelectDialogOptions = computed(() =>
  selectDialogList.value
    ? selectDialogList.value.options.filter(opt => {
      // 检查opt是否为对象，如果是则访问其字符串属性
      // 这里假设对象有label或value属性，根据实际情况修改
      const fieldValue = typeof opt === 'string' ? opt :
        opt.fieldValue
      return fieldValue.toLowerCase().includes(selectDialogFilterText.value.toLowerCase());
    })
    : []
)



// 默认显示在最右侧
onMounted(() => {

  // 加载表单数据
  // loadForms()
  //
  // const testData = [[{"fieldKey":"relateTableDesc","fieldValue":"部门1","fieldType":"3"},
  //   {"fieldKey":"deptName","fieldValue":"测试部门1","fieldType":"2"},
  //   {"fieldKey":"deptId","fieldValue":105,"fieldType":"1"}],
  //   [{"fieldKey":"relateTableDesc","fieldValue":null,"fieldType":"3"},
  //     {"fieldKey":"deptName","fieldValue":"测试部门2","fieldType":"2"},
  //     {"fieldKey":"deptId","fieldValue":"1952572898270183426","fieldType":"1"}]
  // ]
  //
  //
  // processData(testData);
  //
  // const testData1 = [
  //   [{"fieldKey":"relateTableDesc","fieldValue":"部门2","fieldType":"3"},
  //     {"fieldKey":"deptName","fieldValue":"测试部门11","fieldType":"2"},
  //     {"fieldKey":"deptId","fieldValue":1051,"fieldType":"1"}],
  //   [{"fieldKey":"relateTableDesc","fieldValue":null,"fieldType":"3"},
  //     {"fieldKey":"deptName","fieldValue":"测试部门22","fieldType":"2"},
  //     {"fieldKey":"deptId","fieldValue":"19525728982701834261","fieldType":"1"}]
  // ]
  // processData(testData1);
})

onBeforeUnmount(() => {

})

// 组件卸载时清理资源
onUnmounted(() => {
  // 停止MediaRecorder
  if (mediaRecorder && mediaRecorder.state !== 'inactive') {
    mediaRecorder.stop()
  }

  // 关闭音频上下文
  if (audioContext) {
    audioContext.close()
    audioContext = null
  }

  // 释放URL对象
  recordings.value.forEach(recording => {
    URL.revokeObjectURL(recording.url)
  })


})


function scrollToBottom() {
  nextTick(() => {
    if (chatListRef.value) {
      chatListRef.value.scrollTop = chatListRef.value.scrollHeight
    }
  })
}


// 保证所有方法直接在<script setup>中定义
function handleSelectOption(opt, index) {
  if (index === undefined || index === null) {
    index = selectDialogListIndex.value
  }

  let selectList = selectLists.value[index];
  selectedOption.value = opt
  let selectFormOptions = selectList.formOptions;
  const subArray = selectFormOptions[opt.subArrayIndex];
  const newValueJson = {[subArray.fieldKey]: subArray.fieldValue}
  sharedStore.updateDynamicValue({
    message: newValueJson,
    timestamp: new Date().toLocaleString()
  })

  // currentProps.value= newValueJson;

}

function openSelectDialog(list: ChatSelectList,listIndex:number) {
  selectDialogList.value = list
  selectDialog.value = true
  selectDialogListIndex.value = listIndex;
}

function formatMsg(text: string) {
  // 转换换行符为<br>，并做简单转义防XSS
  if (text) {
    return text
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/\n/g, '<br>')
  }
}

function onInputKeydown(e: KeyboardEvent) {
  if (e.key === 'Enter' && !e.shiftKey) {
    e.preventDefault();
    handleSend();
  }
  // shift+enter 默认换行，无需处理
}

function close() {
  state.isShowSearch = false
}

// 新增：拖拽相关状态
const isDragging = ref(false);
const isResizing = ref(false);
const windowPosition = ref({ x: 'auto', y: 0 });
const isSmallSize = ref(false);
const windowSize = ref({ width: '24%', height: '100vh' });


const startPos = ref({ x: 0, y: 0 });
const startSize = ref({ width: 0, height: 0 });
const isCustomPosition = ref(false); // 新增：标记是否为自定义位置

// 新增：拖拽功能实现
function startDrag(e: MouseEvent) {
  if (isResizing.value) return;
  isDragging.value = true;

  // 获取窗口当前实际位置
  const windowElement = document.querySelector('.ai-float-window') as HTMLElement;
  if (windowElement) {
    const rect = windowElement.getBoundingClientRect();
    startPos.value = {
      x: e.clientX - rect.left,
      y: e.clientY - rect.top
    };
  }

  // 标记为自定义位置
  isCustomPosition.value = true;

  document.addEventListener('mousemove', onDrag);
  document.addEventListener('mouseup', stopDrag);
}

function onDrag(e: MouseEvent) {
  if (!isDragging.value) return;
  const newX = e.clientX - startPos.value.x;
  const newY = e.clientY - startPos.value.y;

  // 确保窗口不会超出视口边界（留出一些边距）
  const maxX = window.innerWidth - 200; // 最小宽度200px
  const maxY = window.innerHeight - 100; // 最小高度100px

  windowPosition.value = {
    x: Math.max(0, Math.min(newX, maxX)),
    y: Math.max(0, Math.min(newY, maxY))
  };

  // 当窗口被拖动时，不再固定在右侧
  if (currentSize.value === 'menu' || currentSize.value === 'form' || currentSize.value === 'minimize') {
    currentSize.value = 'custom';
  }
}

function stopDrag() {
  isDragging.value = false;
  document.removeEventListener('mousemove', onDrag);
  document.removeEventListener('mouseup', stopDrag);
}

// ... existing code ...



// 新增：调整大小功能实现
function startResize(e: MouseEvent) {
  isResizing.value = true;
  startPos.value = { x: e.clientX, y: e.clientY };
  startSize.value = {
    width: window.innerWidth * parseFloat(windowSize.value.width) / 100,
    height: window.innerHeight * parseFloat(windowSize.value.height) / 100
  };

  document.addEventListener('mousemove', onResize);
  document.addEventListener('mouseup', stopResize);
  e.preventDefault(); // 防止拖动时选中文本
}

function onResize(e: MouseEvent) {
  if (!isResizing.value) return;

  const deltaX = e.clientX - startPos.value.x;
  const deltaY = e.clientY - startPos.value.y;

  // 计算新的宽度和高度，确保最小尺寸
  let newWidth = startSize.value.width + deltaX;
  let newHeight = startSize.value.height + deltaY;

  newWidth = Math.max(200, newWidth); // 最小宽度200px
  newHeight = Math.max(300, newHeight); // 最小高度300px

  // 转换为视口百分比
  windowSize.value = {
    width: `${(newWidth / window.innerWidth) * 100}%`,
    height: `${(newHeight / window.innerHeight) * 100}%`
  };

  // 当窗口大小被调整时，不再使用预设尺寸
  if (currentSize.value !== 'custom') {
    currentSize.value = 'custom';
  }
}

function stopResize() {
  isResizing.value = false;
  document.removeEventListener('mousemove', onResize);
  document.removeEventListener('mouseup', stopResize);
}

// 新增：切换预设尺寸时更新窗口大小
watch(currentSize, (newSize) => {
  if (newSize === 'menu') {
    windowSize.value = { width: '24%', height: '100vh' };
    windowPosition.value = { x: 'auto', y: 0 };
  } else if (newSize === 'form') {
    windowSize.value = { width: '80%', height: '100vh' };
    windowPosition.value = { x: 'auto', y: 0 };
  } else if(newSize === 'minimize'){
    windowSize.value = { width: '24%', height: '360px' };
    windowPosition.value = { x: 'auto', y: 0 };
  }

  // const windowSize = computed(() => {
  //   if (isSmallSize.value) {
  //     return {
  //       width: '100px',
  //       height: '100px',
  //       top: 'auto',
  //       bottom: '20px',
  //       left: 'auto',
  //       right: '20px',
  //       borderRadius: '8px',
  //       overflow: 'hidden'
  //     }
  //   }else{
  //     return {
  //       width: '24%', height: '100vh'
  //     }
  //   }
  //   return {}
  // })


});


// 新增：调整窗口大小
function toggleSize() {
  if(currentSize.value === 'minimize'){
    if (!selectedForm.value) {//没有选择form时，原始大小
      currentSize.value = 'menu';
    }else{
      if(selectedForm.value.dialogVisibleVariable && selectedForm.value.dialogVisibleVariable !== ''){
        currentSize.value = 'menu'
      } else{
        currentSize.value = 'form'
      }
    }
  }else{
    currentSize.value = 'minimize'
  }
}

</script>

<style scoped lang="less">
.ai-float-fullscreen {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 7005;
  background: #fff;
  border-radius: 0;
  box-shadow: none;
}

.ai-float-window {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
  background: #fff;
  border-radius: 12px;
  padding: 0 0 16px 0;
  min-height: 220px;
  user-select: none;
  display: flex;
  flex-direction: column;
  height: 99vh;
  max-height:99vh;
  right: 0;
  left: auto;
  top: 0;
  position: fixed;
  z-index: 7005;
}

/* 确保Element Plus下拉列表显示在浮窗之上 */
::deep(.el-select-dropdown) {
  z-index: 9000 !important;
}
::deep(.el-popper) {
  z-index: 9000 !important;
}
::deep(.ai-select-popper) {
  z-index: 9500 !important;
}
::deep(.el-overlay) {
  z-index: 8000 !important;
}
::deep(.el-overlay .el-dialog) {
  z-index: 8001 !important;
}

// 修复动态样式
&.size-custom {
  right: v-bind('isCustomPosition ? "auto" : "0"');
  left: v-bind('isCustomPosition ? windowPosition.x + "px" : "auto"');
  top: v-bind('isCustomPosition ? windowPosition.y + "px" : "0"');
  width: v-bind('windowSize.width');
  height: v-bind('windowSize.height');
}

&.size-minimized {
  right: auto !important;
  left: v-bind('windowPosition.x + "px"') !important;
  top: v-bind('windowPosition.y + "px"') !important;
  width: v-bind('windowSize.width + "px"') !important;
  height: v-bind('windowSize.height + "px"') !important;
  border-radius: 20px;
  padding: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}


// 新增：最小化状态下隐藏内容
.size-minimized .ai-float-main,
.size-minimized .ai-float-form-list,
.size-minimized .ai-float-header > div:first-child {
  display: none;
}

// 新增：最小化按钮样式
.size-minimized .ai-float-header {
  padding: 0;
  width: 100%;
  height: 100%;
  border-bottom: none;
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 确保头部右侧按钮组正确显示 */
.ai-float-header-actions {
  display: flex;
  align-items: center;
}

// 优化最小化按钮样式
.ai-float-minimize {
  font-size: 16px;
  cursor: pointer;
  color: #888;
  transition: color 0.2s;
  margin-right: 12px;
  line-height: 1;
}

.size-form {
  width: 80vw;
}

.size-menu {
  width: 24%; //80vw的30%。跟下面al-float-right的flex定义匹配宽度
}

.size-minimize {
  width: 24%;
  height:360px;
}

.ai-float-minimize:hover {
  color: #409eff;
}

// 最小化状态下隐藏关闭按钮
.size-minimized .ai-float-close {
  display: none;
}

// 优化调整大小的句柄，使用通用图标样式
.ai-float-resize-handle {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 16px;
  height: 16px;
  border-radius: 2px;
  cursor: se-resize;
  opacity: 0.6;
  transition: opacity 0.2s;
  z-index: 10;

  // 使用CSS创建通用的调整大小图标
  &::after {
    content: '';
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 8px 8px 0;
    border-color: transparent #fff transparent transparent;
  }
}

.ai-float-resize-handle:hover {
  opacity: 1;
}

.ai-float-main {
  display: flex;
  height: 100vh;
}

.ai-float-left {
  flex: 7 7 0;
  background: #f7f8fa;
  border-right: 1px solid #e0e7ef;
  overflow: auto;
  height: 100%;
}

.ai-float-right {
  flex: 3 3 0;
  min-width: 260px;
  width: 500px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

// 调整头部按钮区域布局
.ai-float-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 18px;
  font-weight: bold;
  padding: 16px 24px 8px 24px;
  cursor: move;
  border-bottom: 1px solid #f0f0f0;
}

// 调整头部右侧按钮组
.ai-float-header-actions {
  display: flex;
  align-items: center;
}

.ai-float-welcome {
  font-size: 16px;
  color: #409eff;
  margin-bottom: 10px;
  font-weight: 500;
}

.ai-float-close {
  font-size: 20px;
  cursor: pointer;
  color: #888;
  transition: color 0.2s;
}

.ai-float-close:hover {
  color: #f56c6c;
}

.ai-float-form-list {
  padding: 16px 24px 0 24px;
  flex-shrink: 0;
  max-height: 220px;
  overflow-y: auto;
}

.form-list-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.form-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.form-list-title {
  font-size: 15px;
  color: #333;
  margin: 0;
  margin-bottom:10px;
}

.form-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.form-tag {
  cursor: pointer;
  margin-bottom: 4px;
}

.more-btn {
  margin-left: 8px;
  font-size: 13px;
  padding: 0 4px;
}

.loading-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  color: #666;
  gap: 8px;
}

.ai-float-input-area {
  padding: 6px 24px 0 24px;
  flex-shrink: 0;
  height: 140px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.ai-float-form-info {
  margin-bottom: 8px;
  background: #f6f8fa;
  border-radius: 1px;
  padding: 10px 14px;
}

.form-info-title {
  font-weight: bold;
  color: #333;
  margin-bottom: 2px;
}

.form-info-tip {
  color: #666;
  font-size: 13px;
  margin-bottom: 2px;
}

.form-info-example {
  color: #999;
  font-size: 13px;
}

.ai-float-input-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.ai-float-input {
  flex: 1 1 auto;
}

.ai-model-selector {
  flex-shrink: 0;
  z-index:8000;
}

.ai-float-send-btn {
  margin-bottom: 4px;
}

.ai-float-chat-list {
  flex: 1 1 auto;
  margin: 0 24px;
  margin-top: 12px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  min-height: 0;
  max-height: calc(100vh - 170px - 140px - 32px);
}

.ai-float-chat-item {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.ai-chat-ai {
  justify-content: flex-start;
}

.ai-avatar {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #e0e7ef 0%, #f6f8fa 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-right: 8px;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.08);
}

.ai-float-chat-bubble {
  background: linear-gradient(135deg, #409eff 0%, #6ec1ff 100%);
  color: #fff;
  border-radius: 20px 20px 4px 24px;
  padding: 12px 22px;
  max-width: 80%;
  font-size: 14px;
  word-break: break-all;
  box-shadow: 0 4px 16px rgba(64, 158, 255, 0.13);
  line-height: 1.85;
  min-height: 36px;
  display: inline-block;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.ai-float-chat-bubble-ai {
  background: linear-gradient(135deg, #f4f4f4 0%, #e9f0fb 100%);
  color: #333;
  border-radius: 16px 16px 16px 6px;
  box-shadow: 0 2px 12px rgba(64, 158, 255, 0.10);
  border: 1px solid #e0e7ef;
}

.ai-select-lists {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}

.ai-select-list-block {
  width: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  margin: 0;
}

.ai-select-list-title {
  font-weight: 500;
  color: #333;
  text-align: left;
  width: 100%;
  margin: 0;
  padding: 0;
}

.ai-select-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  text-align: left;
  margin: 0;
  padding: 0;
}

.ai-select-options .el-button {
  width: 100%;
  text-align: left;
  margin: 0;
  padding-left: 0 !important;
  justify-content: flex-start;
}

.el-dialog__body .ai-select-title {
  margin-bottom: 8px;
}

.el-dialog__body .ai-select-options {
  width: 100%;
  justify-content: flex-start;
  gap: 8px;
}

.ai-float-chat-bubble-user-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 8px;
}

.ai-avatar-user {
  background: linear-gradient(135deg, #e0e7ef 0%, #d0eaff 100%);
  color: #409eff;
}


.recording-btn {
  margin-bottom: 4px;
}

.recording-btn.recording {
  color: #f56c6c;
}

</style>
<style>

.topIndex {
  z-index: 99999999999999999999999 !important;
}
</style>