yt-chat-components 0.9.2 → 0.9.4

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.
Files changed (8) hide show
  1. package/package.json +1 -1
  2. package/public/index.html +50 -52
  3. package/src/YtChatView/chatWidget/chatWindow/index.tsx +30 -4
  4. package/src/YtChatView/chatWidget/index.tsx +77 -1
  5. package/src/YtChatView/logoBtn/index.jsx +1 -0
  6. package/src/YtChatView/logoSplitBtn/index.jsx +1 -0
  7. package/src/YtChatView/previewDialog/index.jsx +3 -5
  8. package/src/YtChatView/previewDialog/index.module.css +124 -14
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "yt-chat-components",
3
- "version": "0.9.2",
3
+ "version": "0.9.4",
4
4
  "main": "build/static/js/bundle.min.js",
5
5
  "module": "build/static/js/bundle.min.js",
6
6
  "types": "build/static/js/index.d.ts",
package/public/index.html CHANGED
@@ -5,32 +5,31 @@
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>Document</title>
7
7
  </head>
8
- <!--<body style="width: 100vw; height: 100vh; position: relative; margin: unset ">-->
9
- <!--<yt-chat-->
10
- <!-- right="100"-->
11
- <!-- bottom="100"-->
12
- <!-- width="50"-->
13
- <!-- height="50"-->
14
- <!-- title="菜鸟驿站"-->
15
- <!-- 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"-->
16
- <!-- host-url="https://ai-api.yuntu.cn"-->
17
- <!-- user-info='{"id": "123", "name": "John Doe", "code":"1606451129" }'-->
18
- <!-- app-id="620005e0-3370-4447-951f-b1d5c814a92a"-->
19
- <!-- is-show-side-left=true-->
20
- <!-- is-show-side-right=false-->
21
- <!-- modal-index="9999999999"-->
22
- <!-- modal-width="1200"-->
23
- <!-- dialog-index="999999999"-->
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
- <!-- agent-name="医专智能助手"-->
26
- <!-- logo-width="42px"-->
27
- <!-- logo-font-size="26px"-->
28
- <!-- logo-position="fixed"-->
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"-->
32
- <!--/>-->
33
- <!--</body>-->
8
+ <body style="width: 100vw; height: 100vh; position: relative; margin: unset ">
9
+ <yt-chat
10
+ right="100"
11
+ bottom="100"
12
+ width="50"
13
+ height="50"
14
+ title="菜鸟驿站"
15
+ 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"
16
+ host-url="https://ai-api.yuntu.cn"
17
+ user-info='{"id": "123", "name": "John Doe", "code":"1606451129" }'
18
+ app-id="0b4cc8ef-d5bb-45e6-b342-647765f5d195"
19
+ is-show-side-left=true
20
+ is-show-side-right=false
21
+ modal-index="9999999999"
22
+ modal-width="1200"
23
+ dialog-index="999999999"
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
+ agent-name="医专智能助手"
26
+ logo-width="42px"
27
+ logo-font-size="26px"
28
+ logo-position="fixed"
29
+ is-title-side-icon=false
30
+ is-show-upload-button=true
31
+ />
32
+ </body>
34
33
 
35
34
  <!--<body style="width: 100vw; height: 100vh; margin:0 ">-->
36
35
  <!--<yt-page-chat-->
@@ -54,30 +53,29 @@
54
53
  <!--/>-->
55
54
  <!--</body>-->
56
55
 
57
- <body style="width: 100vw; height: 100vh; position: relative; margin: unset ">
58
- <yt-split-modal-chat
59
- right="100"
60
- bottom="100"
61
- width="50"
62
- height="50"
63
- title="招生助手"
64
- 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"
65
- host-url="https://ai-api.yuntu.cn"
66
- user-info='{"id": "test", "name": "test", "code":"test" }'
67
- is-show-side-right=true
68
- is-show-side-left=true
69
- scene-id="c1e7a2a4-6127-4e53-a529-113da78eb069"
70
- modal-index="9999999999"
71
- modal-width="1400"
72
- dialog-index="999999999"
73
- agent-url="https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/school/bcyz/user/ai/agent.png"
74
- agent-name="医专智能助手"
75
- logo-width="42px"
76
- logo-font-size="26px"
77
- logo-position="fixed"
78
- is-title-side-icon=false
79
- is-show-upload-button=false
80
- drop-man-url="https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/ai/ai_man01.png"
81
- />
82
- </body>
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="1300"-->
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
+ <!--/>-->
80
+ <!--</body>-->
83
81
  </html>
