yt-chat-components 1.9.6 → 1.9.8

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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "yt-chat-components",
3
- "version": "1.9.6",
3
+ "version": "1.9.8",
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",
@@ -85,65 +85,70 @@ const TabSelector = ({
85
85
  </div>
86
86
  )
87
87
  }
88
- <div
89
- className={styles.tabSelector}
90
- style={{ width: "auto", height: '100%', flexDirection: 'column', marginTop: '20px' }}
91
- >
92
- {
93
- <div className={styles.leftPanelMobile}>
94
- <div className={styles.left}>
95
- <img src={mobileCnxwImgUrl} alt="Icon"/>
96
- 猜你想问
97
- </div>
98
- <div className={styles.right} onClick={handleValuePageChange}>
99
- <SyncOutlined spin={pageLoading} className={styles.icon}/>
100
- <span>换一批</span>
88
+ {
89
+ !isHideTabSelector && <div
90
+ className={styles.tabSelector}
91
+ style={{ width: "auto", height: '100%', flexDirection: 'column', marginTop: '20px' }}
92
+ >
93
+ {
94
+ <div className={styles.leftPanelMobile}>
95
+ <div className={styles.left}>
96
+ <img src={mobileCnxwImgUrl} alt="Icon"/>
97
+ 猜你想问
98
+ </div>
99
+ <div className={styles.right} onClick={handleValuePageChange}>
100
+ <SyncOutlined spin={pageLoading} className={styles.icon}/>
101
+ <span>换一批</span>
102
+ </div>
101
103
  </div>
102
- </div>
103
- }
104
+ }
104
105
  <div className={styles.rightPanel}>
105
- <div className={styles.tabHeaderMobile}
106
- style={{ paddingLeft: '14px', paddingRight: '14px' }}
107
- >
108
- <Tabs
109
- activeKey={activeKey}
110
- onChange={handleTabChange}
111
- className={styles.headerTabs}
112
- tabBarGutter={20}
113
- indicator={{size: 15}}
114
- tabBarStyle={{
115
- borderBottom: 'transparent !important',
116
- }}
117
- renderTabBar={(props, DefaultTabBar) => {
118
- return (
119
- <div className={props.activeKey === activeKey ? styles.tabBarActive : styles.tabBar}>
120
- <DefaultTabBar {...props} style={{ marginBottom: '0px' }}/>
121
- </div>
122
- );
123
- }}
106
+ <div className={styles.tabHeaderMobile}
107
+ style={{ paddingLeft: '14px', paddingRight: '14px' }}
124
108
  >
125
- {keys.map((key) => (
109
+ <Tabs
110
+ activeKey={activeKey}
111
+ onChange={handleTabChange}
112
+ className={styles.headerTabs}
113
+ tabBarGutter={20}
114
+ indicator={{ size: 15 }}
115
+ tabBarStyle={{
116
+ borderBottom: 'transparent !important',
117
+ }}
118
+ renderTabBar={(props, DefaultTabBar) => {
119
+ return (
120
+ <div
121
+ className={props.activeKey === activeKey ? styles.tabBarActive : styles.tabBar}>
122
+ <DefaultTabBar {...props} style={{ marginBottom: '0px' }}/>
123
+ </div>
124
+ );
125
+ }}
126
+ >
127
+ {keys.map((key) => (
126
128
  <Tabs.TabPane tab={key} key={key}/>
127
129
  ))}
128
- </Tabs>
129
- </div>
130
- <div className={styles.valueList}>
131
- {visibleValues.map((item, index) => {
132
- return (<div className={styles.row} style={{backgroundColor:'#F3F8FF', marginBottom:'10px'}} key={index} onClick={() => handleRowClick(item.q)}>
133
- <Typography.Paragraph
134
- className={styles.text}
135
- ellipsis={{ rows: 1, }}>
136
- {item.q}
137
- </Typography.Paragraph>
138
- <RightOutlined
139
- className={styles.rightArrow}
140
- style={{ float: 'right' }}
141
- />
142
- </div>)
143
- })}
130
+ </Tabs>
131
+ </div>
132
+ <div className={styles.valueList}>
133
+ {visibleValues.map((item, index) => {
134
+ return (<div className={styles.row}
135
+ style={{ backgroundColor: '#F3F8FF', marginBottom: '10px' }}
136
+ key={index} onClick={() => handleRowClick(item.q)}>
137
+ <Typography.Paragraph
138
+ className={styles.text}
139
+ ellipsis={{ rows: 1, }}>
140
+ {item.q}
141
+ </Typography.Paragraph>
142
+ <RightOutlined
143
+ className={styles.rightArrow}
144
+ style={{ float: 'right' }}
145
+ />
146
+ </div>)
147
+ })}
148
+ </div>
144
149
  </div>
145
150
  </div>
146
- </div>
151
+ }
147
152
  </div>
148
153
  </ConfigProvider>
149
154
  );
@@ -153,67 +158,67 @@ const TabSelector = ({
153
158
  <ConfigProvider theme={{
154
159
  components: {
155
160
  Tabs: {
156
- horizontalItemGutter:48,
161
+ horizontalItemGutter: 48,
157
162
  }
158
163
  }
159
164
  }}>
160
- <div className={styles.mainContainer} style={{ marginLeft: isSimple ? "0" : '24px' }}>
161
- {
162
- welcomeWords && <div className={styles.welcome}>{welcomeWords}</div>
163
- }
164
- <div
165
- className={styles.tabSelector}
166
- style={{
167
- width: isSimple ? "auto" : '550px',
168
- height: isSimple ? '100%' : 'auto',
169
- display: isHideTabSelector ? 'none' : 'flex'
170
- }}
171
- >
165
+ <div className={styles.mainContainer} style={{ marginLeft: isSimple ? "0" : '24px' }}>
172
166
  {
173
- !isSimple && <div className={styles.leftPanel}>
174
- <div className={styles.topIcon} onClick={handleValuePageChange}>
175
- <SyncOutlined spin={pageLoading} className={styles.icon}/>
176
- <span>换一批</span>
177
- </div>
178
- <div className={styles.middleImage}>
179
- <img src={middleImgUrl} alt="Icon"/>
180
- </div>
181
- <div className={styles.bottomImage}>
182
- <img src={customUrl || bottomImgUrl} alt="Bottom Icon"
183
- style={{ position: 'absolute', bottom: '0', left: '0' }}/>
184
- </div>
185
- </div>
167
+ welcomeWords && <div className={styles.welcome}>{welcomeWords}</div>
186
168
  }
187
- <div className={styles.rightPanel}>
188
- <div className={styles.tabHeader}
189
- style={{ paddingLeft: isSimple ? "0" : '20px', paddingRight: isSimple ? "0" : '20px' }}
190
- >
191
- <LeftOutlined className={styles.leftArrow} onClick={handleTabPrev}
192
- style={{
193
- marginBottom: isSimple ? "0" : '14px',
194
- marginRight: isSimple ? "0" : '12px',
195
- cursor: tabLocation === 0 ? 'not-allowed' : 'pointer'
196
- }}
197
- />
198
- {
199
- isSimple ? (
200
- <div className={styles.simpleHeader}>
201
- {keys
202
- .slice(tabLocation, tabLocation + keyShowSize)
203
- .map(key => <div
204
- className={styles.simplyRow}
205
- style={{
206
- background: key === activeKey ? "#1974FF" : "#FFFFFF",
207
- color: key === activeKey ? "#FFFFFF" : "#A4A4A4",
208
- border:key === activeKey ? "unset" : "1px solid #E4E4E4",
209
- transform: 'translate3d(0px, 0px, 0px)'
210
- }}
211
- onClick={()=>handleTabChange(key)}
212
- >{key}</div>)}
213
- </div>
214
- )
215
- :
216
- <Tabs activeKey={activeKey} onChange={handleTabChange} className={styles.headerTabs} horizontalItemGutter={40}>
169
+ <div
170
+ className={styles.tabSelector}
171
+ style={{
172
+ width: isSimple ? "auto" : '550px',
173
+ height: isSimple ? '100%' : 'auto',
174
+ display: isHideTabSelector ? 'none' : 'flex'
175
+ }}
176
+ >
177
+ {
178
+ !isSimple && <div className={styles.leftPanel}>
179
+ <div className={styles.topIcon} onClick={handleValuePageChange}>
180
+ <SyncOutlined spin={pageLoading} className={styles.icon}/>
181
+ <span>换一批</span>
182
+ </div>
183
+ <div className={styles.middleImage}>
184
+ <img src={middleImgUrl} alt="Icon"/>
185
+ </div>
186
+ <div className={styles.bottomImage}>
187
+ <img src={customUrl || bottomImgUrl} alt="Bottom Icon"
188
+ style={{ position: 'absolute', bottom: '0', left: '0' }}/>
189
+ </div>
190
+ </div>
191
+ }
192
+ <div className={styles.rightPanel}>
193
+ <div className={styles.tabHeader}
194
+ style={{ paddingLeft: isSimple ? "0" : '20px', paddingRight: isSimple ? "0" : '20px' }}
195
+ >
196
+ <LeftOutlined className={styles.leftArrow} onClick={handleTabPrev}
197
+ style={{
198
+ marginBottom: isSimple ? "0" : '14px',
199
+ marginRight: isSimple ? "0" : '12px',
200
+ cursor: tabLocation === 0 ? 'not-allowed' : 'pointer'
201
+ }}
202
+ />
203
+ {
204
+ isSimple ? (
205
+ <div className={styles.simpleHeader}>
206
+ {keys
207
+ .slice(tabLocation, tabLocation + keyShowSize)
208
+ .map(key => <div
209
+ className={styles.simplyRow}
210
+ style={{
211
+ background: key === activeKey ? "#1974FF" : "#FFFFFF",
212
+ color: key === activeKey ? "#FFFFFF" : "#A4A4A4",
213
+ border: key === activeKey ? "unset" : "1px solid #E4E4E4",
214
+ transform: 'translate3d(0px, 0px, 0px)'
215
+ }}
216
+ onClick={() => handleTabChange(key)}
217
+ >{key}</div>)}
218
+ </div>
219
+ )
220
+ :
221
+ <Tabs activeKey={activeKey} onChange={handleTabChange} className={styles.headerTabs} horizontalItemGutter={40}>
217
222
  {keys
218
223
  .slice(tabLocation, tabLocation + keyShowSize)
219
224
  .map((key) => (
@@ -508,7 +508,8 @@ export class MobileChatPageV2 extends React.Component {
508
508
  headerName,
509
509
  isShowMobileInputArea,
510
510
  inputContainerStyle = {},
511
- isInH5Page
511
+ isInH5Page,
512
+ isHideTabSelector
512
513
  } = this.props;
513
514
  const { currentFlow = {} } = this.state;
514
515
  return (
@@ -696,7 +697,7 @@ export class MobileChatPageV2 extends React.Component {
696
697
  getHistoryList={this.getHistoryList}
697
698
  setDropDownList={(list) => this.setState({ dropDownList: list })}
698
699
  dropDownList={this.state.dropDownList}
699
- baseConfig={{ isTitleSideIcon, logoWidth, agentUrl, ...assetMap }}
700
+ baseConfig={{ isTitleSideIcon, logoWidth, agentUrl, ...assetMap, isHideTabSelector }}
700
701
  isShowUploadButton={isShowUploadButton}
701
702
  isShowVoiceButton={isShowVoiceButton}
702
703
  dropManUrl={currentFlow.character}