xiangyuan-app/src/pages/chat/components/ChatFooter.vue

<template>
  <FlexRow
    position="relative" 
    border="1px solid #e0e0e0" 
    :radius="30"
    :padding="20"
    :margin="20"
    align="center"
  >
    <textarea 
      class="input"
      v-model="input"
      placeholder="给智能助手提问题，交流灵感..."
      auto-height
      confirm-type="send"
      style="flex: 1;"
    >
    </textarea>
    <IconButton 
      icon="navigation"
      :touchable="Boolean(input)"
      :loading="props.chatManager.isLoading.value"
      :innerStyle="{
        backgroundColor: '#000',
        borderRadius: '50%',
        padding: '10rpx',
      }"
      color="white"
      @click="props.chatManager.send(input)"
    />
  </FlexRow>
</template>

<script setup lang="ts">
import IconButton from '@/components/basic/IconButton.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import { ref } from 'vue';
import type { ChatManager } from '../core/Chat';

const props = defineProps<{
  chatManager: ChatManager;
}>();

const input = ref('');

</script>