web-component-gallery 1.2.1 → 1.2.4

package/plugins/lib/chat/OtherMessage.vue

@@ -1,243 +0,0 @@
-<template>
-    <div class="other-message-body">
-        <div v-if="profilePictureConfig.others" class="thum-container">
-            <img class="participant-thumb" v-if="getParticipantById(message.participantId).profilePicture" :src="getParticipantById(message.participantId).profilePicture"
-                 :style="{'width': profilePictureConfig.styles.width, 'height': profilePictureConfig.styles.height, 'border-radius': profilePictureConfig.styles.borderRadius}">
-        </div>
-        <div class="message-content">
-            <template v-if="message.type == 'image'">
-                <p class="message-username-image">{{getParticipantById(message.participantId).name}}</p>
-                <div v-if="message.uploaded" class="message-image">
-                    <img class="message-image-display" :src="message.src" alt="" @click="onImageClicked(message)">
-                </div>
-                <div v-else class="message-image">
-                    <img class="message-image-display img-overlay" :src="message.preview" alt="">
-                    <div class="img-loading"></div>
-                </div>
-            </template>
-            <template v-else>
-                <div class="message-text">
-                    <p class="message-username">{{getParticipantById(message.participantId).name}}</p>
-                    <Collapse expandIconPosition="right" :activeKey="activeKey">
-                        <CollapsePanel key="1">
-                            <div slot="header">
-                                <img :class="[!message.stopAnswer && 'rotating-element']" src="https://gips3.baidu.com/it/u=3993729449,4068610368&fm=3028&app=3028&f=PNG&fmt=auto&q=100&size=f48_48" />
-                                <span>{{chatTitle}}</span>
-                                <span v-if="message.content">已深度思考 用时{{message.duration}}秒</span>
-                                <span v-else>思考中...</span>
-                            </div>
-                            <div v-html="parseMarkdown(message.think)" v-KatexAutoRender />
-                        </CollapsePanel>
-                    </Collapse>
-                    <div ref="message-content" class="message-markdown" v-html="parseMarkdown(message.content)"  v-KatexAutoRender /> 
-                </div>
-            </template> 
-            <div class="message-timestamp" :style="{'justify-content': 'baseline'}">
-                <template v-if="timestampConfig.relative">
-                    {{message.timestamp.toRelative()}}
-                </template>
-                <template v-else> 
-                    {{message.timestamp.toFormat(timestampConfig.format)}}
-                </template>
-                <CheckIcon v-if="asyncMode && message.uploaded && !message.viewed" :size="14" class="icon-sent"/>
-                <CheckAll v-else-if="asyncMode && message.uploaded && message.viewed" :size="14" class="icon-sent viewed"/>
-                <div v-else-if="asyncMode" class="message-loading"></div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-    import {mapGetters, mapMutations} from 'vuex';
-    import {Collapse} from 'ant-design-vue'
-    import {parseMarkdown, katexAutoRender} from './Chat'
-    export default {
-        components:{
-            CheckIcon: () => import('./icons/Check.vue'),
-            CheckAll: () => import('./icons/CheckAll.vue'),
-            Collapse,
-            CollapsePanel: Collapse.Panel
-        },
-        directives: {
-            'KatexAutoRender': katexAutoRender
-        },
-        props:{
-            message: {
-                type: Object,
-                required: true
-            },
-            asyncMode: {
-                type: Boolean,
-                required: false,
-                default: false
-            },
-            /* onImageClicked: {
-                type: Function,
-                required: false,
-                default: null
-            }, */
-            profilePictureConfig: {
-                type: Object,
-                required: true
-            },
-            timestampConfig: {
-                type: Object,
-                required: true
-            }
-        },
-        data() {
-            return {
-                activeKey: ['1']
-            }
-        },
-        computed: {
-            ...mapGetters([
-                'getParticipantById',
-                'messages',
-                'myself'
-            ]),
-            chatTitle() {
-                return this.$store.state.chat.chatTitle
-            }
-        },
-        watch: {
-            'message.content': {
-                handler(newVal, oldVal) {
-                    if(newVal && newVal.length) {
-                        this.activeKey = []
-                    }
-                },
-                deep: true
-            } 
-        },
-        methods: {
-            parseMarkdown,
-            onImageClicked: function(message){
-                this.$emit("onImageClicked", message)
-            }
-        }
-    }
-</script>
-
-<style lang="less">
-/* 混入样式 */
-@import url('../style/mixins.less');
-@import '~ant-design-vue/lib/style/themes/default.less';
-
-    /* 定义旋转动画 */
-    @keyframes spin {
-        from {
-            transform: rotate(0deg);
-        }
-        to {
-            transform: rotate(360deg);
-        }
-    }
-    
-    /* 应用动画到元素 */
-    .rotating-element {
-        animation: spin 2s linear infinite; /* 持续时间2秒，线性速度，无限次重复 */
-    } 
-
-    .container-message-display .other-message-body{
-        display: flex;
-        align-items: flex-start;
-        padding-left: 10px;
-
-        .message-content{
-            display: flex;
-            align-items: flex-start;
-            justify-content: flex-start;
-            flex-direction: column;
-            flex-grow: 1;
-        }
-
-        .participant-thumb{
-            /* width: 25px;
-            height: 25px;
-            border-radius: 50%; */
-            margin-right: 10px;
-        }
-
-        .message-timestamp {
-            padding: 2px 7px;
-            border-radius: 15px;
-            margin: 0;
-            max-width: 50%;
-            overflow-wrap: break-word;
-            text-align: left;
-            font-size: 10px;
-            color: #bdb8b8;
-            width: 100%;
-            display: flex;
-            align-items: center;
-        }
-
-        .message-text {
-            color: #444; 
-            background: #f8f8f8;  
-            padding: 6px 10px;
-            line-height: 14px;
-            border-radius: 15px;
-            margin: 5px 0 5px 0;
-            max-width: 70%;
-            overflow-wrap: break-word;
-            text-align: left;
-            white-space: pre-wrap;
-            border-bottom-left-radius: 0px;
-            word-break: break-word;
-            .message-markdown { 
-                margin-top: @padding-md;
-                p { line-height: 16px; }
-            }
-
-            .ant-collapse {
-                border: none;
-                background: linear-gradient(180deg,rgba(127,161,255,.05),rgba(133,102,255,.05));
-
-                .ant-collapse-item {
-                    border: none;
-
-                    .ant-collapse-header,
-                    .ant-collapse-content > .ant-collapse-content-box {
-                        padding: @padding-xs; 
-                    }
-
-                    .ant-collapse-header > div {
-                        align-items: center;
-                        .flex-layout(@flexGap: 0 @padding-xs); 
-                        img { .square(16px); }
-
-                        span {
-                            color: fade(@black, 50%); 
-                            &:nth-child(2) { color: #6e4bfa; font-size: @font-size-lg; }
-                        }
-                    }
-
-                    .ant-collapse-content {
-                        border: none;
-                        color: fade(@black, 50%);
-                        background: transparent;
-                    }
-                }
-            } 
-
-            .katex {
-                font-weight: 800;
-                display: inline-block;
-                padding: @padding-sm 0;
-                box-sizing: border-box;
-            }
-
-            h1, h2, h3, h4, h5, h6 { 
-                color: #444;
-            }
-
-            pre {
-                background: #f3f3f3;
-                padding: @padding-md @padding-xs;
-                box-sizing: border-box;
-            }
-        }
-    }
-</style>

package/plugins/lib/chat/icons/Check.vue

@@ -1,43 +0,0 @@
-<template functional>
-  <span :aria-hidden="props.decorative"
-        :aria-label="props.title"
-        :class="[data.class, data.staticClass]"
-        class="material-design-icon check-icon"
-        role="img"
-        v-bind="data.attrs"
-        v-on="listeners">
-    <svg :fill="props.fillColor"
-         class="material-design-icon__svg"
-         :width="props.size"
-         :height="props.size"
-         viewBox="0 0 24 24">
-      <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z">
-        <title v-if="!props.decorative">{{ props.title }}</title>
-      </path>
-    </svg>
-  </span>
-</template>
-
-<script>
-export default {
-  name: "CheckIcon",
-  props: {
-    title: {
-      type: String,
-      default: "Check icon"
-    },
-    decorative: {
-      type: Boolean,
-      default: false
-    },
-    fillColor: {
-      type: String,
-      default: "currentColor"
-    },
-    size: {
-      type: Number,
-      default: 24
-    }
-  }
-}
-</script>

package/plugins/lib/chat/icons/CheckAll.vue

@@ -1,43 +0,0 @@
-<template functional>
-  <span :aria-hidden="props.decorative"
-        :aria-label="props.title"
-        :class="[data.class, data.staticClass]"
-        class="material-design-icon check-all-icon"
-        role="img"
-        v-bind="data.attrs"
-        v-on="listeners">
-    <svg :fill="props.fillColor"
-         class="material-design-icon__svg"
-         :width="props.size"
-         :height="props.size"
-         viewBox="0 0 24 24">
-      <path d="M0.41,13.41L6,19L7.41,17.58L1.83,12M22.24,5.58L11.66,16.17L7.5,12L6.07,13.41L11.66,19L23.66,7M18,7L16.59,5.58L10.24,11.93L11.66,13.34L18,7Z">
-        <title v-if="!props.decorative">{{ props.title }}</title>
-      </path>
-    </svg>
-  </span>
-</template>
-
-<script>
-export default {
-  name: "CheckAllIcon",
-  props: {
-    title: {
-      type: String,
-      default: "Check All icon"
-    },
-    decorative: {
-      type: Boolean,
-      default: false
-    },
-    fillColor: {
-      type: String,
-      default: "currentColor"
-    },
-    size: {
-      type: Number,
-      default: 24
-    }
-  }
-}
-</script>

package/plugins/lib/chat/icons/Image.vue

@@ -1,31 +0,0 @@
-<template>
-    <svg :fill="fillColor"
-         class="material-design-icon__svg"
-         :width="size"
-         :height="size"
-         viewBox="0 0 24 24">
-      <path d="M8.5,13.5L11,16.5L14.5,12L19,18H5M21,19V5C21,3.89 20.1,3 19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19Z">
-        <title v-if="title">{{ title }}</title>
-      </path>
-    </svg>
-</template>
-
-<script>
-export default {
-  name: "ImageIcon",
-  emits: ['click'],
-  props: {
-    title: {
-      type: String,
-    },
-    fillColor: {
-      type: String,
-      default: "currentColor"
-    },
-    size: {
-      type: Number,
-      default: 24
-    }
-  }
-}
-</script>

package/plugins/lib/chat/icons/Send.vue

@@ -1,31 +0,0 @@
-<template>
-    <svg :fill="fillColor"
-         class="material-design-icon__svg"
-         :width="size"
-         :height="size"
-         viewBox="0 0 24 24">
-      <path d="M3 12.9999H9V10.9999H3V1.84558C3 1.56944 3.22386 1.34558 3.5 1.34558C3.58425 1.34558 3.66714 1.36687 3.74096 1.40747L22.2034 11.5618C22.4454 11.6949 22.5337 11.9989 22.4006 12.2409C22.3549 12.324 22.2865 12.3924 22.2034 12.4381L3.74096 22.5924C3.499 22.7255 3.19497 22.6372 3.06189 22.3953C3.02129 22.3214 3 22.2386 3 22.1543V12.9999Z">
-        <title v-if="title">{{ title }}</title>
-      </path>
-    </svg>
-</template>
-
-<script>
-export default {
-  name: "SendIcon",
-  emits: ['click'],
-  props: {
-    title: {
-      type: String,
-    },
-    fillColor: {
-      type: String,
-      default: "currentColor"
-    },
-    size: {
-      type: Number,
-      default: 24
-    }
-  }
-}
-</script>

package/plugins/lib/chat/index.js

@@ -1,7 +0,0 @@
-import Chat from './Chat.vue'
- 
-Chat.install = function (Vue) { 
-  Vue.component(Chat.name, Chat)
-}
-
-export default Chat