File size: 2,405 Bytes
08ede16
c947a89
08ede16
 
 
 
 
 
 
 
d2e049e
c947a89
08ede16
d2e049e
c947a89
08ede16
d2e049e
 
 
c947a89
d2e049e
 
c947a89
 
 
 
 
d2e049e
 
c947a89
 
 
 
 
d2e049e
 
 
 
08ede16
 
 
 
 
d2e049e
08ede16
 
 
 
d2e049e
08ede16
 
 
 
 
c947a89
 
 
 
 
08ede16
 
d2e049e
 
 
 
 
 
08ede16
c947a89
 
 
 
 
 
 
08ede16
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
import CopyToClipboard from '@/components/copy-to-clipboard';
import { useSetModalState } from '@/hooks/common-hooks';
import {
  DeleteOutlined,
  DislikeOutlined,
  LikeOutlined,
  SoundOutlined,
  SyncOutlined,
} from '@ant-design/icons';
import { Radio } from 'antd';
import { useCallback } from 'react';
import SvgIcon from '../svg-icon';
import FeedbackModal from './feedback-modal';
import { useSendFeedback } from './hooks';
import PromptModal from './prompt-modal';

interface IProps {
  messageId: string;
  content: string;
  prompt?: string;
}

export const AssistantGroupButton = ({
  messageId,
  content,
  prompt,
}: IProps) => {
  const { visible, hideModal, showModal, onFeedbackOk, loading } =
    useSendFeedback(messageId);
  const {
    visible: promptVisible,
    hideModal: hidePromptModal,
    showModal: showPromptModal,
  } = useSetModalState();

  const handleLike = useCallback(() => {
    onFeedbackOk({ thumbup: true });
  }, [onFeedbackOk]);

  return (
    <>
      <Radio.Group size="small">
        <Radio.Button value="a">
          <CopyToClipboard text={content}></CopyToClipboard>
        </Radio.Button>
        <Radio.Button value="b">
          <SoundOutlined />
        </Radio.Button>
        <Radio.Button value="c" onClick={handleLike}>
          <LikeOutlined />
        </Radio.Button>
        <Radio.Button value="d" onClick={showModal}>
          <DislikeOutlined />
        </Radio.Button>
        {prompt && (
          <Radio.Button value="e" onClick={showPromptModal}>
            <SvgIcon name={`prompt`} width={16}></SvgIcon>
          </Radio.Button>
        )}
      </Radio.Group>
      {visible && (
        <FeedbackModal
          visible={visible}
          hideModal={hideModal}
          onOk={onFeedbackOk}
          loading={loading}
        ></FeedbackModal>
      )}
      {promptVisible && (
        <PromptModal
          visible={promptVisible}
          hideModal={hidePromptModal}
          prompt={prompt}
        ></PromptModal>
      )}
    </>
  );
};

export const UserGroupButton = () => {
  return (
    <Radio.Group size="small">
      <Radio.Button value="a">
        <CopyToClipboard text="xxx"></CopyToClipboard>
      </Radio.Button>
      <Radio.Button value="b">
        <SyncOutlined />
      </Radio.Button>
      <Radio.Button value="c">
        <DeleteOutlined />
      </Radio.Button>
    </Radio.Group>
  );
};