yt-chat-components 0.8.0 → 0.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/public/index.html +50 -47
- package/src/YtChatView/chatWidget/chatWindow/index.tsx +103 -46
- package/src/YtChatView/chatWidget/index.tsx +43 -7
- package/src/YtChatView/logoBtn/index.jsx +3 -1
- package/src/YtChatView/logoSplitBtn/index.jsx +2 -0
- package/src/YtChatView/previewDialog/index.jsx +12 -7
- package/src/assets/aicenter/stopmessage.png +0 -0
package/package.json
CHANGED
package/public/index.html
CHANGED
|
@@ -19,61 +19,64 @@
|
|
|
19
19
|
is-show-side-right=false
|
|
20
20
|
is-show-side-left=false
|
|
21
21
|
modal-index="9999999999"
|
|
22
|
-
modal-width="
|
|
22
|
+
modal-width="1200"
|
|
23
23
|
dialog-index="999999999"
|
|
24
24
|
agent-url="https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/school/ccit/user/xc//image/ebfaf4da-c1d9-46fb-a0b1-f159e95cffc2_AI招生咨询小助手.png"
|
|
25
25
|
agent-name="医专智能助手"
|
|
26
26
|
logo-width="42px"
|
|
27
27
|
logo-font-size="26px"
|
|
28
28
|
logo-position="fixed"
|
|
29
|
-
is-title-side-icon=
|
|
30
|
-
is-show-upload-button=
|
|
29
|
+
is-title-side-icon=false
|
|
30
|
+
is-show-upload-button=true
|
|
31
|
+
drop-man-url="https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/ai/ai_man01.png"
|
|
31
32
|
/>
|
|
32
33
|
</body>
|
|
33
34
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
title="菜鸟驿站"
|
|
37
|
-
host-url="https://ai-api.yuntu.cn"
|
|
38
|
-
app-id="a8e7ebd8-9bf7-499b-9e4a-c235078a0910"
|
|
39
|
-
user-info='{"id": "123", "name": "John Doe", "code":"1606451129" }'
|
|
40
|
-
tags='[{"name":"今天天气怎么样？"},{"name":"明天天气怎么样？"},{"name":"昨天天气怎么样？"}]'
|
|
41
|
-
box-style='{"height":"100%"}'
|
|
42
|
-
is-show-side-right=false
|
|
43
|
-
is-show-side-left=false
|
|
44
|
-
dialog-index="999999999"
|
|
45
|
-
agent-url="https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/school/ccit/user/xc//image/ebfaf4da-c1d9-46fb-a0b1-f159e95cffc2_AI招生咨询小助手.png"
|
|
46
|
-
agent-name="医专智能助手"
|
|
47
|
-
logo-width="42px"
|
|
48
|
-
logo-font-size="26px"
|
|
49
|
-
is-title-side-icon=true
|
|
50
|
-
is-show-upload-button=false
|
|
51
|
-
|
|
52
|
-
|
|
35
|
+
<!--<body style="width: 100vw; height: 100vh; margin:0 ">-->
|
|
36
|
+
<!--<yt-page-chat-->
|
|
37
|
+
<!-- title="菜鸟驿站"-->
|
|
38
|
+
<!-- host-url="https://ai-api.yuntu.cn"-->
|
|
39
|
+
<!-- app-id="a8e7ebd8-9bf7-499b-9e4a-c235078a0910"-->
|
|
40
|
+
<!-- user-info='{"id": "123", "name": "John Doe", "code":"1606451129" }'-->
|
|
41
|
+
<!-- tags='[{"name":"今天天气怎么样？"},{"name":"明天天气怎么样？"},{"name":"昨天天气怎么样？"}]'-->
|
|
42
|
+
<!-- box-style='{"height":"100%"}'-->
|
|
43
|
+
<!-- is-show-side-right=false-->
|
|
44
|
+
<!-- is-show-side-left=false-->
|
|
45
|
+
<!-- dialog-index="999999999"-->
|
|
46
|
+
<!-- agent-url="https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/school/ccit/user/xc//image/ebfaf4da-c1d9-46fb-a0b1-f159e95cffc2_AI招生咨询小助手.png"-->
|
|
47
|
+
<!-- agent-name="医专智能助手"-->
|
|
48
|
+
<!-- logo-width="42px"-->
|
|
49
|
+
<!-- logo-font-size="26px"-->
|
|
50
|
+
<!-- is-title-side-icon=true-->
|
|
51
|
+
<!-- is-show-upload-button=false-->
|
|
52
|
+
<!-- drop-man-url="https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/ai/ai_man01.png"-->
|
|
53
|
+
<!--/>-->
|
|
54
|
+
<!--</body>-->
|
|
53
55
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
right="100"
|
|
57
|
-
bottom="100"
|
|
58
|
-
width="50"
|
|
59
|
-
height="50"
|
|
60
|
-
title="招生助手"
|
|
61
|
-
icon-url="https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/school/ccit/user/xc//image/ebfaf4da-c1d9-46fb-a0b1-f159e95cffc2_AI招生咨询小助手.png"
|
|
62
|
-
host-url="https://ai-api.yuntu.cn"
|
|
63
|
-
user-info='{"id": "test", "name": "test", "code":"test" }'
|
|
64
|
-
is-show-side-right=true
|
|
65
|
-
is-show-side-left=true
|
|
66
|
-
scene-id="c1e7a2a4-6127-4e53-a529-113da78eb069"
|
|
67
|
-
modal-index="9999999999"
|
|
68
|
-
modal-width="1400"
|
|
69
|
-
dialog-index="999999999"
|
|
70
|
-
agent-url="https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/school/bcyz/user/ai/agent.png"
|
|
71
|
-
agent-name="医专智能助手"
|
|
72
|
-
logo-width="42px"
|
|
73
|
-
logo-font-size="26px"
|
|
74
|
-
logo-position="fixed"
|
|
75
|
-
is-title-side-icon=
|
|
76
|
-
is-show-upload-button=false
|
|
77
|
-
|
|
78
|
-
|
|
56
|
+
<!--<body style="width: 100vw; height: 100vh; position: relative; margin: unset ">-->
|
|
57
|
+
<!--<yt-split-modal-chat-->
|
|
58
|
+
<!-- right="100"-->
|
|
59
|
+
<!-- bottom="100"-->
|
|
60
|
+
<!-- width="50"-->
|
|
61
|
+
<!-- height="50"-->
|
|
62
|
+
<!-- title="招生助手"-->
|
|
63
|
+
<!-- icon-url="https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/school/ccit/user/xc//image/ebfaf4da-c1d9-46fb-a0b1-f159e95cffc2_AI招生咨询小助手.png"-->
|
|
64
|
+
<!-- host-url="https://ai-api.yuntu.cn"-->
|
|
65
|
+
<!-- user-info='{"id": "test", "name": "test", "code":"test" }'-->
|
|
66
|
+
<!-- is-show-side-right=true-->
|
|
67
|
+
<!-- is-show-side-left=true-->
|
|
68
|
+
<!-- scene-id="c1e7a2a4-6127-4e53-a529-113da78eb069"-->
|
|
69
|
+
<!-- modal-index="9999999999"-->
|
|
70
|
+
<!-- modal-width="1400"-->
|
|
71
|
+
<!-- dialog-index="999999999"-->
|
|
72
|
+
<!-- agent-url="https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/school/bcyz/user/ai/agent.png"-->
|
|
73
|
+
<!-- agent-name="医专智能助手"-->
|
|
74
|
+
<!-- logo-width="42px"-->
|
|
75
|
+
<!-- logo-font-size="26px"-->
|
|
76
|
+
<!-- logo-position="fixed"-->
|
|
77
|
+
<!-- is-title-side-icon=false-->
|
|
78
|
+
<!-- is-show-upload-button=false-->
|
|
79
|
+
<!-- drop-man-url="https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/ai/ai_man01.png"-->
|
|
80
|
+
<!--/>-->
|
|
81
|
+
<!--</body>-->
|
|
79
82
|
</html>
|
|
@@ -10,6 +10,7 @@ import closexPng from '../../../assets/aicenter/closex.png';
|
|
|
10
10
|
import upFilePng from '../../../assets/aicenter/upfile.png';
|
|
11
11
|
import fileuploadPng from '../../../assets/aicenter/fileupload.png';
|
|
12
12
|
import sendmessagePng from '../../../assets/aicenter/sendmessage.png';
|
|
13
|
+
import stopmessagePng from '../../../assets/aicenter/stopmessage.png';
|
|
13
14
|
import toRightPng from '../../../assets/aicenter/toRight.png';
|
|
14
15
|
import toLeftPng from '../../../assets/aicenter/toLeft.png';
|
|
15
16
|
import typePdfPng from '../../../assets/aicenter/type-pdf.png';
|
|
@@ -69,7 +70,8 @@ export default function ChatWindow({
|
|
|
69
70
|
setDropDownList = () => {},
|
|
70
71
|
dropDownList = [],
|
|
71
72
|
baseConfig = {},
|
|
72
|
-
isShowUploadButton
|
|
73
|
+
isShowUploadButton,
|
|
74
|
+
dropManUrl = '',
|
|
73
75
|
}: {
|
|
74
76
|
tags: [];
|
|
75
77
|
getHistoryList: Function;
|
|
@@ -108,6 +110,7 @@ export default function ChatWindow({
|
|
|
108
110
|
additional_headers?: { [key: string]: string };
|
|
109
111
|
baseConfig: object;
|
|
110
112
|
isShowUploadButton: boolean;
|
|
113
|
+
dropManUrl: string;
|
|
111
114
|
}) {
|
|
112
115
|
const [value, setValue] = useState<string>('');
|
|
113
116
|
const ref = useRef<HTMLDivElement>(null);
|
|
@@ -128,6 +131,8 @@ export default function ChatWindow({
|
|
|
128
131
|
const [recordState, setRecordState] = useState(false); // 录音状态。true为正在录音，false为停止录音
|
|
129
132
|
const [tagList, setTagList] = useState([]); // 问题标签列表
|
|
130
133
|
const {isTitleSideIcon, logoWidth, agentUrl} = baseConfig;
|
|
134
|
+
const inputContainerRef = useRef(null);
|
|
135
|
+
const [inputContainerHeight,setInputContainerHeight] = useState('50px')
|
|
131
136
|
|
|
132
137
|
let voiceChunks = []; // 临时存储录制的语音片段
|
|
133
138
|
// 滚动事件处理，选择文件时，文件内容超出显示框时，显示左右箭头
|
|
@@ -629,35 +634,69 @@ export default function ChatWindow({
|
|
|
629
634
|
</div>
|
|
630
635
|
<div className="cl-header-subtitle"/>
|
|
631
636
|
{!isEmpty(dropDownList) && (
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
<
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
637
|
+
isEmpty(dropManUrl) ?
|
|
638
|
+
<div className="cl-drop-down">
|
|
639
|
+
<div className="drop-down-title">Hi，欢迎使用{window_title}，您可以这样问我:</div>
|
|
640
|
+
<div className="drop-down-list">
|
|
641
|
+
{dropDownList.slice(0,3).map(({backgroundImg, title}) => (
|
|
642
|
+
<div className="drop-down-item-card" key={title}>
|
|
643
|
+
<Typography.Paragraph
|
|
644
|
+
className="drop-down-item-title"
|
|
645
|
+
ellipsis={{
|
|
646
|
+
rows: 2,
|
|
647
|
+
tooltip: `“${title}”`,
|
|
648
|
+
}}>{'“' + title + '”'}
|
|
649
|
+
</Typography.Paragraph>
|
|
650
|
+
<div className="drop-down-item-bottom">
|
|
651
|
+
<div
|
|
652
|
+
className="drop-down-item-bottom-button"
|
|
653
|
+
onClick={() => {
|
|
654
|
+
setDropDownList(undefined);
|
|
655
|
+
handleClick(title);
|
|
656
|
+
}}
|
|
657
|
+
>
|
|
658
|
+
<img src={btn_answer}/>
|
|
659
|
+
{/*<RightOutlined style={{ height: '0.8rem', width: '0.4rem' }} />*/}
|
|
660
|
+
</div>
|
|
661
|
+
<img className="drop-down-item-bottom-img" src={backgroundImg}/>
|
|
662
|
+
</div>
|
|
654
663
|
</div>
|
|
655
|
-
|
|
656
|
-
|
|
664
|
+
))}
|
|
665
|
+
</div>
|
|
666
|
+
</div>
|
|
667
|
+
:
|
|
668
|
+
<div className="cl-drop-man">
|
|
669
|
+
<img className="drop-man-img" src={dropManUrl}/>
|
|
670
|
+
<div className="cl-drop-down">
|
|
671
|
+
<div className="drop-down-title">Hi，欢迎使用{window_title}，您可以这样问我:</div>
|
|
672
|
+
<div className="drop-down-list">
|
|
673
|
+
{dropDownList.slice(0,4).map(({backgroundImg, title}) => (
|
|
674
|
+
<div className="drop-down-item-card" key={title}>
|
|
675
|
+
<Typography.Paragraph
|
|
676
|
+
className="drop-down-item-title"
|
|
677
|
+
ellipsis={{
|
|
678
|
+
rows: 2,
|
|
679
|
+
tooltip: `“${title}”`,
|
|
680
|
+
}}>{'“' + title + '”'}
|
|
681
|
+
</Typography.Paragraph>
|
|
682
|
+
<div className="drop-down-item-bottom">
|
|
683
|
+
<div
|
|
684
|
+
className="drop-down-item-bottom-button"
|
|
685
|
+
onClick={() => {
|
|
686
|
+
setDropDownList(undefined);
|
|
687
|
+
handleClick(title);
|
|
688
|
+
}}
|
|
689
|
+
>
|
|
690
|
+
<img src={btn_answer}/>
|
|
691
|
+
{/*<RightOutlined style={{ height: '0.8rem', width: '0.4rem' }} />*/}
|
|
692
|
+
</div>
|
|
693
|
+
<img className="drop-down-item-bottom-img" src={backgroundImg}/>
|
|
694
|
+
</div>
|
|
695
|
+
</div>
|
|
696
|
+
))}
|
|
657
697
|
</div>
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
</div>
|
|
698
|
+
</div>
|
|
699
|
+
</div>
|
|
661
700
|
)}
|
|
662
701
|
</div>
|
|
663
702
|
<div
|
|
@@ -719,14 +758,14 @@ export default function ChatWindow({
|
|
|
719
758
|
</div>
|
|
720
759
|
<div style={input_container_style} className="cl-input_container">
|
|
721
760
|
<div className="w_file_preview" ref={scrollContainerRef} onScroll={handleScroll}>
|
|
722
|
-
<div className="w_toLeftBox" style={{
|
|
761
|
+
<div className="w_toLeftBox" style={{display: showLeftArrow ? 'flex' : 'none'}}>
|
|
723
762
|
<div className="w_toLeft" onClick={() => handleScrollRight('left')}>
|
|
724
|
-
<img src={toLeftPng}
|
|
763
|
+
<img src={toLeftPng}/>
|
|
725
764
|
</div>
|
|
726
765
|
</div>
|
|
727
|
-
<div className="w_toRightBox" style={{
|
|
766
|
+
<div className="w_toRightBox" style={{display: showRightArrow ? 'flex' : 'none'}}>
|
|
728
767
|
<div className="w_toRight" onClick={() => handleScrollRight('right')}>
|
|
729
|
-
<img src={toRightPng}
|
|
768
|
+
<img src={toRightPng}/>
|
|
730
769
|
</div>
|
|
731
770
|
</div>
|
|
732
771
|
{fileList.map((item, index) => {
|
|
@@ -744,28 +783,28 @@ export default function ChatWindow({
|
|
|
744
783
|
/>
|
|
745
784
|
)}
|
|
746
785
|
{getFileTypeByUrl(item.file.name) == 'pdf' && (
|
|
747
|
-
<img style={{
|
|
786
|
+
<img style={{width: 40, height: 40}} src={typePdfPng}/>
|
|
748
787
|
)}
|
|
749
788
|
{getFileTypeByUrl(item.file.name) == 'word' && (
|
|
750
|
-
<img style={{
|
|
789
|
+
<img style={{width: 40, height: 40}} src={typeWordPng}/>
|
|
751
790
|
)}
|
|
752
791
|
{getFileTypeByUrl(item.file.name) == 'excel' && (
|
|
753
|
-
<img style={{
|
|
792
|
+
<img style={{width: 40, height: 40}} src={typeExcelPng}/>
|
|
754
793
|
)}
|
|
755
794
|
{getFileTypeByUrl(item.file.name) == 'markdown' && (
|
|
756
|
-
<img style={{
|
|
795
|
+
<img style={{width: 40, height: 40}} src={typeMarkdownPng}/>
|
|
757
796
|
)}
|
|
758
797
|
{getFileTypeByUrl(item.file.name) == 'txt' && (
|
|
759
|
-
<img style={{
|
|
798
|
+
<img style={{width: 40, height: 40}} src={typeTextPng}/>
|
|
760
799
|
)}
|
|
761
800
|
{getFileTypeByUrl(item.file.name) == 'mobi' && (
|
|
762
|
-
<img style={{
|
|
801
|
+
<img style={{width: 40, height: 40}} src={typeMobiPng}/>
|
|
763
802
|
)}
|
|
764
803
|
{getFileTypeByUrl(item.file.name) == 'rpub' && (
|
|
765
|
-
<img style={{
|
|
804
|
+
<img style={{width: 40, height: 40}} src={typeRPubPng}/>
|
|
766
805
|
)}
|
|
767
806
|
{getFileTypeByUrl(item.file.name) == 'file' && (
|
|
768
|
-
<img style={{
|
|
807
|
+
<img style={{width: 40, height: 40}} src={upFilePng}/>
|
|
769
808
|
)}
|
|
770
809
|
<div className="w_fileInfoBox">
|
|
771
810
|
<div className="w_fileInfoFileName">{item.file.name}</div>
|
|
@@ -779,14 +818,16 @@ export default function ChatWindow({
|
|
|
779
818
|
removeFile(item, index);
|
|
780
819
|
}}
|
|
781
820
|
>
|
|
782
|
-
<img src={closexPng}
|
|
821
|
+
<img src={closexPng}/>
|
|
783
822
|
</div>
|
|
784
823
|
</div>
|
|
785
824
|
);
|
|
786
825
|
})}
|
|
787
826
|
</div>
|
|
788
|
-
<div className="w_inputBox">
|
|
827
|
+
<div className="w_inputBox" style={{height: inputContainerHeight}}>
|
|
789
828
|
<textarea
|
|
829
|
+
onFocus={()=>setInputContainerHeight('120px')}
|
|
830
|
+
onBlur={()=>setInputContainerHeight('50px')}
|
|
790
831
|
value={value}
|
|
791
832
|
onChange={(e) => setValue(e.target.value)}
|
|
792
833
|
onKeyDown={(e) => {
|
|
@@ -824,15 +865,31 @@ export default function ChatWindow({
|
|
|
824
865
|
</div>
|
|
825
866
|
</Tooltip>
|
|
826
867
|
}
|
|
868
|
+
<Tooltip title={sendingMessage?'点击暂停':'点击发送'}>
|
|
827
869
|
<button
|
|
828
|
-
|
|
829
|
-
style={{ ...(sendingMessage ? { cursor: 'not-allowed' } : {}), padding: '0 13px', background:'transparent', display:'flex', alignItems:'center', justifyContent:'center' }}
|
|
870
|
+
style={{ ...(sendingMessage ? { cursor: 'pointer' } : {}), padding: '0 13px', background:'transparent', display:'flex', alignItems:'center', justifyContent:'center' }}
|
|
830
871
|
onClick={() => {
|
|
831
|
-
|
|
872
|
+
if(sendingMessage){
|
|
873
|
+
const output = {
|
|
874
|
+
message:nowAIContent,
|
|
875
|
+
type:'text'
|
|
876
|
+
};
|
|
877
|
+
addMessage({
|
|
878
|
+
message: extractMessageFromOutput(output),
|
|
879
|
+
isSend: false,
|
|
880
|
+
rawInfo: output.message,
|
|
881
|
+
});
|
|
882
|
+
abortControllerRef.current.abort('disconnect');
|
|
883
|
+
abortControllerRef.current = new AbortController();
|
|
884
|
+
}else{
|
|
885
|
+
|
|
886
|
+
}
|
|
832
887
|
}}
|
|
833
888
|
>
|
|
834
|
-
|
|
889
|
+
|
|
890
|
+
<img src={sendingMessage ? stopmessagePng : sendmessagePng} style={{width: 55}}/>
|
|
835
891
|
</button>
|
|
892
|
+
</Tooltip>
|
|
836
893
|
</div>
|
|
837
894
|
</div>
|
|
838
895
|
</div>
|
|
@@ -37,7 +37,8 @@ export default function ChatWidget({
|
|
|
37
37
|
setDropDownList,
|
|
38
38
|
dropDownList,
|
|
39
39
|
baseConfig,
|
|
40
|
-
isShowUploadButton
|
|
40
|
+
isShowUploadButton,
|
|
41
|
+
dropManUrl
|
|
41
42
|
}: {
|
|
42
43
|
tags: [];
|
|
43
44
|
getHistoryList: Function;
|
|
@@ -72,6 +73,7 @@ export default function ChatWidget({
|
|
|
72
73
|
start_open?: boolean;
|
|
73
74
|
baseConfig:object;
|
|
74
75
|
isShowUploadButton:boolean;
|
|
76
|
+
dropManUrl: string;
|
|
75
77
|
}) {
|
|
76
78
|
const [open, setOpen] = useState(start_open);
|
|
77
79
|
const [messages, setMessages] = useState<ChatMessageType[]>([]);
|
|
@@ -349,7 +351,7 @@ video {
|
|
|
349
351
|
|
|
350
352
|
.cl-window {
|
|
351
353
|
border-radius: 1rem;
|
|
352
|
-
padding-top:
|
|
354
|
+
padding-top: 1.8rem;
|
|
353
355
|
padding-bottom: 1.2rem;
|
|
354
356
|
}
|
|
355
357
|
|
|
@@ -472,10 +474,43 @@ video {
|
|
|
472
474
|
border-radius: 3px;
|
|
473
475
|
}
|
|
474
476
|
|
|
477
|
+
.cl-drop-man{
|
|
478
|
+
width:100%;
|
|
479
|
+
display:flex;
|
|
480
|
+
}
|
|
481
|
+
.cl-drop-man .drop-man-img{
|
|
482
|
+
height:340px;
|
|
483
|
+
margin-right: 4rem;
|
|
484
|
+
margin-left: 3rem;
|
|
485
|
+
}
|
|
486
|
+
|
|
487
|
+
.cl-drop-man .cl-drop-down .drop-down-item-card .drop-down-item-bottom-img{
|
|
488
|
+
height:3.4rem;
|
|
489
|
+
margin-right:20px;
|
|
490
|
+
}
|
|
491
|
+
|
|
492
|
+
.cl-drop-man .drop-down-list{
|
|
493
|
+
width:auto;
|
|
494
|
+
display:flex;
|
|
495
|
+
flex-direction:row;
|
|
496
|
+
flex-wrap:wrap;
|
|
497
|
+
}
|
|
498
|
+
|
|
499
|
+
.cl-drop-man .cl-drop-down .drop-down-item-card{
|
|
500
|
+
width:48%;
|
|
501
|
+
}
|
|
502
|
+
|
|
503
|
+
.cl-drop-man .cl-drop-down{
|
|
504
|
+
flex:1;
|
|
505
|
+
position:unset;
|
|
506
|
+
border-bottom-left-radius: 0;
|
|
507
|
+
}
|
|
508
|
+
|
|
509
|
+
|
|
475
510
|
.cl-drop-down {
|
|
476
511
|
background: #FFFFFF;
|
|
477
512
|
border-radius: 10px;
|
|
478
|
-
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.
|
|
513
|
+
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.05);
|
|
479
514
|
z-index: 1;
|
|
480
515
|
position: absolute;
|
|
481
516
|
width: 100%;
|
|
@@ -635,7 +670,7 @@ margin-bottom:1rem;
|
|
|
635
670
|
padding-top: 0.25rem;
|
|
636
671
|
padding-bottom: 0.25rem;
|
|
637
672
|
font-weight: 300;
|
|
638
|
-
background-color: #
|
|
673
|
+
background-color: #FFFFFF;
|
|
639
674
|
color: rgb(17 24 39);
|
|
640
675
|
border-top-left-radius: 50px;
|
|
641
676
|
border-bottom-left-radius: 50px;
|
|
@@ -648,7 +683,6 @@ margin-bottom:1rem;
|
|
|
648
683
|
.cl-input-element:focus {
|
|
649
684
|
outline: 2px solid transparent;
|
|
650
685
|
outline-offset: 2px;
|
|
651
|
-
height:120px;
|
|
652
686
|
}
|
|
653
687
|
|
|
654
688
|
.cl-input-element:focus::placeholder {
|
|
@@ -2254,7 +2288,7 @@ input::-ms-input-placeholder { /* Microsoft Edge */
|
|
|
2254
2288
|
justify-content: center;
|
|
2255
2289
|
width: fit-content;
|
|
2256
2290
|
height: 30px;
|
|
2257
|
-
background: #
|
|
2291
|
+
background: #00000000;
|
|
2258
2292
|
border-radius: 15px;
|
|
2259
2293
|
border: 1px solid #4B4FFF;
|
|
2260
2294
|
cursor: pointer;
|
|
@@ -2297,6 +2331,8 @@ input::-ms-input-placeholder { /* Microsoft Edge */
|
|
|
2297
2331
|
align-items: center;
|
|
2298
2332
|
box-shadow: 0px 2px 15px 0px rgba(0,48,187,0.1);
|
|
2299
2333
|
border-radius: 30px;
|
|
2334
|
+
background: #FFFFFF;
|
|
2335
|
+
transition: height 0.2s ease;
|
|
2300
2336
|
textarea {
|
|
2301
2337
|
resize: none;
|
|
2302
2338
|
min-height: 48px;
|
|
@@ -2305,7 +2341,6 @@ input::-ms-input-placeholder { /* Microsoft Edge */
|
|
|
2305
2341
|
box-shadow: none !important;
|
|
2306
2342
|
color: #333;
|
|
2307
2343
|
outline: 0;
|
|
2308
|
-
// padding: 5px 10px 0 10px;
|
|
2309
2344
|
width: 100%;
|
|
2310
2345
|
|
|
2311
2346
|
box-sizing: border-box;
|
|
@@ -2387,6 +2422,7 @@ input::-ms-input-placeholder { /* Microsoft Edge */
|
|
|
2387
2422
|
dropDownList={dropDownList}
|
|
2388
2423
|
baseConfig={baseConfig}
|
|
2389
2424
|
isShowUploadButton={isShowUploadButton}
|
|
2425
|
+
dropManUrl={dropManUrl}
|
|
2390
2426
|
/>
|
|
2391
2427
|
</div>
|
|
2392
2428
|
);
|
|
@@ -34,7 +34,8 @@ export class LogoBtn extends React.Component {
|
|
|
34
34
|
logoFontSize,
|
|
35
35
|
logoPosition = 'absolute',
|
|
36
36
|
isTitleSideIcon,
|
|
37
|
-
isShowUploadButton
|
|
37
|
+
isShowUploadButton,
|
|
38
|
+
dropManUrl
|
|
38
39
|
} = this.props;
|
|
39
40
|
const iconConfig = {
|
|
40
41
|
width: `${width || 100}px`,
|
|
@@ -89,6 +90,7 @@ export class LogoBtn extends React.Component {
|
|
|
89
90
|
isTitleSideIcon={isTitleSideIcon}
|
|
90
91
|
modalIndex={modalIndex}
|
|
91
92
|
isShowUploadButton={isShowUploadButton}
|
|
93
|
+
dropManUrl={dropManUrl}
|
|
92
94
|
/>
|
|
93
95
|
</Modal>
|
|
94
96
|
</div>
|
|
@@ -36,6 +36,7 @@ export class LogoSplitBtn extends React.Component {
|
|
|
36
36
|
logoPosition = 'absolute',
|
|
37
37
|
isTitleSideIcon,
|
|
38
38
|
isShowUploadButton,
|
|
39
|
+
dropManUrl
|
|
39
40
|
} = this.props;
|
|
40
41
|
const iconConfig = {
|
|
41
42
|
width: `${width || 100}px`,
|
|
@@ -91,6 +92,7 @@ export class LogoSplitBtn extends React.Component {
|
|
|
91
92
|
isTitleSideIcon={isTitleSideIcon}
|
|
92
93
|
modalIndex={modalIndex}
|
|
93
94
|
isShowUploadButton={isShowUploadButton}
|
|
95
|
+
dropManUrl={dropManUrl}
|
|
94
96
|
/>
|
|
95
97
|
</Modal>
|
|
96
98
|
</div>
|
|
@@ -37,7 +37,7 @@ const style=`
|
|
|
37
37
|
align-items: center;
|
|
38
38
|
width: 300px;
|
|
39
39
|
// height: 100%;
|
|
40
|
-
padding: 1.
|
|
40
|
+
padding: 1.7rem 1.6rem 1.7rem 1.6rem;
|
|
41
41
|
|
|
42
42
|
border-top-left-radius: 8px;
|
|
43
43
|
border-bottom-left-radius: 8px;
|
|
@@ -160,7 +160,7 @@ const style=`
|
|
|
160
160
|
width:300px;
|
|
161
161
|
display:flex;
|
|
162
162
|
flex-direction:column;
|
|
163
|
-
padding:
|
|
163
|
+
padding:2rem 1.6rem 1.8rem 1.6rem
|
|
164
164
|
}
|
|
165
165
|
.rightInnerContainer{
|
|
166
166
|
height:calc(100% - 80px);
|
|
@@ -190,13 +190,15 @@ const style=`
|
|
|
190
190
|
min-height:40%;
|
|
191
191
|
}
|
|
192
192
|
.p_toolRightToRight .rightSkillContainer .rightSkillList{
|
|
193
|
-
display:
|
|
193
|
+
display: flex;
|
|
194
|
+
flex-wrap: wrap;
|
|
194
195
|
grid-template-columns: repeat(3, 1fr);
|
|
195
196
|
gap: 10px;
|
|
196
197
|
}
|
|
197
198
|
.p_toolRightToRight .rightSkillContainer .rightSkillList .rightSkillItem{
|
|
198
199
|
text-align: center;
|
|
199
200
|
cursor:pointer;
|
|
201
|
+
width:30%;
|
|
200
202
|
}
|
|
201
203
|
.p_toolRightToRight .rightSkillContainer .rightSkillList .rightSkillItem img{
|
|
202
204
|
width: 40px;
|
|
@@ -209,11 +211,12 @@ const style=`
|
|
|
209
211
|
overflow: hidden;
|
|
210
212
|
text-overflow: ellipsis;
|
|
211
213
|
white-space: nowrap;
|
|
212
|
-
width:80px;
|
|
214
|
+
// width:80px;
|
|
213
215
|
color: #333333;
|
|
214
216
|
}
|
|
215
217
|
.p_toolRightToRight .rightKnowledgeTitle{
|
|
216
|
-
|
|
218
|
+
nargin-top: 2.2rem;
|
|
219
|
+
margin-bottom: 1.4rem;
|
|
217
220
|
font-size:18px;
|
|
218
221
|
font-weight:500;
|
|
219
222
|
display:flex;
|
|
@@ -437,10 +440,11 @@ export class ToolDialog extends React.Component {
|
|
|
437
440
|
logoFontSize = '26px',
|
|
438
441
|
isTitleSideIcon = false,// 是否将左侧历史顶部icon移到中间顶部左侧蓝点位置
|
|
439
442
|
modalIndex,
|
|
440
|
-
isShowUploadButton
|
|
443
|
+
isShowUploadButton,
|
|
444
|
+
dropManUrl
|
|
441
445
|
} = this.props;
|
|
442
446
|
const { sceneInfo, currentFlow = {} } = this.state;
|
|
443
|
-
const { flows=[], name: sceneName } = sceneInfo;
|
|
447
|
+
const { flows=[], name: sceneName, } = sceneInfo;
|
|
444
448
|
return (
|
|
445
449
|
<div style={boxStyle}>
|
|
446
450
|
<style dangerouslySetInnerHTML={{ __html: style }}></style>
|
|
@@ -510,6 +514,7 @@ export class ToolDialog extends React.Component {
|
|
|
510
514
|
dropDownList={this.state.dropDownList}
|
|
511
515
|
baseConfig={{ isTitleSideIcon, logoWidth, agentUrl }}
|
|
512
516
|
isShowUploadButton={isShowUploadButton}
|
|
517
|
+
dropManUrl={dropManUrl}
|
|
513
518
|
/>
|
|
514
519
|
</div>
|
|
515
520
|
{
|
|
Binary file
|