From e8c639fd53f9a19999fa9356a5cf54c4acc7fdc8 Mon Sep 17 00:00:00 2001
From: unknown <linjie37@chinaunicom.cn>
Date: Thu, 19 May 2022 10:37:01 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=BF=E6=8D=A2=E5=B0=8F=E4=BC=98=E5=AE=A2?=
 =?UTF-8?q?=E6=9C=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/MainPage/ProjectManager/Jury.js     | 84 +++++++++++++++---
 .../ProjectManager/disposalManager.js         | 87 ++++++++++++++++---
 src/pages/MainPage/ProjectManager/index.less  | 14 +++
 src/pages/MainPage/ProjectManager/manager.js  | 41 ++++-----
 .../MainPage/ProjectManager/managerAdmin.js   | 84 +++++++++++++++---
 .../ProjectManager/managerSubAdmin.js         | 85 +++++++++++++++---
 .../MainPage/ProjectManager/participants.js   | 86 +++++++++++++++---
 .../ProjectManager/purchaseManager.js         | 85 +++++++++++++++---
 src/pages/MainPage/ProjectManager/supplier.js | 84 +++++++++++++++---
 .../components/MsgBubble/MsgBubble.jsx        |  6 +-
 .../components/MsgBubble/style.module.css     |  3 +-
 11 files changed, 549 insertions(+), 110 deletions(-)

diff --git a/src/pages/MainPage/ProjectManager/Jury.js b/src/pages/MainPage/ProjectManager/Jury.js
index dc40991..70804b7 100644
--- a/src/pages/MainPage/ProjectManager/Jury.js
+++ b/src/pages/MainPage/ProjectManager/Jury.js
@@ -10,6 +10,7 @@ import moment from 'moment';
 import { jurySaveInfo, getSessionUserData } from '@/utils/session';
 import NoticeDetail from '@/pages/notice/noticeList/components/NoticeDetail'
 import ExpertEnter from '@/pages/BidEvaluation/components/ExpertEnter';
