@aochuang/client-sdk 1.0.278

package/components/wechat-chat-panel/chat-panel-item.vue

@@ -0,0 +1,695 @@
+<template>
+  <wechat-chat-control-config-msg
+    :msgData="item"
+  >
+    <template slot-scope="{ configData }">
+      <div class="sdk-wechat-panel-item" :data-id="item.id">
+        <template v-if="item.msgType !== '_EMPTY_'">
+          <slot name="chat-prefix" :item="item"></slot>
+        </template>
+        <template v-if="item.msgType == MESSAGE_TYPE.TEXT">
+          <sdk-chat-panel-box
+            :dir="dir"
+            :data="item"
+            :fetchUserMethod="fetchUserMethod"
+            max-width="540px"
+            @user-avatar-click="handleUserAvatarClick"
+            @user-avatar-contextmenu="handleUserAvatarContextmenu"
+          >
+            <template slot="foot">
+              <slot name="box-append" :item="item"></slot>
+            </template>
+            <sdk-chat-control-text
+              v-bind="configData"
+              :id="item.id"
+              :content="msgContent"
+            ></sdk-chat-control-text>
+            <template slot="append" slot-scope="{ updateProp }">
+              <slot name="chat-append" :item="item" :update-chat-box-prop="updateProp"></slot>
+            </template>
+          </sdk-chat-panel-box>
+        </template>
+        <template v-else-if="item.msgType == MESSAGE_TYPE.IMAGE">
+          <sdk-chat-panel-box
+            :dir="dir"
+            :data="item"
+            :fetchUserMethod="fetchUserMethod"
+            :blank="true"
+            @user-avatar-click="handleUserAvatarClick"
+            @user-avatar-contextmenu="handleUserAvatarContextmenu"
+          >
+            <template slot="foot">
+              <slot name="box-append" :item="item"></slot>
+            </template>
+            <sdk-chat-control-image
+              v-bind="configData"
+              :id="item.id"
+              :content="msgContent"
+            ></sdk-chat-control-image>
+            <template slot="append" slot-scope="{ updateProp }">
+              <slot name="chat-append" :item="item" :update-chat-box-prop="updateProp"></slot>
+            </template>
+          </sdk-chat-panel-box>
+        </template>
+        <template v-else-if="item.msgType == MESSAGE_TYPE.VIDEO">
+          <sdk-chat-panel-box
+            :dir="dir"
+            :data="item"
+            :fetchUserMethod="fetchUserMethod"
+            :blank="true"
+            @user-avatar-click="handleUserAvatarClick"
+            @user-avatar-contextmenu="handleUserAvatarContextmenu"
+          >
+            <template slot="foot">
+              <slot name="box-append" :item="item"></slot>
+            </template>
+            <sdk-chat-control-video
+              v-bind="configData"
+              :id="item.id"
+              :content="msgContent"
+            ></sdk-chat-control-video>
+            <template slot="append" slot-scope="{ updateProp }">
+              <slot name="chat-append" :item="item" :update-chat-box-prop="updateProp"></slot>
+            </template>
+          </sdk-chat-panel-box>
+        </template>
+        <template v-else-if="item.msgType == MESSAGE_TYPE.VOICE">
+          <sdk-chat-panel-box
+            :dir="dir"
+            :data="item"
+            :fetchUserMethod="fetchUserMethod"
+            :blank="true"
+            @user-avatar-click="handleUserAvatarClick"
+            @user-avatar-contextmenu="handleUserAvatarContextmenu"
+          >
+            <template slot="foot">
+              <slot name="box-append" :item="item"></slot>
+            </template>
+            <sdk-chat-control-voice
+              v-bind="configData"
+              :dir="dir"
+              :id="item.id"
+              :content="msgContent"
+            ></sdk-chat-control-voice>
+            <template slot="append" slot-scope="{ updateProp }">
+              <slot name="chat-append" :item="item" :update-chat-box-prop="updateProp"></slot>
+            </template>
+          </sdk-chat-panel-box>
+        </template>
+        <template v-else-if="item.msgType == MESSAGE_TYPE.MUSIC">
+          <sdk-chat-panel-box
+            :dir="dir"
+            :data="item"
+            :fetchUserMethod="fetchUserMethod"
+            bg-color="#fff"
+            br-color="#ddd"
+            @user-avatar-click="handleUserAvatarClick"
+            @user-avatar-contextmenu="handleUserAvatarContextmenu"
+          >
+            <template slot="foot">
+              <slot name="box-append" :item="item"></slot>
+            </template>
+            <sdk-chat-control-music
+              v-bind="configData"
+              :id="item.id"
+              :content="msgContent"
+            ></sdk-chat-control-music>
+            <template slot="append" slot-scope="{ updateProp }">
+              <slot name="chat-append" :item="item" :update-chat-box-prop="updateProp"></slot>
+            </template>
+          </sdk-chat-panel-box>
+        </template>
+        <template v-else-if="item.msgType == MESSAGE_TYPE.SHARE_CARD">
+          <sdk-chat-panel-box
+            :dir="dir"
+            :data="item"
+            :fetchUserMethod="fetchUserMethod"
+            bg-color="#fff"
+            br-color="#ddd"
+            @user-avatar-click="handleUserAvatarClick"
+            @user-avatar-contextmenu="handleUserAvatarContextmenu"
+          >
+            <template slot="foot">
+              <slot name="box-append" :item="item"></slot>
+            </template>
+            <sdk-chat-control-share-card
+              v-bind="configData"
+              :id="item.id"
+              :content="msgContent"
+            ></sdk-chat-control-share-card>
+            <template slot="append" slot-scope="{ updateProp }">
+              <slot name="chat-append" :item="item" :update-chat-box-prop="updateProp"></slot>
+            </template>
+          </sdk-chat-panel-box>
+        </template>
+        <template v-else-if="item.msgType == MESSAGE_TYPE.LOCATION">
+          <sdk-chat-panel-box
+            :dir="dir"
+            :data="item"
+            :fetchUserMethod="fetchUserMethod"
+            bg-color="#fff"
+            br-color="#ddd"
+            width="280px"
+            @user-avatar-click="handleUserAvatarClick"
+            @user-avatar-contextmenu="handleUserAvatarContextmenu"
+          >
+            <template slot="foot">
+              <slot name="box-append" :item="item"></slot>
+            </template>
+            <template slot-scope="{ updateProp }">
+              <sdk-chat-control-location
+                v-bind="configData"
+                :id="item.id"
+                :content="msgContent"
+                :update-chat-box-prop="updateProp"
+              ></sdk-chat-control-location>
+            </template>
+            <template slot="append" slot-scope="{ updateProp }">
+              <slot name="chat-append" :item="item" :update-chat-box-prop="updateProp"></slot>
+            </template>
+          </sdk-chat-panel-box>
+        </template>
+        <template v-else-if="item.msgType == MESSAGE_TYPE.REAL_TIME_POSITION">
+          <sdk-chat-panel-box
+            :dir="dir"
+            :data="item"
+            :fetchUserMethod="fetchUserMethod"
+            @user-avatar-click="handleUserAvatarClick"
+            @user-avatar-contextmenu="handleUserAvatarContextmenu"
+          >
+            <template slot="foot">
+              <slot name="box-append" :item="item"></slot>
+            </template>
+            <sdk-chat-control-real-time-position
+              v-bind="configData"
+              :id="item.id"
+              :content="msgContent"
+            ></sdk-chat-control-real-time-position>
+            <template slot="append" slot-scope="{ updateProp }">
+              <slot name="chat-append" :item="item" :update-chat-box-prop="updateProp"></slot>
+            </template>
+          </sdk-chat-panel-box>
+        </template>
+        <template v-else-if="item.msgType == MESSAGE_TYPE.ACCOUNT_TRANSFER">
+          <sdk-chat-panel-box
+            :dir="dir"
+            :data="item"
+            :fetchUserMethod="fetchUserMethod"
+            bg-color="#f79d46"
+            br-color="#f79d46"
+            @user-avatar-click="handleUserAvatarClick"
+            @user-avatar-contextmenu="handleUserAvatarContextmenu"
+          >
+            <template slot="foot">
+              <slot name="box-append" :item="item"></slot>
+            </template>
+            <template slot-scope="{ updateStyle }">
+              <sdk-chat-control-transfer
+                v-bind="configData"
+                :id="item.id"
+                :content="msgContent"
+                :update-chat-box-style="updateStyle"
+              ></sdk-chat-control-transfer>
+            </template>
+            <template slot="append" slot-scope="{ updateProp }">
+              <slot name="chat-append" :item="item" :update-chat-box-prop="updateProp"></slot>
+            </template>
+          </sdk-chat-panel-box>
+        </template>
+        <template v-else-if="item.msgType == MESSAGE_TYPE.RED_ENVELOPES">
+          <sdk-chat-panel-box
+            :dir="dir"
+            :data="item"
+            :fetchUserMethod="fetchUserMethod"
+            bg-color="#f79d46"
+            br-color="#f79d46"
+            @user-avatar-click="handleUserAvatarClick"
+            @user-avatar-contextmenu="handleUserAvatarContextmenu"
+          >
+            <template slot="foot">
+              <slot name="box-append" :item="item"></slot>
+            </template>
+            <sdk-chat-control-red-envelopes
+              v-bind="configData"
+              :id="item.id"
+              :content="msgContent"
+            ></sdk-chat-control-red-envelopes>
+            <template slot="append" slot-scope="{ updateProp }">
+              <slot name="chat-append" :item="item" :update-chat-box-prop="updateProp"></slot>
+            </template>
+          </sdk-chat-panel-box>
+        </template>
+        <template v-else-if="item.msgType == MESSAGE_TYPE.COMPANY_CARD">
+          <sdk-chat-panel-box
+            :dir="dir"
+            :data="item"
+            :fetchUserMethod="fetchUserMethod"
+            bg-color="#fff"
+            br-color="#ddd"
+            @user-avatar-click="handleUserAvatarClick"
+            @user-avatar-contextmenu="handleUserAvatarContextmenu"
+          >
+            <template slot="foot">
+              <slot name="box-append" :item="item"></slot>
+            </template>
+            <sdk-chat-control-company-card
+              v-bind="configData"
+              :id="item.id"
+              :content="msgContent"
+            ></sdk-chat-control-company-card>
+            <template slot="append" slot-scope="{ updateProp }">
+              <slot name="chat-append" :item="item" :update-chat-box-prop="updateProp"></slot>
+            </template>
+          </sdk-chat-panel-box>
+        </template>
+        <template v-else-if="item.msgType == MESSAGE_TYPE.CHANNEL_VIDEO">
+          <sdk-chat-panel-box
+            :dir="dir"
+            :data="item"
+            :fetchUserMethod="fetchUserMethod"
+            bg-color="#fff"
+            br-color="#ddd"
+            @user-avatar-click="handleUserAvatarClick"
+            @user-avatar-contextmenu="handleUserAvatarContextmenu"
+          >
+            <template slot="foot">
+              <slot name="box-append" :item="item"></slot>
+            </template>
+            <sdk-chat-control-channel-video
+              v-bind="configData"
+              :id="item.id"
+              :content="msgContent"
+            ></sdk-chat-control-channel-video>
+            <template slot="append" slot-scope="{ updateProp }">
+              <slot name="chat-append" :item="item" :update-chat-box-prop="updateProp"></slot>
+            </template>
+          </sdk-chat-panel-box>
+        </template>
+        <template v-else-if="item.msgType == MESSAGE_TYPE.CHANNEL_VIDEO_CARD">
+          <sdk-chat-panel-box
+            :dir="dir"
+            :data="item"
+            :fetchUserMethod="fetchUserMethod"
+            bg-color="#fff"
+            br-color="#ddd"
+            @user-avatar-click="handleUserAvatarClick"
+            @user-avatar-contextmenu="handleUserAvatarContextmenu"
+          >
+            <template slot="foot">
+              <slot name="box-append" :item="item"></slot>
+            </template>
+            <sdk-chat-control-channel-video-card
+              v-bind="configData"
+              :id="item.id"
+              :content="msgContent"
+            ></sdk-chat-control-channel-video-card>
+            <template slot="append" slot-scope="{ updateProp }">
+              <slot name="chat-append" :item="item" :update-chat-box-prop="updateProp"></slot>
+            </template>
+          </sdk-chat-panel-box>
+        </template>
+        <template v-else-if="item.msgType == MESSAGE_TYPE.CHANNEL_VIDEO_LIVE">
+          <sdk-chat-panel-box
+            :dir="dir"
+            :data="item"
+            :fetchUserMethod="fetchUserMethod"
+            bg-color="#fff"
+            br-color="#ddd"
+            @user-avatar-click="handleUserAvatarClick"
+            @user-avatar-contextmenu="handleUserAvatarContextmenu"
+          >
+            <template slot="foot">
+              <slot name="box-append" :item="item"></slot>
+            </template>
+            <sdk-chat-control-channel-live
+              v-bind="configData"
+              :id="item.id"
+              :content="msgContent"
+            ></sdk-chat-control-channel-live>
+            <template slot="append" slot-scope="{ updateProp }">
+              <slot name="chat-append" :item="item" :update-chat-box-prop="updateProp"></slot>
+            </template>
+          </sdk-chat-panel-box>
+        </template>
+        <template v-else-if="item.msgType == MESSAGE_TYPE.URL">
+          <sdk-chat-panel-box
+            :dir="dir"
+            :data="item"
+            :fetchUserMethod="fetchUserMethod"
+            bg-color="#fff"
+            br-color="#ddd"
+            @user-avatar-click="handleUserAvatarClick"
+            @user-avatar-contextmenu="handleUserAvatarContextmenu"
+          >
+            <template slot="foot">
+              <slot name="box-append" :item="item"></slot>
+            </template>
+            <template slot-scope="{ updateProp }">
+              <sdk-chat-control-url
+                v-bind="configData"
+                :id="item.id"
+                :content="msgContent"
+                :update-chat-box-prop="updateProp"
+              ></sdk-chat-control-url>
+            </template>
+            <template slot="append" slot-scope="{ updateProp }">
+              <slot name="chat-append" :item="item" :update-chat-box-prop="updateProp"></slot>
+            </template>
+          </sdk-chat-panel-box>
+        </template>
+        <template v-else-if="item.msgType == MESSAGE_TYPE.URLNew">
+          <sdk-chat-panel-box
+            :dir="dir"
+            :data="item"
+            :fetchUserMethod="fetchUserMethod"
+            bg-color="#fff"
+            br-color="#ddd"
+            @user-avatar-click="handleUserAvatarClick"
+            @user-avatar-contextmenu="handleUserAvatarContextmenu"
+          >
+            <template slot="foot">
+              <slot name="box-append" :item="item"></slot>
+            </template>
+            <template slot-scope="{ updateProp }">
+              <sdk-chat-control-file-url
+                v-bind="configData"
+                :id="item.id"
+                :content="msgContent"
+                :update-chat-box-prop="updateProp"
+              ></sdk-chat-control-file-url>
+            </template>
+            <template slot="append" slot-scope="{ updateProp }">
+              <slot name="chat-append" :item="item" :update-chat-box-prop="updateProp"></slot>
+            </template>
+          </sdk-chat-panel-box>
+        </template>
+        <template v-else-if="item.msgType == MESSAGE_TYPE.CUSTOM_EXPRESSION">
+          <sdk-chat-panel-box
+            :dir="dir"
+            :data="item"
+            :fetchUserMethod="fetchUserMethod"
+            @user-avatar-click="handleUserAvatarClick"
+            @user-avatar-contextmenu="handleUserAvatarContextmenu"
+          >
+            <template slot="foot">
+              <slot name="box-append" :item="item"></slot>
+            </template>
+            <sdk-chat-control-custom-expression
+              v-bind="configData"
+              :id="item.id"
+              :content="msgContent"
+            ></sdk-chat-control-custom-expression>
+            <template slot="append" slot-scope="{ updateProp }">
+              <slot name="chat-append" :item="item" :update-chat-box-prop="updateProp"></slot>
+            </template>
+          </sdk-chat-panel-box>
+        </template>
+        <template v-else-if="item.msgType == MESSAGE_TYPE.CALLING">
+          <sdk-chat-panel-box
+            :dir="dir"
+            :data="item"
+            :fetchUserMethod="fetchUserMethod"
+            bg-color="#fff"
+            br-color="#ddd"
+            @user-avatar-click="handleUserAvatarClick"
+            @user-avatar-contextmenu="handleUserAvatarContextmenu"
+          >
+            <template slot="foot">
+              <slot name="box-append" :item="item"></slot>
+            </template>
+            <sdk-chat-control-calling
+              v-bind="configData"
+              :id="item.id"
+              :content="msgContent"
+            ></sdk-chat-control-calling>
+            <template slot="append" slot-scope="{ updateProp }">
+              <slot name="chat-append" :item="item" :update-chat-box-prop="updateProp"></slot>
+            </template>
+          </sdk-chat-panel-box>
+        </template>
+        <template v-else-if="item.msgType == MESSAGE_TYPE.ROOM_CALLING">
+          <sdk-chat-control-room-calling
+            v-bind="configData"
+            :id="item.id"
+            :content="msgContent"
+          ></sdk-chat-control-room-calling>
+          <template slot="append" slot-scope="{ updateProp }">
+            <slot name="chat-append" :item="item" :update-chat-box-prop="updateProp"></slot>
+          </template>
+        </template>
+        <template v-else-if="item.msgType === MESSAGE_TYPE.TEXT_WITH_AT">
+          <sdk-chat-panel-box
+            :dir="dir"
+            :data="item"
+            :fetchUserMethod="fetchUserMethod"
+            max-width="540px"
+            @user-avatar-click="handleUserAvatarClick"
+            @user-avatar-contextmenu="handleUserAvatarContextmenu"
+          >
+            <template slot="foot">
+              <slot name="box-append" :item="item"></slot>
+            </template>
+            <sdk-chat-control-text-with-at
+              v-bind="configData"
+              :id="item.id"
+              :content="msgContent"
+            ></sdk-chat-control-text-with-at>
+            <template slot="append" slot-scope="{ updateProp }">
+              <slot name="chat-append" :item="item" :update-chat-box-prop="updateProp"></slot>
+            </template>
+          </sdk-chat-panel-box>
+        </template>
+        <template v-else-if="item.msgType == MESSAGE_TYPE.JX_SYS_TEXT">
+          <sdk-chat-control-jx-sys-text
+            v-bind="configData"
+            :id="item.id"
+            :content="msgContent"
+          ></sdk-chat-control-jx-sys-text>
+        </template>
+        <template v-else-if="item.msgType == MESSAGE_TYPE.SYSTEM">
+          <sdk-chat-control-system
+            v-bind="configData"
+            :id="item.id"
+            :content="msgContent"
+          ></sdk-chat-control-system>
+        </template>
+        <template v-else-if="item.msgType == MESSAGE_TYPE.SYSTEM_BATCH_MESSAGE">
+          <sdk-chat-control-system-batch-message
+            v-bind="configData"
+            :id="item.id"
+            :content="msgContent"
+          ></sdk-chat-control-system-batch-message>
+        </template>
+        <template v-else-if="item.msgType == MESSAGE_TYPE.MEMBER_CHANGE">
+          <sdk-chat-control-member-change
+            v-bind="configData"
+            :id="item.id"
+            :content="msgContent"
+          ></sdk-chat-control-member-change>
+        </template>
+        <template v-else-if="item.msgType == MESSAGE_TYPE.SYSTEM_MONEY">
+          <sdk-chat-control-system-money
+            v-bind="configData"
+            :id="item.id"
+            :content="msgContent"
+          ></sdk-chat-control-system-money>
+        </template>
+        <template v-else-if="item.msgType == MESSAGE_TYPE.REVOKE_ME_MESSAGE">
+          <sdk-chat-control-revoke-me-message
+            v-bind="configData"
+            :id="item.id"
+            :content="msgContent"
+          ></sdk-chat-control-revoke-me-message>
+        </template>
+        <template v-else-if="item.msgType == MESSAGE_TYPE.REVOKE_OTHER_MESSAGE">
+          <sdk-chat-control-revoke-other-message
+            v-bind="configData"
+            :id="item.id"
+            :content="msgContent"
+          ></sdk-chat-control-revoke-other-message>
+        </template>
+        <template v-else-if="item.msgType == MESSAGE_TYPE.REVOKE_YOU_MESSAGE">
+          <sdk-chat-control-revoke-you-message
+            v-bind="configData"
+            :id="item.id"
+            :content="msgContent"
+          ></sdk-chat-control-revoke-you-message>
+        </template>
+        <template v-else-if="item.msgType === MESSAGE_TYPE.QUOTE_MESSAGE">
+          <sdk-chat-panel-box
+            :dir="dir"
+            :data="item"
+            :fetchUserMethod="fetchUserMethod"
+            @user-avatar-click="handleUserAvatarClick"
+            @user-avatar-contextmenu="handleUserAvatarContextmenu"
+          >
+            <template slot="foot">
+              <slot name="box-append" :item="item"></slot>
+            </template>
+            <template slot-scope="{ setFootVnode }">
+              <sdk-chat-control-quote-message
+                v-bind="configData"
+                :id="item.id"
+                :content="msgContent"
+                :wechat-account-id="item.wechatAccountId"
+                :wechat-room-id="item.wechatChatroomId"
+                :wechat-friend-id="item.wechatFriendId"
+                :set-chat-box-foot-vnode="setFootVnode"
+              >
+                <template slot="quote-append" slot-scope="{ quoteMessageData }">
+                  <slot name="quote-message-append" :quote-message-data="quoteMessageData" :item="item"></slot>
+                </template>
+              </sdk-chat-control-quote-message>
+            </template>
+            <template slot="append" slot-scope="{ updateProp }">
+              <slot name="chat-append" :item="item" :update-chat-box-prop="updateProp"></slot>
+            </template>
+          </sdk-chat-panel-box>
+        </template>
+        <template v-else-if="item.msgType === '_EMPTY_'">
+          <sdk-chat-control-empty
+            :id="item.id"
+            :content="msgContent"
+          ></sdk-chat-control-empty>
+        </template>
+        <template v-else>
+          <sdk-chat-panel-box
+            :dir="dir"
+            :data="item"
+            :fetchUserMethod="fetchUserMethod"
+            @user-avatar-click="handleUserAvatarClick"
+            @user-avatar-contextmenu="handleUserAvatarContextmenu"
+          >
+            <template slot="foot">
+              <slot name="box-append" :item="item"></slot>
+            </template>
+            <sdk-chat-control-unknow
+              :id="item.id"
+              :content="msgContent"
+            ></sdk-chat-control-unknow>
+          </sdk-chat-panel-box>
+        </template>
+      </div>
+    </template>
+  </wechat-chat-control-config-msg>
+</template>
+<script>
+import SdkChatPanelBox from '../chat-panel/chat-panel-box'
+import { 
+  text as SdkChatControlText,
+  image as SdkChatControlImage,
+  video as SdkChatControlVideo,
+  voice as SdkChatControlVoice,
+  music as SdkChatControlMusic,
+  shareCard as SdkChatControlShareCard,
+  location as SdkChatControlLocation,
+  realTimePosition as SdkChatControlRealTimePosition,
+  transfer as SdkChatControlTransfer,
+  redEnvelopes as SdkChatControlRedEnvelopes,
+  companyCard as SdkChatControlCompanyCard,
+  channelVideo as SdkChatControlChannelVideo,
+  channelVideoCard as SdkChatControlChannelVideoCard,
+  channelLive as SdkChatControlChannelLive,
+  url as SdkChatControlUrl,
+  fileUrl as SdkChatControlFileUrl,
+  jxSysText as SdkChatControlJxSysText,
+  system as SdkChatControlSystem,
+  systemBatchMessage as SdkChatControlSystemBatchMessage,
+  systemMoney as SdkChatControlSystemMoney,
+  revokeMeMessage as SdkChatControlRevokeMeMessage,
+  revokeOtherMessage as SdkChatControlRevokeOtherMessage,
+  revokeYouMessage as SdkChatControlRevokeYouMessage,
+  memberChange as SdkChatControlMemberChange,
+  textWithAt as SdkChatControlTextWithAt,
+  customExpression as SdkChatControlCustomExpression, 
+  calling as SdkChatControlCalling,
+  roomCalling as SdkChatControlRoomCalling,
+  quoteMessage as SdkChatControlQuoteMessage,
+  empty as SdkChatControlEmpty,
+  unknow as SdkChatControlUnknow
+} from '../wechat-chat-control'
+import { MESSAGE_TYPE } from '../wechat-chat-control/util'
+import WechatChatControlConfigMsg from '../wechat-chat-control/wechat-chat-control-config-msg.vue'
+
+export default {
+  name: 'SdkWechatPanelItem',
+  components: {
+    SdkChatPanelBox,
+    SdkChatControlText,
+    SdkChatControlImage,
+    SdkChatControlVideo,
+    SdkChatControlVoice,
+    SdkChatControlMusic,
+    SdkChatControlShareCard,
+    SdkChatControlLocation,
+    SdkChatControlTransfer,
+    SdkChatControlRedEnvelopes,
+    SdkChatControlCompanyCard,
+    SdkChatControlChannelVideo,
+    SdkChatControlChannelVideoCard,
+    SdkChatControlChannelLive,
+    SdkChatControlFileUrl,
+    SdkChatControlTextWithAt,
+    SdkChatControlUrl,
+    SdkChatControlUnknow,
+    SdkChatControlMemberChange,
+    SdkChatControlJxSysText,
+    SdkChatControlSystem,
+    SdkChatControlSystemMoney,
+    SdkChatControlRealTimePosition,
+    SdkChatControlQuoteMessage,
+    SdkChatControlCalling,
+    SdkChatControlEmpty,
+    SdkChatControlRoomCalling,
+    SdkChatControlCustomExpression,
+    SdkChatControlSystemBatchMessage,
+    SdkChatControlRevokeMeMessage,
+    SdkChatControlRevokeOtherMessage,
+    SdkChatControlRevokeYouMessage,
+    WechatChatControlConfigMsg
+  },
+  props: {
+    dir: {
+      type: String
+    },
+    item: {
+      type: Object,
+      required: true
+    },
+    config: {
+      type: Function
+    },
+    fetchUserMethod: {
+      type: Function
+    }
+  },
+  computed: {
+    MESSAGE_TYPE () {
+      return MESSAGE_TYPE
+    },
+    msgConfig () {
+      if (!this.config) {
+        return
+      }
+      return this.config({
+        item: this.item
+      })
+    },
+    msgContent () {
+      return this.item.content
+    }
+  },
+  methods: {
+    handleUserAvatarContextmenu (evt) {
+      this.$emit('user-avatar-contextmenu', {
+        item: this.item
+      }, evt)
+    },
+    handleUserAvatarClick (evt) {
+      this.$emit('user-avatar-click', {
+        item: this.item
+      }, evt)
+    }
+  }
+}
+</script>