lingji-work-fe/src/views/home/components/conversation-detail/index.vue

<script lang="tsx">
import { message, Avatar } from 'ant-design-vue';
import { BubbleList } from '@/components/xt-chat/bubble';
import type { BubbleListProps } from 'ant-design-x-vue';
import { useRoute } from 'vue-router';
import SenderInput from '../sender-input/index.vue';
import markdownit from 'markdown-it';
import { Typography } from 'ant-design-vue';

const QUESTION_ROLE = 'question';
const ANSWER_ROLE = 'text';

export default {
  setup(props, { emit, expose }) {
    const route = useRoute();
    const senderRef = ref(null);
    const searchValue = ref('');
    const generateLoading = ref(false);
    const conversationList = ref([]);
    const md = markdownit({ html: true, breaks: true });

    const conversationId = computed(() => {
      return route.params.conversationId;
    });

    const handleSubmit = () => {
      generateLoading.value = true;
      conversationList.value.push({
        role: QUESTION_ROLE,
        content: searchValue.value,
        avatar: () => <Avatar />
      });

      const tempId = Date.now();
      const tempIndex = conversationList.value.length;
      conversationList.value.push({
        id: tempId,
        loading: true,
        role: ANSWER_ROLE,
      });

      setTimeout(() => {
        const content = `> Render as markdown content to show rich text!
          Link: [Ant Design X](https://x.ant.design)
      `;
        searchValue.value = '';
        conversationList.value.splice(tempIndex, 1, {
          id: tempId,
          loading: false,
          role: ANSWER_ROLE,
          content,
          messageRender: (content) => (
            <Typography>
              <div v-html={md.render(content)}></div>
            </Typography>
          ),
        });
      }, 1000);
    };

    const handleCancel = () => {
      generateLoading.value = false;
      message.info('取消生成');
    };

    const roles: BubbleListProps['roles'] = {
      [ANSWER_ROLE]: {
        placement: 'start',
        variant: 'borderless',
        typing: { step: 2, interval: 100 },
        onTypingComplete: () => {
          generateLoading.value = false;
        },
      },
      [QUESTION_ROLE]: {
        placement: 'end',
        shape: 'round',
        styles: {
          content: {
            padding: '6px 12px',
          },
        },
      },
    };

    return () => (
      <div class="conversation-detail-wrap w-full h-full flex">
        <div class="flex-1 flex justify-center">
          <section class="main w-600px h-full relative flex flex-col pt-20px">
            <BubbleList class="flex-1" roles={roles} items={conversationList.value} />
            <div class="w-full flex flex-col justify-center items-center">
              <SenderInput
                class="w-full"
                ref={senderRef}
                placeholder="继续追问..."
                v-model={searchValue.value}
                loading={generateLoading.value}
                onSubmit={handleSubmit}
                onCancel={handleCancel}
              />
              <p class="cts !color-#939499 text-12px !lh-20px my-4px">内容由AI生成，仅供参考</p>
            </div>
          </section>
        </div>
      </div>
    );
  },
};
</script>

<style lang="scss" scoped>
@import './style.scss';
</style>