systemrobotassistant 3.0.8

package/src/component/need-answer/style.less

@@ -0,0 +1,21 @@
+.needAnswerContent {
+  font-weight: 400;
+  color: #35383D;
+}
+
+.needLink {
+  color: var(--primary-color,#1890ff) ;
+  font-weight: 400;
+
+  cursor: pointer;
+}
+
+.onSeekHlep {
+  color: var(--primary-color,#1890ff);
+  cursor: pointer;
+}
+
+.onDisabled {
+  color: #A5ACB8;
+  cursor: not-allowed;
+}

package/src/component/opppsition-chat-card/index.jsx

@@ -0,0 +1,25 @@
+import React, { memo } from 'react'
+import classNames from 'classnames'
+import Proptypes from 'prop-types'
+import styles from './style.less'
+
+const OppositionChatCard = memo((props) => {
+  const { children, noBorderRadius, isRecommendQuestions } = props
+  return (
+    <div className={styles.oppositionChatCardwrapper}>
+      <div className={classNames(styles.oppositionContentWrapper,
+        !noBorderRadius && styles.otherRadius, isRecommendQuestions && styles.isRecommendQuestions)}
+      >
+        {children}
+      </div>
+    </div>
+  )
+})
+
+
+OppositionChatCard.propTypes = {
+  children: Proptypes.element,
+  noBorderRadius: Proptypes.bool,
+}
+
+export default OppositionChatCard

package/src/component/opppsition-chat-card/style.less

@@ -0,0 +1,33 @@
+.oppositionChatCardwrapper {
+
+
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+
+}
+
+.oppositionContentWrapper {
+  max-width: 416px;
+
+  margin-top: 12px;
+
+  background-color: #fff;
+
+  padding: 10px 12px;
+  border: 1px solid #E0E4F3;
+
+  display: flex;
+  flex-direction: column;
+}
+
+.otherRadius {
+  border-radius: 0px 8px 8px 8px;
+}
+
+.isRecommendQuestions {
+  padding: 10px 12px 0;
+  box-shadow: 0px 1px 2px 0px rgba(25, 122, 250, 0.15);
+  border-radius: 8px;
+  width: 100%;
+}

package/src/component/question-library/index.jsx

@@ -0,0 +1,316 @@
+import React, { createRef, PureComponent } from 'react'
+import { Button, Spin } from 'shineout'
+import { Scrollbars } from 'react-custom-scrollbars'
+import Icon from '@shein-components/Icon'
+import getNow from '../../js/get-time'
+import { debounce, getRandomID } from '../../js/utils'
+import { toHfc } from '../../js/to-hfc'
+import { contentType, TIPS } from '../../js/const'
+import AnswerItme from '../answer-itme'
+import OppositionChatCard from '../opppsition-chat-card'
+import RecommendQuestionsCard from '../recommend-questions-card'
+import MyselfChatCard from '../myself-chat-card'
+import TipsAnswer from '../tips-answer'
+import NeedAnswer from '../need-answer'
+import * as Server from './server'
+import styles from './style.less'
+
+class QuestionLibrary extends PureComponent {
+  constructor(props) {
+    super(props)
+    this.state = {
+      conversationRecordList: [],
+      value: '',
+      // hotList: [],
+      refreshLoading: false,
+
+      pageNo: 1,
+      pageSize: 20,
+    }
+    this.scrollRef = createRef()
+
+    this.setChatMsg = this.setChatMsg.bind(this)
+    this.getMoreChatRecords = debounce(this.getMoreChatRecords.bind(this), 300)
+  }
+
+  componentDidMount() {
+    this.getChatRecords()
+  }
+
+
+  getChatRecords() {
+    const { t } = this.props
+    const { pageNo, pageSize } = this.state
+    Server.queryConversationRecord({
+      pageNo,
+      pageSize,
+    })
+      .then((res) => {
+        if (res) {
+          // 确认查看接口
+          Server.confirmView()
+          const list = (res.info && res.info.conversationRecordList
+            && res.info.conversationRecordList.map(vo => ({
+              ...vo,
+              key: getRandomID(),
+            }))) || []
+
+          // eslint-disable-next-line no-unused-expressions
+          Object.keys(TIPS) && Object.keys(TIPS).forEach((key) => {
+            if (res.info && res.info[key] > 0) {
+              list.push({
+                key: getRandomID(),
+                contentType: contentType.TIPS,
+                content: t('帮助中心{0}有更新了，', t(TIPS[key].content)),
+                link: TIPS[key].link,
+              })
+            }
+          })
+
+          const problemNeedHelpList = (res.info
+            && res.info.problemHelpList
+            && res.info.problemHelpList.map(vo => ({
+              ...vo,
+              key: getRandomID(),
+              contentType: contentType.NEEDANSWER,
+            }))) || []
+          const newList = [...list, ...problemNeedHelpList]
+          this.setState({
+            conversationRecordList: newList,
+          }, () => {
+            this.scrollToEnd()
+          })
+        }
+      })
+  }
+
+  async getMoreChatRecords() {
+    const { refreshLoading } = this.state
+    if (refreshLoading) return
+    this.setState({
+      refreshLoading: true,
+    })
+    const { pageNo, pageSize } = this.state
+    const newPageNo = pageNo + 1
+    const res = await Server.queryConversationRecord({
+      pageNo: newPageNo,
+      pageSize,
+    })
+
+    const list = (res.info && res.info.conversationRecordList
+      && res.info.conversationRecordList.map(vo => ({
+        ...vo,
+        key: getRandomID(),
+      }))) || []
+
+    const { conversationRecordList } = this.state
+    this.setState({
+      refreshLoading: false,
+    })
+    if (list.length > 0) {
+      // 记录增加数据之前的高度
+      const originScrollHeight = this.scrollRef.current.getScrollHeight()
+      this.setState({
+        conversationRecordList: [...list, ...conversationRecordList],
+        pageNo: newPageNo,
+      }, () => {
+        const scrollTop = this.scrollRef.current.getScrollHeight() - originScrollHeight - 10
+        this.scrollRef.current.scrollTop(scrollTop)
+      })
+    }
+  }
+
+  setChatMsg(val) {
+    const { conversationRecordList } = this.state
+    if (val) {
+      const vo = {
+        contentType: contentType.MYSELF,
+        problem: val,
+        questionTime: getNow(), // 获取此刻的时间
+        key: getRandomID(),
+      }
+      const newArr = [...conversationRecordList, vo]
+      this.setState({
+        conversationRecordList: newArr,
+        value: '',
+      })
+      this.scrollToEnd()
+      this.queryAnswer(val)
+    }
+  }
+
+
+  scrollToEnd() {
+    if (this.scrollRef && this.scrollRef.current && this.scrollRef.current.scrollToBottom) {
+      setTimeout(() => {
+        this.scrollRef.current.scrollToBottom({
+          behavior: 'smooth',
+        })
+      }, 0)
+    }
+  }
+
+  queryAnswer(val) {
+    Server.queryAnswer({
+      problem: val,
+    }).then((res) => {
+      const { conversationRecordList } = this.state
+
+      if (res) {
+        const newVo = {
+          ...(res.info || {}),
+          key: getRandomID(),
+        }
+        this.setState({
+          conversationRecordList: [...conversationRecordList, newVo],
+        })
+        this.scrollToEnd()
+      }
+    })
+  }
+
+
+  handlenScroll() {
+    // 到达顶部的时候
+    if (this.scrollRef && this.scrollRef.current && this.scrollRef.current.getScrollTop() === 0) {
+      this.getMoreChatRecords()
+    }
+  }
+
+  render() {
+    const { zIndex, t } = this.props
+    const {
+      value, conversationRecordList, refreshLoading,
+    } = this.state
+    return (
+      <>
+        <div className={styles.tipsWrapper}>
+          <RecommendQuestionsCard
+            {...this.props}
+          />
+        </div>
+
+        <div className={styles.scrollCon}>
+          <Scrollbars
+            style={{
+              paddingRight: '20px',
+              flex: 1,
+              backgroundColor: '#F7F9FC',
+            }}
+            ref={this.scrollRef}
+            onScroll={(e) => {
+              this.handlenScroll(e)
+            }}
+          >
+            {
+              refreshLoading
+                ? (
+                  <Spin
+                    size={18}
+                    tips={t('加载中')}
+                  />
+                )
+                : null
+            }
+
+            <div className={styles.scrollWrapper}>
+
+              {
+                conversationRecordList.map((item) => {
+                  // 自己提问的问题
+                  if (item.contentType === contentType.MYSELF) {
+                    return (
+                      <MyselfChatCard
+                        key={item.key}
+                        item={item}
+                      />
+                    )
+                  }
+                  // 回答类型
+                  if (item.contentType === contentType.OPPOSITION) {
+                    return (
+                      <OppositionChatCard
+                        key={item.key}
+                      >
+                        <AnswerItme
+                          item={item}
+                          zIndex={zIndex}
+                          t={t}
+                        />
+                      </OppositionChatCard>
+                    )
+                  }
+                  // 帮助中心类型
+                  if (item.contentType === contentType.TIPS) {
+                    return (
+                      <TipsAnswer
+                        item={item}
+                        key={item.key}
+                        t={t}
+                      />
+                    )
+                  }
+                  // 需要回答的类型
+                  return (
+                    <NeedAnswer
+                      item={item}
+                      key={item.key}
+                      t={t}
+                    />
+                  )
+                })
+              }
+            </div>
+          </Scrollbars>
+        </div>
+
+        <div className={styles.bottomLink}>
+          <div
+            className={styles.toLink}
+            onClick={() => {
+              toHfc('')
+            }}
+          >
+            <span>{t('进入帮助中心')}</span>
+            <Icon name="arrow-right" />
+          </div>
+        </div>
+        <div
+          className={styles.bottomWrapper}
+        >
+          <div className={styles.textAreaWrapper}>
+            <textarea
+              placeholder={t('请输入问题关键词，如：如何发货')}
+              className={styles.textArea}
+              value={value}
+              onChange={(e) => {
+                this.setState({
+                  value: e.target.value,
+                })
+              }}
+              onKeyDown={(event) => {
+                if (event.keyCode === 13) {
+                  this.setChatMsg(value)
+                  event.preventDefault()
+                }
+              }}
+            />
+            <Button
+              type="primary"
+              disabled={!value}
+              className={styles.btn}
+              onClick={() => {
+                this.setChatMsg(value)
+              }}
+            >
+              {t('发送')}
+            </Button>
+          </div>
+        </div>
+      </>
+    )
+  }
+}
+
+
+export default QuestionLibrary

package/src/component/question-library/server.js

@@ -0,0 +1,19 @@
+import postRequest from '../../js/request/request'
+
+// 查询聊天记录
+// https://soapi.sheincorp.cn/application/3768/routes/102471
+export function queryConversationRecord(argument) {
+  return postRequest('/front/mesAssistant/queryConversationRecord', argument)
+}
+
+// 确认查看
+// https://soapi.sheincorp.cn/application/3876/routes/post_mesAssistant_confirmView
+export function confirmView(argument) {
+  return postRequest('/front/mesAssistant/confirmView', argument)
+}
+
+// 查询回答
+// https://soapi.sheincorp.cn/application/3876/routes/post_mesAssistant_queryAnswer
+export function queryAnswer(argument) {
+  return postRequest('/front/mesAssistant/queryAnswer', argument)
+}

package/src/component/question-library/style.less

@@ -0,0 +1,102 @@
+.tipsWrapper {
+  padding: 20px;
+  background-color: #F7F9FC;
+}
+
+.scrollWrapper {
+  padding: 20px;
+}
+
+.scrollCon {
+  display: flex;
+  flex: 1;
+
+  & > div:nth-child(1) > div:nth-child(1) {
+    margin-right: 0 !important;
+    margin-bottom: 0 !important;
+  }
+
+  * {
+    &::-webkit-scrollbar{
+      width: 0;
+      height: 0;
+    }
+  }
+}
+
+.bottomLink {
+  display: flex;
+  justify-content: flex-end;
+  font-size: 14px;
+  color: #7E848F;
+  background-color: #F7F9FC;
+  padding-bottom: 12px;
+  padding-right: 12px;
+
+  .toLink {
+    font-weight: 400;
+    cursor: pointer;
+
+    &>span {
+      margin-right: 4px;
+    }
+
+    :global {
+      .so-icon {
+        font-size: 12px;
+      }
+    }
+  }
+}
+
+.textAreaWrapper {
+  display: flex;
+  width: 100%;
+  // padding: 12px;
+  display: flex;
+  // background-color: #F4F5F8;
+  align-items: flex-end;
+}
+
+.bottomWrapper {
+  background: #ffffff;
+  box-shadow: inset 0px 1px 0px 0px #e6eaf0;
+  padding: 20px;
+
+  .textArea {
+    border-width: 0;
+    height: 56px;
+    // background-color: #F4F5F8;
+    width: 100%;
+    resize: none !important;
+    ;
+    outline: none;
+  }
+
+  .findByWechat {
+    margin-top: 9px;
+    cursor: pointer;
+
+    span {
+      color: var(--primary-color, #1890ff);
+    }
+  }
+
+  :global {
+    .so-input {
+      border: 0px solid #fff;
+
+      &:hover {
+        border: 0px solid #fff;
+      }
+    }
+
+    textarea {
+      padding: 0;
+    }
+  }
+
+  .btn {
+    height: 32px;
+  }
+}

package/src/component/question-tag/index.jsx

@@ -0,0 +1,27 @@
+import React, { memo } from 'react'
+import Proptypes from 'prop-types'
+import Ellipsis from '@shein-components/Ellipsis'
+
+import styles from './style.less'
+
+const QuestionTag = memo((props) => {
+  const { title, onSendMsg } = props
+  return (
+    <div
+      className={styles.tagWraper}
+      onClick={onSendMsg}
+    >
+      <Ellipsis
+        rows={1}
+        value={title}
+      />
+    </div>
+  )
+})
+
+
+QuestionTag.propTypes = {
+  title: Proptypes.string,
+  onSendMsg: Proptypes.func,
+}
+export default QuestionTag

package/src/component/question-tag/style.less

@@ -0,0 +1,15 @@
+.tagWraper {
+  height: 32px;
+  background: #E6EAF0;
+  border-radius: 16px;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+
+  max-width:160px ;
+  padding: 0 12px;
+
+  margin-right: 8px;
+
+  cursor: pointer;
+}

package/src/component/recommend-questions-card/index.jsx

@@ -0,0 +1,111 @@
+import React, {
+  memo, useEffect, useCallback, useMemo,
+} from 'react'
+import Icon from '@shein-components/Icon'
+import { Spin } from 'shineout'
+import Proptypes from 'prop-types'
+import OppositionChatCard from '../opppsition-chat-card'
+import styles from './style.less'
+import useStateByImmer from '../../js/state-immer'
+import { queryProblem } from '../../server'
+import { toHfc } from '../../js/to-hfc'
+
+const defaultState = {
+  loading: false,
+  list: [],
+  pageNo: 1,
+  pageSize: 3,
+  totalCount: 0,
+}
+
+const RecommendQuestionsCard = memo((props) => {
+  const { menusTitle, t } = props
+  const [state, setState] = useStateByImmer(defaultState)
+  const getList = useCallback(() => {
+    setState({
+      loading: true,
+      list: [],
+    })
+    if (!menusTitle) return
+    queryProblem({
+      problem: menusTitle,
+    }).then((res) => {
+      setState({
+        loading: false,
+      })
+      if (res) {
+        setState({
+          list: res.info || [],
+          totalCount: (res.info && res.info.length) || 0,
+        })
+      }
+    })
+  }, [menusTitle])
+  useEffect(() => {
+    getList()
+  }, [getList])
+
+  const arr = useMemo(() => {
+    const news = state.list?.slice((state.pageNo - 1) * 3,
+      (state.pageNo * 3) < state.list?.length ? state.pageNo * 3 : state.list?.length)
+    return news
+  }, [state])
+  if (!arr || arr.length === 0) return null
+  return (
+    <OppositionChatCard
+      data-if={arr?.length}
+      noBorderRadius
+      isRecommendQuestions
+    >
+      <div
+        className={styles.top}
+      >
+        <span>{t('猜你想看')}</span>
+        <span
+          onClick={() => {
+            const maxPageNo = Math.ceil(((state.list?.length) || 0) / 3)
+            setState({
+              pageNo: (state.pageNo === maxPageNo) ? 1 : state.pageNo + 1,
+            })
+          }}
+        >
+          <Icon name="refresh1" className={styles.changeIcon} />
+          {t('换一批')}
+        </span>
+      </div>
+
+      <div
+        className={styles.recommendContent}
+      >
+        {
+          state.loading
+            ? <Spin />
+            : null
+        }
+
+        {
+          arr && arr.map((vo, idx) => (
+            <div
+              key={vo.problemId}
+              onClick={() => {
+                toHfc(`/question/answer/${vo.problemId}`)
+              }}
+              className={styles.problemLine}
+            >
+              <span className={styles.problemNum}>{`${idx + 1}.`}</span>
+              <span className={styles.problemTitle}>{vo.problemTitle}</span>
+              <Icon name="arrow-right" />
+            </div>
+          ))
+        }
+      </div>
+    </OppositionChatCard>
+  )
+})
+
+RecommendQuestionsCard.propTypes = {
+  menusTitle: Proptypes.string,
+}
+
+
+export default RecommendQuestionsCard