+import ChatUI  from '@/pages/customerservice/support/conversation' //智慧客服
 
 @connect(({ dashboard, loading }) => ({
     ...dashboard,
@@ -24,6 +25,16 @@ class Jury extends PureComponent {
         noticeDetail: false, // 公告弹窗
         recordData: '', // 进入评审室弹窗数据
         enterVisible: false,  // 进入评审室弹窗
+        isModalVisible: false, //智慧客服
+        isFlash: false, //智慧客服
+        isCloseWs: true, //智慧客服
+        optionsModal: false,  //智慧客服
+        projectModal: false,  //智慧客服
+        supplierNumber: '', //智慧客服
+        staffId: '', //智慧客服'
+        staffName:'', //智慧客服
+        kfType:0,//智慧客服
+        questionType:0,//智慧客服
     }
     componentDidMount() {
         this.props.dispatch({
@@ -47,6 +58,12 @@ class Jury extends PureComponent {
             userlevel: "1",                       //网站自定义会员级别，1-N，可根据选择判断，取值显示到小能客户端
             erpparam: "abc"                          //erpparam为erp功能的扩展字段，可选，购买erp功能后用于erp功能集成
         }
+        //智慧客服，获取供应商编码
+        let userData = getSessionUserData()
+        this.setState({staffId: userData.userId})
+        this.setState({staffName: userData.fullName})
+        this.setState({supplierNumber: userData.organizationId}) 
+        //<<<<<<智慧客服end
     }
     onChange = (date, dateString) => {
         this.setState({
@@ -95,22 +112,22 @@ class Jury extends PureComponent {
             enterVisible: false
         })
     }
-    talkXy = () => {
-        if(NTKF){
-            NTKF.im_openInPageChat('bl_1000_1492484340268');
-        } else {
-            message.warn('小优客服初始化失败，请联系系统管理员！')
-        }
+    initChatUI = () => {
+        //智慧客服
+        if(this.state.isCloseWs){
+            this.setState({optionsModal: true})
+        }else{
+              this.setState({isModalVisible: true})
+              this.setState({isCloseWs: false})
+              this.setState({isFlash :false})
+        } 
     }
     render() {
-        const { datevalue, detailId, noticeDetail, recordData, enterVisible } = this.state;
+        const { datevalue, detailId, noticeDetail, recordData, enterVisible, isModalVisible, isCloseWs, optionsModal, projectModal, supplierNumber, staffId, staffName, kfType, questionType, isFlash} = this.state; //智慧客服state
         const { Juryuplist, Jurydownlist, staloading, tlist } = this.props;
         return (
             <>
-                {
-                    START_ENV == 'UAT' || START_ENV == 'DEV' || START_ENV == 'sim' ? '' : 
-                    <a className="talk" onClick={() => this.talkXy()}>咨询服务︵<span>8:30</span><span>|</span><span>12:30</span><span>13:00</span><span>|</span><span>17:00</span>︶<img src={talkPng} /></a>
-                }
+                <a className={isFlash && !isModalVisible ? "talk text-effect":"talk"} onClick={() => this.initChatUI()}>咨询服务︵<span>8:30</span><span>|</span><span>12:30</span><span>13:00</span><span>|</span><span>17:00</span>︶<img src={talkPng} /></a>
                 <div className="dashboard" style={{ height: innerHeight - 70, overflow: "hidden" }}>
                     <Row className="topt">
                         <Col span={12}><Card title="我参与的项目数量统计" bordered={false} className="cardtreJury" style={{ marginRight: "10px" }} loading={staloading} extra={<div style={{ marginTop: "-14px" }}><DatePicker showNow={false} picker="month" style={{ marginRight: "10px" }} value={datevalue} onChange={this.onChange} allowClear={false} /><Button type="primary" onClick={() => { this.onSearch() }}>确定</Button></div>}>
@@ -183,6 +200,51 @@ class Jury extends PureComponent {
                 {noticeDetail && <NoticeDetail detailId={detailId} onCancel={() => { this.noticeModel() }} modalVisible={noticeDetail} />}
                 {recordData == '' ? null :
                 <ExpertEnter modalVisible={enterVisible} onCancel={() => { this.enterModel() }} onRefresh={() => { this.onRefresh() }} recordData={recordData} />}
+                {/*智慧客服*/}
+                <ChatUI 
+                    openProjectWin={()=>{
+                        this.setState({kfType: 2})
+                        this.setState({projectModal: true})
+                    }}
+                    openWin={(kfType, questionType)=>{
+                        this.setState({questionType: questionType})
+                        this.setState({kfType: kfType})
+                        this.setState({optionsModal: false})
+                        this.setState({isModalVisible: true})
+                        this.setState({isCloseWs: false})
+                        this.setState({isFlash :false})
+                    }}
+                    closeWin={()=>{
+                        this.setState({kfType: 0})
+                        this.setState({questionType: 0})
+                        this.setState({optionsModal: false})
+                        this.setState({isModalVisible: false})
+                        this.setState({isCloseWs: true})
+                        this.setState({projectModal: false})
+                    }} 
+                    optionsModal={optionsModal}
+                    projectModal={projectModal}
+                    isModalVisible={isModalVisible}
+                    kfType={kfType}
+                    questionType={questionType}
+                    staffId={staffId}
+                    staffName={staffName}
+                    supplierNumber={supplierNumber}
+                    isCloseWs={isCloseWs}
+                    hideWin={()=>{
+                        this.setState({optionsModal: false})
+                        this.setState({isModalVisible: false})
+                    }}
+                    closeOptionsModal={()=>{
+                        this.setState({optionsModal: false})
+                    }}
+                    closeProjectModal={()=>{
+                        this.setState({projectModal: false})
+                    }}
+                    msgAlert={()=>{
+                    if(!isModalVisible) this.setState({isFlash: true})
+                    }}
+                />
             </>
         )
     }
diff --git a/src/pages/MainPage/ProjectManager/disposalManager.js b/src/pages/MainPage/ProjectManager/disposalManager.js
index 07c0d28..f604d59 100644
--- a/src/pages/MainPage/ProjectManager/disposalManager.js
+++ b/src/pages/MainPage/ProjectManager/disposalManager.js
@@ -14,7 +14,7 @@ import MessageDetail from '@/pages/SystemMessage/message/components/messageDetai
 import NoticeDetail from '@/pages/notice/noticeList/components/NoticeDetail'
 import QuestDetail from '@/pages/SystemMessage/message/components/questDetail'
 import { getQuestList } from '@/pages/SystemMessage/message/service'
-
+import ChatUI  from '@/pages/customerservice/support/conversation' //智慧客服
 @connect(({ dashboard, loading }) => ({
     ...dashboard,
     fetchtPageList: loading.effects['dashboard/fetchtPageList'],
@@ -29,7 +29,17 @@ class manager extends PureComponent {
         detailId: '1', // 公告id
         noticeDetail: false, // 公告弹窗
         questData: {},//问卷数据
-        questVisible: false //问卷弹窗
+        questVisible: false, //问卷弹窗
+        isModalVisible: false, //智慧客服
+        isFlash: false, //智慧客服
+        isCloseWs: true, //智慧客服
+        optionsModal: false,  //智慧客服
+        projectModal: false,  //智慧客服
+        supplierNumber: '', //智慧客服
+        staffId: '', //智慧客服'
+        staffName:'', //智慧客服
+        kfType:0,//智慧客服
+        questionType:0,//智慧客服
     }
     componentDidMount() {
         this.props.dispatch({
@@ -57,6 +67,12 @@ class manager extends PureComponent {
             userlevel: "1",                       //网站自定义会员级别，1-N，可根据选择判断，取值显示到小能客户端
             erpparam: "abc"                          //erpparam为erp功能的扩展字段，可选，购买erp功能后用于erp功能集成
         }
+        //<<<<<<智慧客服，获取供应商编码
+        let userData = getSessionUserData()
+        this.setState({staffId: userData.userId})
+        this.setState({staffName: userData.fullName})
+        this.setState({supplierNumber: userData.organizationId}) 
+        //<<<<<<智慧客服end
     }
     onChange = (date, dateString) => {
         this.setState({
@@ -113,12 +129,15 @@ class manager extends PureComponent {
             questVisible: false
         })
     }
-    talkXy = () => {
-        if (NTKF) {
-            NTKF.im_openInPageChat('bl_1000_1492484340268');
-        } else {
-            message.warn('小优客服初始化失败，请联系系统管理员！')
-        }
+    initChatUI = () => {
+        //智慧客服
+        if(this.state.isCloseWs){
+          this.setState({optionsModal: true})
+        }else{
+            this.setState({isModalVisible: true})
+            this.setState({isCloseWs: false})
+            this.setState({isFlash :false})
+        } 
     }
     followUpProject = async (data) => { // 项目跟进
         auctionFollowUpAProjectManager(data)
@@ -128,13 +147,10 @@ class manager extends PureComponent {
     };
     render() {
         const { projectlist, staloading, tlist, trelist, pagelist, disposalList } = this.props;
-        const { datevalue, messId, messageDetail, detailId, noticeDetail, questData, questVisible } = this.state;
+        const { datevalue, messId, messageDetail, detailId, noticeDetail, questData, questVisible,  isModalVisible, isCloseWs, optionsModal, projectModal, supplierNumber, staffId, staffName, kfType, questionType, isFlash} = this.state; //智慧客服state
         return (
             <>
-                {
-                    START_ENV == 'UAT' || START_ENV == 'DEV' || START_ENV == 'sim' ? '' :
-                    <a className="talk" onClick={() => this.talkXy()}>咨询服务︵<span>8:30</span><span>|</span><span>12:30</span><span>13:00</span><span>|</span><span>17:00</span>︶<img src={talkPng} /></a>
-                }
+                <a className={isFlash && !isModalVisible ? "talk text-effect":"talk"} onClick={() => this.initChatUI()}>咨询服务︵<span>8:30</span><span>|</span><span>12:30</span><span>13:00</span><span>|</span><span>17:00</span>︶<img src={talkPng} /></a>
                 <div className="dashboard" style={{ height: innerHeight - 70, overflow: "hidden" }}>
                     <Row className="topt">
                         <Col span={8}><Card title="我的消息" bordered={false} className="cardtre" style={{ marginRight: "10px" }} extra={<div className="moret" onClick={() => history.push('/SystemMessage/message')}>更多<RightOutlined /></div>}>
@@ -204,6 +220,51 @@ class manager extends PureComponent {
                 {messageDetail ? <MessageDetail messId={messId} onCancel={() => { this.closeModel(), this.props.dispatch({type: "dashboard/fetchtlistre", payload: { pageNo: 1, pageSize: 7 }}) }} modalVisible={messageDetail} /> : null }
                 {questVisible ? <QuestDetail questData={questData} onCancel={() => { this.closeParticipate(), this.props.dispatch({type: "dashboard/fetchtlistre", payload: { pageNo: 1, pageSize: 7 }}) }} modalVisible={questVisible} /> : null}
                 {noticeDetail && <NoticeDetail detailId={detailId} onCancel={() => { this.noticeModel() }} modalVisible={noticeDetail} />}
+                {/*智慧客服*/}
+                <ChatUI 
+                    openProjectWin={()=>{
+                        this.setState({kfType: 2})
+                        this.setState({projectModal: true})
+                    }}
+                    openWin={(kfType, questionType)=>{
+                        this.setState({questionType: questionType})
+                        this.setState({kfType: kfType})
+                        this.setState({optionsModal: false})
+                        this.setState({isModalVisible: true})
+                        this.setState({isCloseWs: false})
+                        this.setState({isFlash :false})
+                    }}
+                    closeWin={()=>{
+                        this.setState({kfType: 0})
+                        this.setState({questionType: 0})
+                        this.setState({optionsModal: false})
+                        this.setState({isModalVisible: false})
+                        this.setState({isCloseWs: true})
+                        this.setState({projectModal: false})
+                    }} 
+                    optionsModal={optionsModal}
+                    projectModal={projectModal}
+                    isModalVisible={isModalVisible}
+                    kfType={kfType}
+                    questionType={questionType}
+                    staffId={staffId}
+                    staffName={staffName}
+                    supplierNumber={supplierNumber}
+                    isCloseWs={isCloseWs}
+                    hideWin={()=>{
+                        this.setState({optionsModal: false})
+                        this.setState({isModalVisible: false})
+                    }}
+                    closeOptionsModal={()=>{
+                        this.setState({optionsModal: false})
+                    }}
+                    closeProjectModal={()=>{
+                        this.setState({projectModal: false})
+                    }}
+                    msgAlert={()=>{
+                    if(!isModalVisible) this.setState({isFlash: true})
+                    }}
+                />
             </>
         )
     }
diff --git a/src/pages/MainPage/ProjectManager/index.less b/src/pages/MainPage/ProjectManager/index.less
index fc08728..8960c74 100644
--- a/src/pages/MainPage/ProjectManager/index.less
+++ b/src/pages/MainPage/ProjectManager/index.less
@@ -285,4 +285,18 @@
 }
 .talk:hover{
   color: #fff;
+}
+//智慧客服
+.text-effect {
+  animation:animate linear 1000ms infinite;
+  animation-delay:0s;
+  @keyframes animate {
+      0% {
+          opacity:0.3;
+      }
+      100% {
+          opacity:1;
+          text-shadow:0 0 80px Red,0 0 30px orange,0 0 6px DarkRed;
+      }
+  }
 }
\ No newline at end of file
diff --git a/src/pages/MainPage/ProjectManager/manager.js b/src/pages/MainPage/ProjectManager/manager.js
index c7063df..acefa06 100644
--- a/src/pages/MainPage/ProjectManager/manager.js
+++ b/src/pages/MainPage/ProjectManager/manager.js
@@ -87,6 +87,7 @@ class manager extends PureComponent {
         this.setState({staffId: userData.userId})
         this.setState({staffName: userData.fullName})
         this.setState({supplierNumber: userData.organizationId}) 
+        //<<<<<<智慧客服end
         this.approvalDetail()
     }
     onChange = (date, dateString) => {
@@ -150,12 +151,15 @@ class manager extends PureComponent {
             questVisible: false
         })
     }
-    talkXy = () => {
-        if (NTKF) {
-            NTKF.im_openInPageChat('bl_1000_1492484340268');
-        } else {
-            message.warn('小优客服初始化失败，请联系系统管理员！')
-        }
+    initChatUI = () => {
+        //智慧客服
+        if(this.state.isCloseWs){
+            this.setState({optionsModal: true})
+        }else{
+              this.setState({isModalVisible: true})
+              this.setState({isCloseWs: false})
+              this.setState({isFlash :false})
+        } 
     }
     followUpProject = async (data) => {
         // let defId = ''; //项目流程id
@@ -174,25 +178,14 @@ class manager extends PureComponent {
     };
     render() {
         const { downlist, projectlist, staloading, tlist, trelist, idList, dateNum } = this.props;
-        const { datevalue, messId, messageDetail, detailId, noticeDetail, questData, questVisible, mainDetail,  isModalVisible, isCloseWs, optionsModal, projectModal, supplierNumber, staffId, staffName, kfType, questionType,} = this.state;
+        const { datevalue, messId, messageDetail, detailId, noticeDetail, questData, questVisible, mainDetail,  isModalVisible, isCloseWs, optionsModal, projectModal, supplierNumber, staffId, staffName, kfType, questionType, isFlash} = this.state; //智慧客服state
         return (
             <>
-                {
-                    START_ENV == 'UAT' || START_ENV == 'DEV' || START_ENV == 'sim' ? '' :
-                        <a className="talk" onClick={() => this.talkXy()}>咨询服务︵<span>8:30</span><span>|</span><span>12:30</span><span>13:00</span><span>|</span><span>17:00</span>︶<img src={talkPng} /></a>
-                }
+                <a className={isFlash && !isModalVisible ? "talk text-effect":"talk"} onClick={() => this.initChatUI()}>咨询服务︵<span>8:30</span><span>|</span><span>12:30</span><span>13:00</span><span>|</span><span>17:00</span>︶<img src={talkPng} /></a>
                 <div className="dashboard" style={{ height: innerHeight - 70, overflow: "hidden" }}>
                     <Row className="topt">
                         <Col span={8}><Card title="我的消息" bordered={false} className="cardtre" style={{ marginRight: "10px" }} extra={<div className="moret" onClick={() => {
-                            //history.push('/SystemMessage/message')
-                            //智慧客服
-                            if(isCloseWs){
-                                this.setState({optionsModal: true})
-                             }else{
-                                this.setState({isModalVisible: true})
-                                this.setState({isCloseWs: false})
-                                this.setState({isFlash :false})
-                             } 
+                            history.push('/SystemMessage/message')
                     }}>更多<RightOutlined /></div>}>
                             {trelist != [] && trelist.map((item, index) => {
                                 return (
@@ -316,8 +309,8 @@ class manager extends PureComponent {
                 {
                     idList.length > 0 ? <ApprovalDetail approvalId={idList[0]} dateNum={dateNum} trelist={idList} onCancel={() => { this.closeModel(), this.props.dispatch({ type: "dashboard/fetchtClarify", payload: { authorizestate: '0', templatetype: '4', size: 6 } }) }} modalVisible={mainDetail} /> : null
                 }
-                 {/*智慧客服*/}
-                 <ChatUI 
+                {/*智慧客服*/}
+                <ChatUI 
                     openProjectWin={()=>{
                         this.setState({kfType: 2})
                         this.setState({projectModal: true})
@@ -348,8 +341,8 @@ class manager extends PureComponent {
                     supplierNumber={supplierNumber}
                     isCloseWs={isCloseWs}
                     hideWin={()=>{
-                       this.setState({optionsModal: false})
-                       this.setState({isModalVisible: false})
+                        this.setState({optionsModal: false})
+                        this.setState({isModalVisible: false})
                     }}
                     closeOptionsModal={()=>{
                         this.setState({optionsModal: false})
diff --git a/src/pages/MainPage/ProjectManager/managerAdmin.js b/src/pages/MainPage/ProjectManager/managerAdmin.js
index 3ae186a..c1274b4 100644
--- a/src/pages/MainPage/ProjectManager/managerAdmin.js
+++ b/src/pages/MainPage/ProjectManager/managerAdmin.js
@@ -10,6 +10,7 @@ import moment from 'moment';
 import { getSessionUserData } from '@/utils/session';
 import { getURLInformation } from '@/utils/CommonUtils';
 import NoticeDetail from '@/pages/notice/noticeList/components/NoticeDetail'
+import ChatUI  from '@/pages/customerservice/support/conversation' //智慧客服
 
 @connect(({ dashboard, loading }) => ({
     ...dashboard,
@@ -18,6 +19,16 @@ class manager extends PureComponent {
     state = {
         detailId: '1', // 公告id
         noticeDetail: false, // 公告弹窗
+        isModalVisible: false, //智慧客服
+        isFlash: false, //智慧客服
+        isCloseWs: true, //智慧客服
+        optionsModal: false,  //智慧客服
+        projectModal: false,  //智慧客服
+        supplierNumber: '', //智慧客服
+        staffId: '', //智慧客服'
+        staffName:'', //智慧客服
+        kfType:0,//智慧客服
+        questionType:0,//智慧客服
     }
     componentDidMount() {
         this.props.dispatch({
@@ -33,6 +44,12 @@ class manager extends PureComponent {
             userlevel: "1",                       //网站自定义会员级别，1-N，可根据选择判断，取值显示到小能客户端
             erpparam: "abc"                          //erpparam为erp功能的扩展字段，可选，购买erp功能后用于erp功能集成
         }
+        //智慧客服，获取供应商编码
+        let userData = getSessionUserData()
+        this.setState({staffId: userData.userId})
+        this.setState({staffName: userData.fullName})
+        this.setState({supplierNumber: userData.organizationId}) 
+        //<<<<<<智慧客服end
     }
     lookInfo = (id) => { // 公告查看
         this.setState({
@@ -45,22 +62,22 @@ class manager extends PureComponent {
             noticeDetail: false
         })
     }
-    talkXy = () => {
-        if(NTKF){
-            NTKF.im_openInPageChat('bl_1000_1492484340268');
-        } else {
-            message.warn('小优客服初始化失败，请联系系统管理员！')
-        }
+    initChatUI = () => {
+        //智慧客服
+        if(this.state.isCloseWs){
+            this.setState({optionsModal: true})
+        }else{
+              this.setState({isModalVisible: true})
+              this.setState({isCloseWs: false})
+              this.setState({isFlash :false})
+        } 
     }
     render() {
         const { tlist, trelist } = this.props;
-        const { detailId, noticeDetail } = this.state;
+        const { detailId, noticeDetail, isModalVisible, isCloseWs, optionsModal, projectModal, supplierNumber, staffId, staffName, kfType, questionType, isFlash } = this.state; //智慧客服state
         return (
             <>
-                {
-                    START_ENV == 'UAT' || START_ENV == 'DEV' || START_ENV == 'sim' ? '' : 
-                    <a className="talk" onClick={() => this.talkXy()}>咨询服务︵<span>8:30</span><span>|</span><span>12:30</span><span>13:00</span><span>|</span><span>17:00</span>︶<img src={talkPng} /></a>
-                }
+                <a className={isFlash && !isModalVisible ? "talk text-effect":"talk"} onClick={() => this.initChatUI()}>咨询服务︵<span>8:30</span><span>|</span><span>12:30</span><span>13:00</span><span>|</span><span>17:00</span>︶<img src={talkPng} /></a>
                 <div className="dashboard" style={{ height: innerHeight - 70, overflow: "hidden" }}>
                     <Row className="topt">
                         <Col span={24}><Card title="系统公告" bordered={false} className="cardtre" extra={<div className="moret" onClick={() => history.push('/notice/noticeList')}>更多<RightOutlined /></div>}>
@@ -77,6 +94,51 @@ class manager extends PureComponent {
                     </Row>
                 </div>
                 {noticeDetail && <NoticeDetail detailId={detailId} onCancel={() => { this.noticeModel() }} modalVisible={noticeDetail} />}
+                {/*智慧客服*/}
+                <ChatUI 
+                    openProjectWin={()=>{
+                        this.setState({kfType: 2})
+                        this.setState({projectModal: true})
+                    }}
+                    openWin={(kfType, questionType)=>{
+                        this.setState({questionType: questionType})
+                        this.setState({kfType: kfType})
+                        this.setState({optionsModal: false})
+                        this.setState({isModalVisible: true})
+                        this.setState({isCloseWs: false})
+                        this.setState({isFlash :false})
+                    }}
+                    closeWin={()=>{
+                        this.setState({kfType: 0})
+                        this.setState({questionType: 0})
+                        this.setState({optionsModal: false})
+                        this.setState({isModalVisible: false})
+                        this.setState({isCloseWs: true})
+                        this.setState({projectModal: false})
+                    }} 
+                    optionsModal={optionsModal}
+                    projectModal={projectModal}
+                    isModalVisible={isModalVisible}
+                    kfType={kfType}
+                    questionType={questionType}
+                    staffId={staffId}
+                    staffName={staffName}
+                    supplierNumber={supplierNumber}
+                    isCloseWs={isCloseWs}
+                    hideWin={()=>{
+                        this.setState({optionsModal: false})
+                        this.setState({isModalVisible: false})
+                    }}
+                    closeOptionsModal={()=>{
+                        this.setState({optionsModal: false})
+                    }}
+                    closeProjectModal={()=>{
+                        this.setState({projectModal: false})
+                    }}
+                    msgAlert={()=>{
+                    if(!isModalVisible) this.setState({isFlash: true})
+                    }}
+                />
             </>
         )
     }
diff --git a/src/pages/MainPage/ProjectManager/managerSubAdmin.js b/src/pages/MainPage/ProjectManager/managerSubAdmin.js
index 3ae186a..8728fd1 100644
--- a/src/pages/MainPage/ProjectManager/managerSubAdmin.js
+++ b/src/pages/MainPage/ProjectManager/managerSubAdmin.js
@@ -10,7 +10,7 @@ import moment from 'moment';
 import { getSessionUserData } from '@/utils/session';
 import { getURLInformation } from '@/utils/CommonUtils';
 import NoticeDetail from '@/pages/notice/noticeList/components/NoticeDetail'
-
+import ChatUI  from '@/pages/customerservice/support/conversation' //智慧客服
 @connect(({ dashboard, loading }) => ({
     ...dashboard,
 }))
@@ -18,6 +18,16 @@ class manager extends PureComponent {
     state = {
         detailId: '1', // 公告id
         noticeDetail: false, // 公告弹窗
+        isModalVisible: false, //智慧客服
+        isFlash: false, //智慧客服
+        isCloseWs: true, //智慧客服
+        optionsModal: false,  //智慧客服
+        projectModal: false,  //智慧客服
+        supplierNumber: '', //智慧客服
+        staffId: '', //智慧客服'
+        staffName:'', //智慧客服
+        kfType:0,//智慧客服
+        questionType:0,//智慧客服
     }
     componentDidMount() {
         this.props.dispatch({
@@ -33,6 +43,12 @@ class manager extends PureComponent {
             userlevel: "1",                       //网站自定义会员级别，1-N，可根据选择判断，取值显示到小能客户端
             erpparam: "abc"                          //erpparam为erp功能的扩展字段，可选，购买erp功能后用于erp功能集成
         }
+        //智慧客服，获取供应商编码
+        let userData = getSessionUserData()
+        this.setState({staffId: userData.userId})
+        this.setState({staffName: userData.fullName})
+        this.setState({supplierNumber: userData.organizationId}) 
+        //<<<<<<智慧客服end
     }
     lookInfo = (id) => { // 公告查看
         this.setState({
@@ -45,22 +61,22 @@ class manager extends PureComponent {
             noticeDetail: false
         })
     }
-    talkXy = () => {
-        if(NTKF){
-            NTKF.im_openInPageChat('bl_1000_1492484340268');
-        } else {
-            message.warn('小优客服初始化失败，请联系系统管理员！')
-        }
+    initChatUI = () => {
+        //智慧客服
+        if(this.state.isCloseWs){
+            this.setState({optionsModal: true})
+        }else{
+              this.setState({isModalVisible: true})
+              this.setState({isCloseWs: false})
+              this.setState({isFlash :false})
+        } 
     }
     render() {
         const { tlist, trelist } = this.props;
-        const { detailId, noticeDetail } = this.state;
+        const { detailId, noticeDetail, isModalVisible, isCloseWs, optionsModal, projectModal, supplierNumber, staffId, staffName, kfType, questionType, isFlash} = this.state; //智慧客服state
         return (
             <>
-                {
-                    START_ENV == 'UAT' || START_ENV == 'DEV' || START_ENV == 'sim' ? '' : 
-                    <a className="talk" onClick={() => this.talkXy()}>咨询服务︵<span>8:30</span><span>|</span><span>12:30</span><span>13:00</span><span>|</span><span>17:00</span>︶<img src={talkPng} /></a>
-                }
+                <a className={isFlash && !isModalVisible ? "talk text-effect":"talk"} onClick={() => this.initChatUI()}>咨询服务︵<span>8:30</span><span>|</span><span>12:30</span><span>13:00</span><span>|</span><span>17:00</span>︶<img src={talkPng} /></a>
                 <div className="dashboard" style={{ height: innerHeight - 70, overflow: "hidden" }}>
                     <Row className="topt">
                         <Col span={24}><Card title="系统公告" bordered={false} className="cardtre" extra={<div className="moret" onClick={() => history.push('/notice/noticeList')}>更多<RightOutlined /></div>}>
@@ -77,6 +93,51 @@ class manager extends PureComponent {
                     </Row>
                 </div>
                 {noticeDetail && <NoticeDetail detailId={detailId} onCancel={() => { this.noticeModel() }} modalVisible={noticeDetail} />}
+                {/*智慧客服*/}
+                <ChatUI 
+                    openProjectWin={()=>{
+                        this.setState({kfType: 2})
+                        this.setState({projectModal: true})
+                    }}
+                    openWin={(kfType, questionType)=>{
+                        this.setState({questionType: questionType})
+                        this.setState({kfType: kfType})
+                        this.setState({optionsModal: false})
+                        this.setState({isModalVisible: true})
+                        this.setState({isCloseWs: false})
+                        this.setState({isFlash :false})
+                    }}
+                    closeWin={()=>{
+                        this.setState({kfType: 0})
+                        this.setState({questionType: 0})
+                        this.setState({optionsModal: false})
+                        this.setState({isModalVisible: false})
+                        this.setState({isCloseWs: true})
+                        this.setState({projectModal: false})
+                    }} 
+                    optionsModal={optionsModal}
+                    projectModal={projectModal}
+                    isModalVisible={isModalVisible}
+                    kfType={kfType}
+                    questionType={questionType}
+                    staffId={staffId}
+                    staffName={staffName}
+                    supplierNumber={supplierNumber}
+                    isCloseWs={isCloseWs}
+                    hideWin={()=>{
+                        this.setState({optionsModal: false})
+                        this.setState({isModalVisible: false})
+                    }}
+                    closeOptionsModal={()=>{
+                        this.setState({optionsModal: false})
+                    }}
+                    closeProjectModal={()=>{
+                        this.setState({projectModal: false})
+                    }}
+                    msgAlert={()=>{
+                    if(!isModalVisible) this.setState({isFlash: true})
+                    }}
+                />
             </>
         )
     }
diff --git a/src/pages/MainPage/ProjectManager/participants.js b/src/pages/MainPage/ProjectManager/participants.js
index e35705e..91b3a3f 100644
--- a/src/pages/MainPage/ProjectManager/participants.js
+++ b/src/pages/MainPage/ProjectManager/participants.js
@@ -16,6 +16,7 @@ import NoticeModal from '@/pages/Auction/NoticeModal/noticeModal'
 import StopReason from '@/pages/Auction/NoticeModal/stopReason'
 import QuestDetail from '@/pages/SystemMessage/message/components/questDetail'
 import { getQuestList } from '@/pages/SystemMessage/message/service'
+import ChatUI  from '@/pages/customerservice/support/conversation' //智慧客服
 
 @connect(({ dashboard, loading }) => ({
     ...dashboard,
@@ -35,7 +36,17 @@ class manager extends PureComponent {
         tpid: '0', // 中止原因id
         isModalVisible: false, // 中止原因弹窗
         questData: {},//问卷数据
-        questVisible: false //问卷弹窗
+        questVisible: false, //问卷弹窗
+        isChatModalVisible: false, //智慧客服
+        isFlash: false, //智慧客服
+        isCloseWs: true, //智慧客服
+        optionsModal: false,  //智慧客服
+        projectModal: false,  //智慧客服
+        supplierNumber: '', //智慧客服
+        staffId: '', //智慧客服'
+        staffName:'', //智慧客服
+        kfType:0,//智慧客服
+        questionType:0,//智慧客服
     }
     componentDidMount() {
         this.props.dispatch({
@@ -63,6 +74,12 @@ class manager extends PureComponent {
             userlevel: "1",                       //网站自定义会员级别，1-N，可根据选择判断，取值显示到小能客户端
             erpparam: "abc"                          //erpparam为erp功能的扩展字段，可选，购买erp功能后用于erp功能集成
         }
+        //智慧客服，获取供应商编码
+        let userData = getSessionUserData()
+        this.setState({staffId: userData.userId})
+        this.setState({staffName: userData.fullName})
+        this.setState({supplierNumber: userData.organizationId}) 
+        //<<<<<<智慧客服end
     }
     onChange = (date, dateString) => {
         this.setState({
@@ -140,22 +157,22 @@ class manager extends PureComponent {
         sessionStorage.setItem('projectData', JSON.stringify(projectData));
         window.open("/AuctionViewAuctions/Index");
     }
-    talkXy = () => {
-        if(NTKF){
-            NTKF.im_openInPageChat('bl_1000_1492484340268');
-        } else {
-            message.warn('小优客服初始化失败，请联系系统管理员！')
-        }
+    initChatUI = () => {
+        //智慧客服
+        if(this.state.isCloseWs){
+            this.setState({optionsModal: true})
+        }else{
+              this.setState({isChatModalVisible: true})
+              this.setState({isCloseWs: false})
+              this.setState({isFlash :false})
+        } 
     }
     render() {
         const { projectlist, staloading, tlist, trelist, shotList, Participants } = this.props;
-        const { datevalue, messId, messageDetail, detailId, noticeDetail, noticeModalVis, projectId, isModalVisible, tpid, questData, questVisible } = this.state;
+        const { datevalue, messId, messageDetail, detailId, noticeDetail, noticeModalVis, projectId, isModalVisible, tpid, questData, questVisible, isChatModalVisible, isCloseWs, optionsModal, projectModal, supplierNumber, staffId, staffName, kfType, questionType, isFlash} = this.state; //智慧客服state
         return (
             <>
-                {
-                    START_ENV == 'UAT' || START_ENV == 'DEV' || START_ENV == 'sim' ? '' :
-                    <a className="talk" onClick={() => this.talkXy()}>咨询服务︵<span>8:30</span><span>|</span><span>12:30</span><span>13:00</span><span>|</span><span>17:00</span>︶<img src={talkPng} /></a> 
-                }
+                <a className={isFlash && !isChatModalVisible ? "talk text-effect":"talk"} onClick={() => this.initChatUI()}>咨询服务︵<span>8:30</span><span>|</span><span>12:30</span><span>13:00</span><span>|</span><span>17:00</span>︶<img src={talkPng} /></a> 
                 <div className="dashboard" style={{ height: innerHeight - 70, overflow: "hidden" }}>
                     <Row className="topt">
                         <Col span={8}><Card title="我的消息" bordered={false} className="cardtre" style={{ marginRight: "10px" }} extra={<div className="moret" onClick={() => history.push('/SystemMessage/message')}>更多<RightOutlined /></div>}>
@@ -244,6 +261,51 @@ class manager extends PureComponent {
                 {noticeDetail && <NoticeDetail detailId={detailId} onCancel={() => { this.noticeModel() }} modalVisible={noticeDetail} />}
                 <NoticeModal projectId={projectId} state={'3'} vis={noticeModalVis} close={() => { this.noticeModel() }} />
                 <StopReason tpid={tpid} modalVisible={isModalVisible} onCancel={() => { this.noticeModel() }} />
+                {/*智慧客服*/}
+                <ChatUI 
+                    openProjectWin={()=>{
+                        this.setState({kfType: 2})
+                        this.setState({projectModal: true})
+                    }}
+                    openWin={(kfType, questionType)=>{
+                        this.setState({questionType: questionType})
+                        this.setState({kfType: kfType})
+                        this.setState({optionsModal: false})
+                        this.setState({isChatModalVisible: true})
+                        this.setState({isCloseWs: false})
+                        this.setState({isFlash :false})
+                    }}
+                    closeWin={()=>{
+                        this.setState({kfType: 0})
+                        this.setState({questionType: 0})
+                        this.setState({optionsModal: false})
+                        this.setState({isChatModalVisible: false})
+                        this.setState({isCloseWs: true})
+                        this.setState({projectModal: false})
+                    }} 
+                    optionsModal={optionsModal}
+                    projectModal={projectModal}
+                    isModalVisible={isChatModalVisible}
+                    kfType={kfType}
+                    questionType={questionType}
+                    staffId={staffId}
+                    staffName={staffName}
+                    supplierNumber={supplierNumber}
+                    isCloseWs={isCloseWs}
+                    hideWin={()=>{
+                        this.setState({optionsModal: false})
+                        this.setState({isChatModalVisible: false})
+                    }}
+                    closeOptionsModal={()=>{
+                        this.setState({optionsModal: false})
+                    }}
+                    closeProjectModal={()=>{
+                        this.setState({projectModal: false})
+                    }}
+                    msgAlert={()=>{
+                    if(!isChatModalVisible) this.setState({isFlash: true})
+                    }}
+                />
             </>
         )
     }
diff --git a/src/pages/MainPage/ProjectManager/purchaseManager.js b/src/pages/MainPage/ProjectManager/purchaseManager.js
index 1ffb5e3..cbb5e7f 100644
--- a/src/pages/MainPage/ProjectManager/purchaseManager.js
+++ b/src/pages/MainPage/ProjectManager/purchaseManager.js
@@ -16,7 +16,7 @@ import NoticeDetail from '@/pages/notice/noticeList/components/NoticeDetail'
 import QuestDetail from '@/pages/SystemMessage/message/components/questDetail'
 import { getQuestList } from '@/pages/SystemMessage/message/service'
 import ApprovalDetail from '@/pages/SystemMessage/message/components/approvalDetail'
-
+import ChatUI  from '@/pages/customerservice/support/conversation' //智慧客服
 @connect(({ dashboard, loading }) => ({
     ...dashboard,
     downlistLoading: loading.effects['dashboard/fetchDowntlist'],
@@ -33,6 +33,16 @@ class manager extends PureComponent {
         questData: {},//问卷数据
         questVisible: false, //问卷弹窗
         mainDetail: false, // 审批单消息弹窗
+        isModalVisible: false, //智慧客服
+        isFlash: false, //智慧客服
+        isCloseWs: true, //智慧客服
+        optionsModal: false,  //智慧客服
+        projectModal: false,  //智慧客服
+        supplierNumber: '', //智慧客服
+        staffId: '', //智慧客服'
+        staffName:'', //智慧客服
+        kfType:0,//智慧客服
+        questionType:0,//智慧客服
     }
     componentDidMount() {
         this.props.dispatch({
@@ -64,6 +74,12 @@ class manager extends PureComponent {
             userlevel: "1",                       //网站自定义会员级别，1-N，可根据选择判断，取值显示到小能客户端
             erpparam: "abc"                          //erpparam为erp功能的扩展字段，可选，购买erp功能后用于erp功能集成
         }
+        //智慧客服，获取供应商编码
+        let userData = getSessionUserData()
+        this.setState({staffId: userData.userId})
+        this.setState({staffName: userData.fullName})
+        this.setState({supplierNumber: userData.organizationId}) 
+        //<<<<<<智慧客服end
         this.approvalDetail()
     }
     onChange = (date, dateString) => {
@@ -131,22 +147,22 @@ class manager extends PureComponent {
         await followUpAProjectManager(data);
         history.push('/ProjectLayout/Manager/HomePageSectionList');
     };
-    talkXy = () => {
-        if (NTKF) {
-            NTKF.im_openInPageChat('bl_1000_1492484340268');
-        } else {
-            message.warn('小优客服初始化失败，请联系系统管理员！')
-        }
+    initChatUI = () => {
+        //智慧客服
+        if(this.state.isCloseWs){
+            this.setState({optionsModal: true})
+        }else{
+              this.setState({isChatModalVisible: true})
+              this.setState({isCloseWs: false})
+              this.setState({isFlash :false})
+        } 
     }
     render() {
         const { downlist, projectlist, staloading, tlist, trelist, idList, dateNum } = this.props;
-        const { datevalue, messId, messageDetail, detailId, noticeDetail, questData, questVisible, mainDetail } = this.state;
+        const { datevalue, messId, messageDetail, detailId, noticeDetail, questData, questVisible, mainDetail, isModalVisible, isCloseWs, optionsModal, projectModal, supplierNumber, staffId, staffName, kfType, questionType, isFlash} = this.state; //智慧客服state
         return (
             <>
-                {
-                    START_ENV == 'UAT' || START_ENV == 'DEV' || START_ENV == 'sim' ? '' :
-                        <a className="talk" onClick={() => this.talkXy()}>咨询服务︵<span>8:30</span><span>|</span><span>12:30</span><span>13:00</span><span>|</span><span>17:00</span>︶<img src={talkPng} /></a>
-                }
+                <a className={isFlash && !isModalVisible ? "talk text-effect":"talk"}onClick={() => this.initChatUI()}>咨询服务︵<span>8:30</span><span>|</span><span>12:30</span><span>13:00</span><span>|</span><span>17:00</span>︶<img src={talkPng} /></a>
                 <div className="dashboard" style={{ height: innerHeight - 70, overflow: "hidden" }}>
                     <Row className="topt">
                         <Col span={8}><Card title="我的消息" bordered={false} className="cardtre" style={{ marginRight: "10px" }} extra={<div className="moret" onClick={() => history.push('/SystemMessage/message')}>更多<RightOutlined /></div>}>
@@ -268,6 +284,51 @@ class manager extends PureComponent {
                 {
                     idList.length > 0 ? <ApprovalDetail approvalId={idList[0]} dateNum={dateNum} trelist={idList} onCancel={() => { this.closeModel(), this.props.dispatch({ type: "dashboard/fetchtClarify", payload: { authorizestate: '0', templatetype: '4', size: 6 } }) }} modalVisible={mainDetail} /> : null
                 }
+                {/*智慧客服*/}
+                <ChatUI 
+                    openProjectWin={()=>{
+                        this.setState({kfType: 2})
+                        this.setState({projectModal: true})
+                    }}
+                    openWin={(kfType, questionType)=>{
+                        this.setState({questionType: questionType})
+                        this.setState({kfType: kfType})
+                        this.setState({optionsModal: false})
+                        this.setState({isModalVisible: true})
+                        this.setState({isCloseWs: false})
+                        this.setState({isFlash :false})
+                    }}
+                    closeWin={()=>{
+                        this.setState({kfType: 0})
+                        this.setState({questionType: 0})
+                        this.setState({optionsModal: false})
+                        this.setState({isModalVisible: false})
+                        this.setState({isCloseWs: true})
+                        this.setState({projectModal: false})
+                    }} 
+                    optionsModal={optionsModal}
+                    projectModal={projectModal}
+                    isModalVisible={isModalVisible}
+                    kfType={kfType}
+                    questionType={questionType}
+                    staffId={staffId}
+                    staffName={staffName}
+                    supplierNumber={supplierNumber}
+                    isCloseWs={isCloseWs}
+                    hideWin={()=>{
+                        this.setState({optionsModal: false})
+                        this.setState({isModalVisible: false})
+                    }}
+                    closeOptionsModal={()=>{
+                        this.setState({optionsModal: false})
+                    }}
+                    closeProjectModal={()=>{
+                        this.setState({projectModal: false})
+                    }}
+                    msgAlert={()=>{
+                    if(!isModalVisible) this.setState({isFlash: true})
+                    }}
+                />
             </>
         )
     }
diff --git a/src/pages/MainPage/ProjectManager/supplier.js b/src/pages/MainPage/ProjectManager/supplier.js
index bf5b24c..31ad6a2 100644
--- a/src/pages/MainPage/ProjectManager/supplier.js
+++ b/src/pages/MainPage/ProjectManager/supplier.js
@@ -18,6 +18,7 @@ import IParticipateIn from '@/utils/IParticipateIn'
 import InvitationLetter from '@/utils/InvitationLetter'
 import QuestDetail from '@/pages/SystemMessage/message/components/questDetail'
 import { getQuestList } from '@/pages/SystemMessage/message/service'
+import ChatUI  from '@/pages/customerservice/support/conversation' //智慧客服
 
 @connect(({ dashboard, loading }) => ({
     ...dashboard,
@@ -39,6 +40,16 @@ class supplier extends PureComponent {
         questData: {},//问卷数据
         questVisible: false, //问卷弹窗
         datestring: moment().format('YYYY-MM'),//我参与的项目日期
+        isModalVisible: false, //智慧客服
+        isFlash: false, //智慧客服
+        isCloseWs: true, //智慧客服
+        optionsModal: false,  //智慧客服
+        projectModal: false,  //智慧客服
+        supplierNumber: '', //智慧客服
+        staffId: '', //智慧客服'
+        staffName:'', //智慧客服
+        kfType:0,//智慧客服
+        questionType:0,//智慧客服
     }
     componentDidMount() {
         const paramst = {
@@ -82,6 +93,12 @@ class supplier extends PureComponent {
             userlevel: "1",                       //网站自定义会员级别，1-N，可根据选择判断，取值显示到小能客户端
             erpparam: "abc"                          //erpparam为erp功能的扩展字段，可选，购买erp功能后用于erp功能集成
         }
+        //智慧客服，获取供应商编码
+        let userData = getSessionUserData()
+        this.setState({staffId: userData.userId})
+        this.setState({staffName: userData.fullName})
+        this.setState({supplierNumber: userData.organizationId}) 
+        //<<<<<<智慧客服end
         this.clarifyDetail()
     }
     onChange = (date, dateString) => {
@@ -177,22 +194,22 @@ class supplier extends PureComponent {
             invitationDetail: true
         })
     }
-    talkXy = () => {
-        if (NTKF) {
-            NTKF.im_openInPageChat('bl_1000_1492484340268');
-        } else {
-            message.warn('小优客服初始化失败，请联系系统管理员！')
-        }
+    initChatUI = () => {
+        //智慧客服
+        if(this.state.isCloseWs){
+            this.setState({optionsModal: true})
+        }else{
+              this.setState({isChatModalVisible: true})
+              this.setState({isCloseWs: false})
+              this.setState({isFlash :false})
+        } 
     }
     render() {
         const { supplieruplist, supplierleftlist, supplierrightlist, staloading, tlist, trelist, idList, dateNum } = this.props;
-        const { datevalue, messId, messageDetail, mainDetail, detailId, noticeDetail, joinData, joinDetail, invitationData, invitationDetail, questData, questVisible } = this.state;
+        const { datevalue, messId, messageDetail, mainDetail, detailId, noticeDetail, joinData, joinDetail, invitationData, invitationDetail, questData, questVisible, isModalVisible, isCloseWs, optionsModal, projectModal, supplierNumber, staffId, staffName, kfType, questionType, isFlash} = this.state; //智慧客服state
         return (
             <>
-                {
-                    START_ENV == 'UAT' || START_ENV == 'DEV' || START_ENV == 'sim' ? '' :
-                    <a className="talk" onClick={() => this.talkXy()}>咨询服务︵<span>8:30</span><span>|</span><span>12:30</span><span>13:00</span><span>|</span><span>17:00</span>︶<img src={talkPng} /></a>
-                }
+                <a className={isFlash && !isModalVisible ? "talk text-effect":"talk"}onClick={() => this.initChatUI()}>咨询服务︵<span>8:30</span><span>|</span><span>12:30</span><span>13:00</span><span>|</span><span>17:00</span>︶<img src={talkPng} /></a>
                 <div className="dashboard" style={{ height: innerHeight - 70, overflow: "hidden" }}>
                     <Row className="topt">
                         <Col span={8}><Card title="我的消息" bordered={false} className="cardtre" style={{ marginRight: "10px" }} extra={<div className="moret" onClick={() => history.push('/SystemMessage/message')}>更多<RightOutlined /></div>}>
@@ -303,6 +320,51 @@ class supplier extends PureComponent {
                 {noticeDetail && <NoticeDetail detailId={detailId} onCancel={() => { this.noticeModel() }} modalVisible={noticeDetail} />}
                 {joinData == '' ? null : <IParticipateIn projectData={joinData} setVisible={() => { this.noticeModel() }} visible={joinDetail} />}
                 {invitationData == '' ? null : <InvitationLetter projectData={invitationData} setVisible={() => { this.noticeModel() }} visible={invitationDetail} />}
+                {/*智慧客服*/}
+                <ChatUI 
+                    openProjectWin={()=>{
+                        this.setState({kfType: 2})
+                        this.setState({projectModal: true})
+                    }}
+                    openWin={(kfType, questionType)=>{
+                        this.setState({questionType: questionType})
+                        this.setState({kfType: kfType})
+                        this.setState({optionsModal: false})
+                        this.setState({isModalVisible: true})
+                        this.setState({isCloseWs: false})
+                        this.setState({isFlash :false})
+                    }}
+                    closeWin={()=>{
+                        this.setState({kfType: 0})
+                        this.setState({questionType: 0})
+                        this.setState({optionsModal: false})
+                        this.setState({isModalVisible: false})
+                        this.setState({isCloseWs: true})
+                        this.setState({projectModal: false})
+                    }} 
+                    optionsModal={optionsModal}
+                    projectModal={projectModal}
+                    isModalVisible={isModalVisible}
+                    kfType={kfType}
+                    questionType={questionType}
+                    staffId={staffId}
+                    staffName={staffName}
+                    supplierNumber={supplierNumber}
+                    isCloseWs={isCloseWs}
+                    hideWin={()=>{
+                        this.setState({optionsModal: false})
+                        this.setState({isModalVisible: false})
+                    }}
+                    closeOptionsModal={()=>{
+                        this.setState({optionsModal: false})
+                    }}
+                    closeProjectModal={()=>{
+                        this.setState({projectModal: false})
+                    }}
+                    msgAlert={()=>{
+                    if(!isModalVisible) this.setState({isFlash: true})
+                    }}
+                />
             </>
         )
     }
diff --git a/src/pages/customerservice/support/conversation/components/MsgBubble/MsgBubble.jsx b/src/pages/customerservice/support/conversation/components/MsgBubble/MsgBubble.jsx
index c794d0d..5b73002 100644
--- a/src/pages/customerservice/support/conversation/components/MsgBubble/MsgBubble.jsx
+++ b/src/pages/customerservice/support/conversation/components/MsgBubble/MsgBubble.jsx
@@ -74,9 +74,9 @@ export default function MsgBubble(props) {
         return(
           <Tooltip title={message.content.name} placement='topLeft'>
             <div onDragOver={(e)=>{e.preventDefault()}} className={style.customer_service_uploadfile} onClick={openFile}>
-              <div className={cns([style.customer_service_filename, style.customer_service_ellipsis])}>{message.content.name}</div>
-              <div className={style.customer_service_filesize}>{message.content.size}</div>
-              <div className={style.customer_service_uploadicon}></div>
+              <span className={cns([style.customer_service_filename, style.customer_service_ellipsis])}>{message.content.name}</span>
+              <span className={style.customer_service_filesize}>{message.content.size}</span>
+              <span className={style.customer_service_uploadicon}></span>
             </div>
           </Tooltip>
         )
diff --git a/src/pages/customerservice/support/conversation/components/MsgBubble/style.module.css b/src/pages/customerservice/support/conversation/components/MsgBubble/style.module.css
index 32a35fa..af9daca 100644
--- a/src/pages/customerservice/support/conversation/components/MsgBubble/style.module.css
+++ b/src/pages/customerservice/support/conversation/components/MsgBubble/style.module.css
@@ -23,7 +23,7 @@
   border: 1px solid #CCC;
   background-color: white;
   width: 200px;
-  height: 130px;
+  height: 120px;
   position: relative;
   -display: flex;
   -flex-direction: column;
@@ -59,6 +59,7 @@
 }
 .customer_service_uploadicon{
   float: right;
+  margin-top: 15px;
   margin-right: 10px;
   width: 40px;
   height: 40px;