package/src/YtChatView/chatWidget/chatWindow/index.tsx CHANGED
@@ -72,6 +72,7 @@ export default function ChatWindow({
72
72
  baseConfig = {},
73
73
  isShowUploadButton,
74
74
  dropManUrl = '',
75
+ modalWidth
75
76
  }: {
76
77
  tags: [];
77
78
  getHistoryList: Function;
@@ -111,6 +112,7 @@ export default function ChatWindow({
111
112
  baseConfig: object;
112
113
  isShowUploadButton: boolean;
113
114
  dropManUrl: string;
115
+ modalWidth: number;
114
116
  }) {
115
117
  const [value, setValue] = useState<string>('');
116
118
  const ref = useRef<HTMLDivElement>(null);
@@ -615,6 +617,24 @@ export default function ChatWindow({
615
617
  };
616
618
  }, [sessionId]);
617
619
 
620
+ /**
621
+ * 开场白展示优化
622
+ * 1、如果是全屏模式：则横向展示三项开场白
623
+ * 2、如果是弹窗模式，则当弹窗宽度大于【x】时横向展示三项开场白，当小于等于【x】时则纵向展示三项开场白
624
+ * */
625
+ const judgeDropClass = () => {
626
+ if (modalWidth === undefined) {
627
+ if(isEmpty(dropManUrl)){
628
+ return 'cl-drop-down';
629
+ }
630
+ return 'cl-drop-screen';
631
+ }
632
+ if (modalWidth > 1800) {
633
+ return 'cl-drop-man';
634
+ }
635
+ return 'cl-drop-horizontal'
636
+ }
637
+
618
638
 
619
639
  return (
620
640
  <div
@@ -638,7 +658,7 @@ export default function ChatWindow({
638
658
  <div className="cl-drop-down">
639
659
  <div className="drop-down-title">Hi，欢迎使用{window_title}，您可以这样问我:</div>
640
660
  <div className="drop-down-list">
641
- {dropDownList.slice(0,3).map(({backgroundImg, title}) => (
661
+ {dropDownList.map(({backgroundImg, title}) => (
642
662
  <div className="drop-down-item-card" key={title}>
643
663
  <Typography.Paragraph
644
664
  className="drop-down-item-title"
@@ -665,13 +685,19 @@ export default function ChatWindow({
665
685
  </div>
666
686
  </div>
667
687
  :
668
- <div className="cl-drop-man">
688
+ <div className={judgeDropClass()}>
669
689
  <img className="drop-man-img" src={dropManUrl}/>
670
690
  <div className="cl-drop-down">
671
691
  <div className="drop-down-title">Hi，欢迎使用{window_title}，您可以这样问我:</div>
672
692
  <div className="drop-down-list">
673
- {dropDownList.slice(0,4).map(({backgroundImg, title}) => (
674
- <div className="drop-down-item-card" key={title}>
693
+ {dropDownList.map(({backgroundImg, title}) => (
694
+ <div
695
+ className="drop-down-item-card"
696
+ key={title}
697
+ onClick={() => {
698
+ setDropDownList(undefined);
699
+ handleClick(title);
700
+ }}>
675
701
  <Typography.Paragraph
676
702
  className="drop-down-item-title"
677
703
  ellipsis={{
package/src/YtChatView/chatWidget/index.tsx CHANGED
@@ -38,7 +38,8 @@ export default function ChatWidget({
38
38
  dropDownList,
39
39
  baseConfig,
40
40
  isShowUploadButton,
41
- dropManUrl
41
+ dropManUrl,
42
+ modalWidth
42
43
  }: {
43
44
  tags: [];
44
45
  getHistoryList: Function;
@@ -74,6 +75,7 @@ export default function ChatWidget({
74
75
  baseConfig:object;
75
76
  isShowUploadButton:boolean;
76
77
  dropManUrl: string;
78
+ modalWidth: number;
77
79
  }) {
78
80
  const [open, setOpen] = useState(start_open);
79
81
  const [messages, setMessages] = useState<ChatMessageType[]>([]);
@@ -507,6 +509,79 @@ video {
507
509
  border-bottom-left-radius: 0;
508
510
  }
509
511
 
512
+ .cl-drop-horizontal{
513
+ width:100%;
514
+ display:flex;
515
+ margin-top:0.81rem;
516
+ }
517
+
518
+ .cl-drop-horizontal .drop-man-img{
519
+ height:340px;
520
+ margin-right: 4rem;
521
+ margin-left: 3rem;
522
+ }
523
+
524
+ .cl-drop-horizontal .drop-down-list{
525
+ width:auto;
526
+ display:flex;
527
+ flex-direction:row;
528
+ flex-wrap:wrap;
529
+ }
530
+
531
+ .cl-drop-horizontal .cl-drop-down .drop-down-item-card .drop-down-item-bottom-img{
532
+ height:2.4rem;
533
+ width:auto;
534
+ margin-right:20px;
535
+ }
536
+
537
+ .cl-drop-horizontal .cl-drop-down{
538
+ flex:1;
539
+ position:unset;
540
+ border-bottom-left-radius: 0;
541
+ }
542
+
543
+ .cl-drop-horizontal .cl-drop-down .drop-down-item-card{
544
+ width:100%;
545
+ height:unset;
546
+ justify-content:unset;
547
+ flex-direction:row;
548
+ align-items: center;
549
+ padding: 0.8rem 1.2rem 0.8rem;
550
+ cursor:pointer;
551
+ }
552
+
553
+ .cl-drop-horizontal .drop-down-item-bottom-button{
554
+ display:none;
555
+ }
556
+
557
+ .cl-drop-screen{
558
+ width:100%;
559
+ display:flex;
560
+ margin-top:0.81rem;
561
+ align-items: flex-start;
562
+ }
563
+
564
+ .cl-drop-screen .cl-drop-down .drop-down-item-card .drop-down-item-bottom-img{
565
+ height:2.4rem;
566
+ width:auto;
567
+ margin-right:20px;
568
+ }
569
+
570
+ .cl-drop-screen .drop-man-img{
571
+ height:340px;
572
+ margin-right: 4rem;
573
+ margin-left: 3rem;
574
+ }
575
+
576
+ .cl-drop-screen .cl-drop-down{
577
+ flex:1;
578
+ position:unset;
579
+ border-bottom-left-radius: 0;
580
+ }
581
+
582
+ .cl-drop-screen .cl-drop-down .drop-down-item-card{
583
+ width:calc(33% - 0.65rem);
584
+ }
510
585
 
511
586
  .cl-drop-down {
512
587
  background: #FFFFFF;
@@ -2423,6 +2498,7 @@ input::-ms-input-placeholder { /* Microsoft Edge */
2423
2498
  baseConfig={baseConfig}
2424
2499
  isShowUploadButton={isShowUploadButton}
2425
2500
  dropManUrl={dropManUrl}
2501
+ modalWidth={modalWidth}
2426
2502
  />
2427
2503
  </div>
2428
2504
  );
package/src/YtChatView/logoBtn/index.jsx CHANGED
@@ -91,6 +91,7 @@ export class LogoBtn extends React.Component {
91
91
  modalIndex={modalIndex}
92
92
  isShowUploadButton={isShowUploadButton}
93
93
  dropManUrl={dropManUrl}
94
+ modalWidth={modalWidth}
94
95
  />
95
96
  </Modal>
96
97
  </div>
package/src/YtChatView/logoSplitBtn/index.jsx CHANGED
@@ -93,6 +93,7 @@ export class LogoSplitBtn extends React.Component {
93
93
  modalIndex={modalIndex}
94
94
  isShowUploadButton={isShowUploadButton}
95
95
  dropManUrl={dropManUrl}
96
+ modalWidth={modalWidth}
96
97
  />
97
98
  </Modal>
98
99
  </div>
package/src/YtChatView/previewDialog/index.jsx CHANGED
@@ -36,7 +36,6 @@ const style=`
36
36
  flex-direction: column;
37
37
  align-items: center;
38
38
  width: 300px;
39
- // height: 100%;
40
39
  padding: 1.7rem 1.6rem 1.7rem 1.6rem;
41
40
 
42
41
  border-top-left-radius: 8px;
@@ -117,7 +116,6 @@ const style=`
117
116
  .p_toolDialog .p_toolLeft .p_historyDialog .p_historyList {
118
117
  height: calc(100% - 3rem);
119
118
  margin-top: 10px;
120
- // height: 360px;
121
119
  overflow-y: auto;
122
120
  scrollbar-width: none !important; /* firefox */
123
121
  }
@@ -153,7 +151,6 @@ const style=`
153
151
 
154
152
  .p_toolDialog .p_toolRight {
155
153
  flex: 1;
156
- // width: calc(100% - 300px - 300px);
157
154
  }
158
155
 
159
156
  .p_toolRightToRight {
@@ -211,7 +208,6 @@ const style=`
211
208
  overflow: hidden;
212
209
  text-overflow: ellipsis;
213
210
  white-space: nowrap;
214
- // width:80px;
215
211
  color: #333333;
216
212
  }
217
213
  .p_toolRightToRight .rightKnowledgeTitle{
@@ -441,7 +437,8 @@ export class ToolDialog extends React.Component {
441
437
  isTitleSideIcon = false,// 是否将左侧历史顶部icon移到中间顶部左侧蓝点位置
442
438
  modalIndex,
443
439
  isShowUploadButton,
444
- dropManUrl
440
+ dropManUrl,
441
+ modalWidth
445
442
  } = this.props;
446
443
  const { sceneInfo, currentFlow = {} } = this.state;
447
444
  const { flows = [], name: sceneName, character } = sceneInfo;
@@ -515,6 +512,7 @@ export class ToolDialog extends React.Component {
515
512
  baseConfig={{ isTitleSideIcon, logoWidth, agentUrl }}
516
513
  isShowUploadButton={isShowUploadButton}
517
514
  dropManUrl={character || dropManUrl}
515
+ modalWidth={modalWidth}
518
516
  />
519
517
  </div>
520
518
  {
package/src/YtChatView/previewDialog/index.module.css CHANGED
@@ -5,16 +5,19 @@
5
5
 
6
6
  .p_toolDialog {
7
7
  display: flex;
8
+ height:100%;
9
+ background:url('https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/ai/ai_modal_bg.png');
10
+ background-size: cover;
11
+ border-radius:8px;
8
12
  }
9
13
 
10
14
  .p_toolDialog .p_toolLeft {
11
15
  display: flex;
12
16
  flex-direction: column;
13
17
  align-items: center;
14
- /*width: 300px;*/
15
- /*height: 100%;*/
16
- background: linear-gradient(180deg, #CFDAFC 0%, #F0F3FF 100%);
17
- padding: 24px;
18
+ width: 300px;
19
+ padding: 1.7rem 1.6rem 1.7rem 1.6rem;
20
+
18
21
  border-top-left-radius: 8px;
19
22
  border-bottom-left-radius: 8px;
20
23
  }
@@ -26,13 +29,12 @@
26
29
  }
27
30
 
28
31
  .p_toolDialog .p_toolLeft .p_toolLogo .p_logoImg {
29
- width: 60px;
32
+ width: 48px;
30
33
  }
31
34
 
32
35
  .p_toolDialog .p_toolLeft .p_toolLogo .p_logoText {
33
36
  font-weight: bold;
34
37
  margin-left: 10px;
35
- padding-top: 16px;
36
38
  font-size: 30px;
37
39
  background: linear-gradient(to right, #1551FF, #8F4BFF);
38
40
  -webkit-background-clip: text;
@@ -50,6 +52,7 @@
50
52
  border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1 1;
51
53
  backdrop-filter: blur(10px);
52
54
  position: relative;
55
+ max-height:calc(100% - 5.5rem - 60px);
53
56
  }
54
57
 
55
58
  .p_toolDialog .p_toolLeft .p_historyDialog ::-webkit-scrollbar-thumb {
@@ -59,20 +62,23 @@
59
62
  }
60
63
 
61
64
  .p_toolDialog .p_toolLeft .p_historyDialog .p_historyTitle {
62
- padding: 16px 16px 0 16px;
65
+ padding: 1.3rem 16px 0 16px;
63
66
  display: flex;
64
67
  align-items: center;
65
68
  }
66
69
 
67
70
  .p_toolDialog .p_toolLeft .p_historyDialog .p_historyTitle .p_historyImg {
68
- width: 20px;
71
+ width: 25px;
69
72
  }
70
73
 
71
74
  .p_toolDialog .p_toolLeft .p_historyDialog .p_historyTitle .p_dialogTitle {
72
- font-weight: bold;
73
- font-size: 16px;
74
75
  margin-left: 10px;
75
- color: #666666;
76
+ font-weight: 500;
77
+ font-size: 18px;
78
+ color: #333333;
79
+ line-height: 16px;
80
+ text-align: left;
81
+ font-style: normal;
76
82
  }
77
83
 
78
84
  .p_toolDialog .p_toolLeft .p_historyDialog .p_historyListEmpty {
@@ -83,15 +89,21 @@
83
89
  text-align: center;
84
90
  font-size: 12px;
85
91
  color: #999999;
92
+ max-height: calc(100% - 3rem);
93
+
86
94
  }
87
95
 
88
96
  .p_toolDialog .p_toolLeft .p_historyDialog .p_historyList {
97
+ height: calc(100% - 3rem);
89
98
  margin-top: 10px;
90
- /*height: 360px;*/
91
99
  overflow-y: auto;
92
100
  scrollbar-width: none !important; /* firefox */
93
101
  }
94
102
 
103
+ .p_toolDialog .p_toolLeft .p_historyDialog .p_historyList::-webkit-scrollbar{
104
+ display:none;
105
+ }
106
+
95
107
  .p_toolDialog .p_toolLeft .p_historyDialog .p_historyList:hover {
96
108
  scrollbar-width: thin !important; /* firefox */
97
109
  scrollbar-color: #ced4e3 transparent;
@@ -119,13 +131,111 @@
119
131
 
120
132
  .p_toolDialog .p_toolRight {
121
133
  flex: 1;
122
- width: calc(100% - 300px);
134
+ }
135
+
136
+ .p_toolRightToRight {
137
+ width:300px;
138
+ display:flex;
139
+ flex-direction:column;
140
+ padding:2rem 1.6rem 1.8rem 1.6rem
141
+ }
142
+ .rightInnerContainer{
143
+ height:calc(100% - 80px);
144
+ flex:1;
145
+ display:flex;
146
+ flex-direction:column;
147
+ justify-content: space-between;
148
+ }
149
+ .p_toolRightToRight .rightSideTitle{
150
+ margin-bottom:1.4rem;
151
+ margin-top:10px;
152
+ margin-top:0;
153
+ font-size:18px;
154
+ font-weight:500;
155
+ display:flex;
156
+ align-items: center;
157
+ }
158
+ .p_toolRightToRight .rightSideTitle img{
159
+ margin-right:4px;
160
+ }
161
+
162
+ .p_toolRightToRight .rightSideTitle .titleSideColumn{
163
+ color:#1551FF;
164
+ }
165
+
166
+ .p_toolRightToRight .rightSkillContainer{
167
+ min-height:40%;
168
+ }
169
+ .p_toolRightToRight .rightSkillContainer .rightSkillList{
170
+ display: flex;
171
+ flex-wrap: wrap;
172
+ grid-template-columns: repeat(3, 1fr);
173
+ gap: 10px;
174
+ }
175
+ .p_toolRightToRight .rightSkillContainer .rightSkillList .rightSkillItem{
176
+ text-align: center;
177
+ cursor:pointer;
178
+ width:30%;
179
+ }
180
+ .p_toolRightToRight .rightSkillContainer .rightSkillList .rightSkillItem img{
181
+ width: 40px;
182
+ height: 40px;
183
+ border-radius:10px;
184
+ }
185
+ .p_toolRightToRight .rightSkillContainer .rightSkillList .rightSkillItem p{
186
+ margin-top:0px;
187
+ margin-bottom:4px;
188
+ overflow: hidden;
189
+ text-overflow: ellipsis;
190
+ white-space: nowrap;
191
+ color: #333333;
192
+ }
193
+ .p_toolRightToRight .rightKnowledgeTitle{
194
+ nargin-top: 2.2rem;
195
+ margin-bottom: 1.4rem;
196
+ font-size:18px;
197
+ font-weight:500;
198
+ display:flex;
199
+ align-items: center;
200
+ }
201
+
202
+ .p_toolRightToRight .rightKnowledgeTitle img{
203
+ margin-right:4px;
204
+ }
205
+
206
+ .p_toolRightToRight .rightKnowledgeContainer{
207
+ position:relative;
208
+ }
209
+ .p_toolRightToRight .rightMoreButton{
210
+ background: url(${moreAi});
211
+ background-size: 85% auto;
212
+ background-repeat: no-repeat;
213
+ background-position: bottom;
214
+ position: absolute;
215
+ bottom: 8px;
216
+ left: 0;
217
+ width: 100%;
218
+ height: 100%;
219
+ z-index: 1;
220
+ display: flex;
221
+ justify-content: center;
222
+ align-items: flex-end;
223
+ }
224
+ .p_toolRightToRight .rightMoreButton div{
225
+ width:calc(100% - 50px);
226
+ padding: 16px 16px 10px 20px;
227
+ font-weight: 500;
228
+ color: #ffffff;
229
+ line-height: 17px;
230
+ font-size: 12px;
231
+ cursor:pointer;
123
232
  }
124
233
 
125
234
  .p_newDialog {
126
235
  width: 252px;
127
236
  height: 40px;
128
- background: linear-gradient(244deg, #828EFE 0%, #4B4FFF 100%);
237
+ min-height:40px;
238
+ background: linear-gradient( 45deg, #1551FF 0%, #8F4BFF 100%);
129
239
  margin-top: 20px;
130
240
  border-radius: 20px;
131
241
  cursor: pointer;