拆分组件 assistantMsg.vue

wujingjing

2024-12-31 1d0eec6da86e3e9bcbf002d1a22142586fe023a3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
import { ElMessage } from 'element-plus';
import type { ComputedRef } from 'vue';
import { computed, nextTick, ref } from 'vue';
// import useClipboard from 'vue-clipboard3';
import { onClickOutside, useClipboard } from '@vueuse/core';
import type { ChatMessage } from '../model/types';
import { AnswerState, AnswerType, RoleEnum } from '../model/types';
import { SetHistoryAnswerState } from '/@/api/ai/chat';
import { isSharePage } from '/@/stores/chatRoom';
 
export type AssistantContentOptOption = {
    sendChatMessage: any;
};
 
export const useAssistantContentOpt = (option: AssistantContentOptOption) => {
    const { sendChatMessage } = option;
    const { copy } = useClipboard();
 
    const copyClick = (item) => {
        const type = item.content.type;
        let text = '';
        if (type === AnswerType.Knowledge) {
            text = item.content.values?.map((item) => item.answer).join('\n\n') ?? '';
        } else {
            text = item.content.values;
        }
        ElMessage.success('复制成功');
        copy(text);
    };
 
    const likeClick = async (item) => {
        const toSetState = item.state === AnswerState.Like ? AnswerState.Null : AnswerState.Like;
        const res = await SetHistoryAnswerState({
            history_id: item.historyId,
            answer_state: toSetState,
        });
        item.state = toSetState;
    };
 
    const unLikeClick = async (item) => {
        const toSetState = item.state === AnswerState.Unlike ? AnswerState.Null : AnswerState.Unlike;
        const res = await SetHistoryAnswerState({
            history_id: item.historyId,
            answer_state: toSetState,
        });
        item.state = toSetState;
    };
    const feedbackPosition = ref({
        x: 0,
        y: 0,
    });
 
    const feedbackIsShow = ref(false);
    const feedbackContent = ref('');
    const feedbackPanelRef = ref<HTMLDivElement>(null);
    const currentFeedbackMapItem = ref(null);
    const curFeedbackIndex = ref(0);
    const feedbackClick = async (e, item, index) => {
        currentFeedbackMapItem.value = item;
        curFeedbackIndex.value = index;
        const offsetX = -4;
        const offsetY = -8;
        feedbackIsShow.value = true;
        nextTick(() => {
            feedbackPosition.value = {
                x: -feedbackPanelRef.value[index].$el.clientWidth + offsetX,
                y: -feedbackPanelRef.value[index].$el.clientHeight + offsetY,
            };
        });
    };
 
    onClickOutside(
        computed(() => feedbackPanelRef.value?.[curFeedbackIndex.value]),
        (e) => {
            feedbackIsShow.value = false;
            feedbackContent.value = '';
        }
    );
    // useClickOther(
    //     computed(() => feedbackPanelRef.value?.[curFeedbackIndex.value]),
    //     feedbackIsShow,
    //     () => {
    //         feedbackIsShow.value = false;
    //         feedbackContent.value = '';
    //     }
    // );
 
 
    const showFixQuestion = (item) => {
        const isShow = item?.role === RoleEnum.assistant  && item.content?.origin?.sample_question?.length > 0 && !isSharePage.value;
        return isShow;
    };
    const askMoreClick = (item) => {
        if (!item.question) return;
        sendChatMessage({ type: AnswerType.Text, values: item.question });
    };
 
    const fixQuestionClick = (item, originData) => {
        if (!item) return;
        // preQuestion.value = originData?.question;
        try {
            sendChatMessage({
                type: AnswerType.Text,
                values: item,
            });
        } finally {
            // preQuestion.value = null;
        }
    };
 
    return {
        copyClick,
        likeClick,
        unLikeClick,
        feedbackPosition,
        feedbackIsShow,
        feedbackContent,
        feedbackPanelRef,
        currentFeedbackMapItem,
        curFeedbackIndex,
        feedbackClick,
        askMoreClick,
        fixQuestionClick,
        showFixQuestion,
    };
};