流输出

wujingjing

2025-02-20 68df4582c1edaf1952e6c21d769981e348fb3d04

 src/components/chat/smallChat/ChatInput.vue

@@ -1,7 +1,15 @@
<template>
   <div class="playInput !w-full hl_input rounded-[22px] input-border input-shadow">
      <div class="set-input">
         <!-- @input="inputText" -->
      <div class="set-input flex items-center">
         <!-- 添加历史记录按钮 -->
         <el-tooltip placement="top" content="历史记录">
            <div class="history-btn ml-2 mr-2 cursor-pointer text-gray-400 hover:text-gray-600" @click="toggleHistory">
               <el-icon :class="{ 'text-blue-500': showHistory }" class="text-[27px]">
                  <Clock />
               </el-icon>
            </div>
         </el-tooltip>

         <el-input
            ref="inputRef"
            class="question-input relative align-bottom set-inputAnswer"
@@ -11,12 +19,14 @@
            :autosize="{ minRows: 1, maxRows: 3 }"
            v-elInputFocus
            show-word-limit
            @input="inputting"
            v-model="inputText"
            placeholder="在这里输入您的问题开始和AI对话"
            placeholder="请输入操作"
            clearable
            @keyup.enter="emits('sendClick')"
            @keydown="keydownInput"
         >
         </el-input>
         <InputTip ref="inputTipRef" :inputValue="inputText" @updateInputValue="updateInputValue" :isHome="false" />
      </div>
      <div class="h100 flex items-end">
         <div class="upload_img space-y">
@@ -53,32 +63,79 @@
</template>

<script setup lang="ts" name="ChatInput">
import { onMounted } from 'vue';
import { Logger } from '/@/model/logger/Logger';
import { agentStreamByPost } from '/@/api/ai/chat';

import { Clock } from '@element-plus/icons-vue';
import type { InputInstance } from 'element-plus';
import { useInputEvent } from './useInputEvent';
import InputTip from './inputTip/index.vue';
import { ref } from 'vue';
const inputText = defineModel('modelValue', {
   type: String,
   default: '',
});

const props = defineProps({
   isTalking: {
      type: Boolean,
      default: false,
   },
   showHistory: {
      type: Boolean,
      default: false,
   },
});
const emits = defineEmits(['sendClick', 'stopGenClick']);

const emits = defineEmits(['sendClick', 'stopGenClick', 'toggleHistory']);

// 处理回车事件
const handleEnterPress = (e: KeyboardEvent) => {
   // 如果按住了 shift 键，则允许换行
   if (e.shiftKey) {
      return;
   }
   // 否则发送消息
   e.preventDefault(); // 阻止默认的换行行为
   if (inputText.value.trim()) {
      emits('sendClick');
   }
};

const clearTextarea = () => {
   inputText.value = '';
};

// 处理历史记录显示/隐藏
const toggleHistory = () => {
   emits('toggleHistory');
};

const updateInputValue = (val) => {
   inputText.value = val;
};

const inputRef = ref<InputInstance>(null);

const { keydownInput, inputText:inputting, inputTipRef } = useInputEvent({
   props: props,
   emit: emits,
   inputValue: inputText,
   inputRef: inputRef,
});
</script>

<style scoped lang="scss">
@use './chatInput.scss';
.playInput {
   --y-padding: 7px;
   --x-padding: 14px;
}

.history-btn {
   padding: 4px;
   border-radius: 4px;
   transition: all 0.3s;

   &:hover {
      background-color: rgba(0, 0, 0, 0.05);
   }
}
</style>