tuikit-atomicx-vue3 0.1.0 → 3.3.0-beta.3

package/src/components/BarrageInput/BarrageInput.vue

@@ -9,12 +9,16 @@
         :placeholder="disabledAndPlaceholder.placeholder"
         :disabled="disabledAndPlaceholder.disabled"
         :autoFocus="autoFocus"
+        :maxLength="props.maxLength"
         @focus="emit('focus')"
         @blur="emit('blur')"
       >
         <template #prefix>
           <div class="input-actions">
-            <EmojiPicker :disabled="disabledAndPlaceholder.disabled" :trigger-style="{ display: 'flex' }" />
+            <EmojiPicker
+              :disabled="disabledAndPlaceholder.disabled"
+              :trigger-style="{ display: 'flex' }"
+            />
           </div>
         </template>
       </TextEditor>
@@ -24,11 +28,11 @@
 
 <script setup lang="ts">
 import { computed, defineProps, withDefaults, defineEmits } from 'vue';
+import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { useLiveAudienceState } from '../../states/LiveAudienceState';
+import { useLoginState } from '../../states/LoginState';
 import { EmojiPicker } from './EmojiPicker';
 import TextEditor from './TextEditor/TextEditor.vue';
-import { useLoginState } from '../../states/LoginState';
-import { useLiveAudienceState } from '../../states/LiveAudienceState';
-import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 
 const emit = defineEmits<{
   (e: 'focus'): void;
@@ -41,12 +45,14 @@ const { audienceList } = useLiveAudienceState();
 interface Props {
   containerClass?: string;
   containerStyle?: Record<string, any>;
+  width?: string;
   height?: string;
   minHeight?: string;
   maxHeight?: string;
   placeholder?: string;
   disabled?: boolean;
   autoFocus?: boolean;
+  maxLength?: number;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -57,6 +63,7 @@ const props = withDefaults(defineProps<Props>(), {
   maxHeight: '140px',
   disabled: false,
   autoFocus: true,
+  maxLength: 80,
 });
 
 const containerStyle = computed(() => {
@@ -69,6 +76,10 @@ const containerStyle = computed(() => {
     defaultStyle.height = props.height;
   }
 
+  if (props.width) {
+    defaultStyle.width = props.width;
+  }
+
   return { ...defaultStyle, ...props.containerStyle };
 });
 

package/src/components/BarrageInput/BarrageInputH5.vue

@@ -2,13 +2,15 @@
   <div class="live-message-input-h5">
     <BarrageInput
       :autoFocus="props.autoFocus"
-      :containerClass="props.containerClass"
+      :containerClass="inputClass"
       :containerStyle="props.containerStyle"
+      :width="props.width"
       :height="props.height"
       :minHeight="props.minHeight"
       :maxHeight="props.maxHeight"
       :placeholder="props.placeholder"
-      :disabled="props.disabled"
+      :disabled="disabled"
+      :maxLength="props.maxLength"
       @focus="handleFocus"
       @blur="handleBlur"
     />
@@ -24,30 +26,50 @@
 </template>
 
 <script setup lang="ts">
-import { ref, withDefaults, defineProps } from 'vue';
-import { useUIKit, TUIButton } from '@tencentcloud/uikit-base-component-vue3';
+import { ref, withDefaults, defineProps, defineEmits, computed } from 'vue';
+import { useUIKit, TUIButton, TUIToast } from '@tencentcloud/uikit-base-component-vue3';
+import { useLiveAudienceState } from '../../states/LiveAudienceState';
+import { useLoginState } from '../../states/LoginState';
 import { useMessageInputState } from '../../states/MessageInputState';
 import BarrageInput from './BarrageInput.vue';
+import { ERROR_MESSAGE } from './constants';
+
+const emit = defineEmits<{
+  (e: 'focus'): void;
+  (e: 'blur'): void;
+}>();
 
 interface Props {
   containerClass?: string;
   containerStyle?: Record<string, any>;
   height?: string;
+  width?: string;
   minHeight?: string;
   maxHeight?: string;
   placeholder?: string;
   disabled?: boolean;
   autoFocus?: boolean;
+  maxLength?: number;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   containerClass: '',
   containerStyle: () => ({}),
   height: '',
-  minHeight: '40px',
-  maxHeight: '140px',
+  minHeight: '',
+  maxHeight: '',
   disabled: false,
   autoFocus: false,
+  maxLength: 80,
+});
+
+const { loginUserInfo } = useLoginState();
+const { audienceList } = useLiveAudienceState();
+
+const inputClass = computed(() => ['message-input-container-h5', props.containerClass].join(' '));
+const disabled = computed(() => {
+  const localUser = audienceList.value.find(item => item.userId === loginUserInfo.value?.userId);
+  return props.disabled || localUser?.isMessageDisabled;
 });
 
 const { t } = useUIKit();
@@ -59,11 +81,18 @@ const handleTouchStart = () => {
   isTouching.value = true;
 };
 
-const handleSend = () => {
+const handleSend = async () => {
   if (inputRawValue.value) {
-    sendMessage();
-    setContent('');
     blurEditor();
+    try {
+      const inputValue = inputRawValue.value;
+      setContent('');
+      await sendMessage(inputValue);
+    } catch (err: any) {
+      TUIToast.error({
+        message: t(ERROR_MESSAGE[err.code as keyof typeof ERROR_MESSAGE] || 'send message failed'),
+      });
+    }
   }
 };
 const handleTouchEnd = () => {
@@ -77,10 +106,12 @@ const handleTouchEnd = () => {
 
 const handleFocus = async () => {
   isFocus.value = true;
+  emit('focus');
 };
 
 const handleBlur = () => {
   isFocus.value = false;
+  emit('blur');
 };
 </script>
 
@@ -90,5 +121,13 @@ const handleBlur = () => {
   align-items: center;
   gap: 12px;
   width: 100%;
+  :deep(.message-input-container-h5) {
+    height: 36px;
+    max-height: 140px;
+    min-height: 36px;
+    padding: 2px 12px;
+    border-radius: 100px;
+    border: 1px solid var(--stroke-color-primary)
+  }
 }
 </style>

package/src/components/BarrageInput/EmojiPicker/EmojiPicker.module.scss

@@ -18,8 +18,8 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      width: 20px;
-      height: 20px;
+      width: 26px;
+      height: 26px;
       cursor: pointer;
     }
   }

package/src/components/BarrageInput/EmojiPicker/EmojiPicker.vue

@@ -5,7 +5,7 @@
         <IconEmoji :class="styles['emoji-picker__icon']" size="24" />
       </PopoverTrigger>
       <PopoverPortal>
-        <PopoverContent side="top" align="start" :side-offset="5" style="box-sizing: border-box; z-index: 1000">
+        <PopoverContent side="top" align="center" :side-offset="8" style="box-sizing: border-box; z-index: 1000">
           <div class="flex flex-col gap-2.5">
             <div :class="styles['emoji-picker__list']">
               <div

package/src/components/BarrageInput/TextEditor/CharacterCountExtension.ts

@@ -0,0 +1,129 @@
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+import { Extension } from '@tiptap/vue-3';
+import type { Node as ProseMirrorNode } from '@tiptap/pm/model';
+
+export interface CharacterCountOptions {
+  limit: number | null | undefined;
+  textCounter: (text: string) => number;
+  wordCounter: (text: string) => number;
+}
+
+export interface CharacterCountStorage {
+  characters: (options?: { node?: ProseMirrorNode; mode?: 'textSize' | 'nodeSize' }) => number;
+  words: (options?: { node?: ProseMirrorNode }) => number;
+}
+
+export const CharacterCount = Extension.create<CharacterCountOptions, CharacterCountStorage>({
+  name: 'characterCount',
+
+  addOptions() {
+    return {
+      limit: null,
+      textCounter: text => text.length,
+      wordCounter: text => text.split(' ').filter(word => word !== '').length,
+    };
+  },
+
+  addStorage() {
+    return {
+      characters: () => 0,
+      words: () => 0,
+    };
+  },
+
+  onBeforeCreate() {
+    this.storage.characters = (options) => {
+      const node = options?.node || this.editor.state.doc;
+      return node.nodeSize;
+    };
+
+    this.storage.words = (options) => {
+      const node = options?.node || this.editor.state.doc;
+      const text = node.textBetween(0, node.content.size, ' ', ' ');
+      return this.options.wordCounter(text);
+
+      return node.nodeSize;
+    };
+  },
+
+  addProseMirrorPlugins() {
+    let initialEvaluationDone = false;
+
+    return [
+      new Plugin({
+        key: new PluginKey('characterCount'),
+        appendTransaction: (transactions, oldState, newState) => {
+          if (initialEvaluationDone) {
+            return;
+          }
+
+          const { limit } = this.options;
+
+          if (limit === null || limit === undefined || limit === 0) {
+            initialEvaluationDone = true;
+            return;
+          }
+
+          const initialContentSize = this.storage.characters({ node: newState.doc });
+
+          if (initialContentSize > limit) {
+            const over = initialContentSize - limit;
+            const from = 0;
+            const to = over;
+
+            console.warn(
+              `[CharacterCount] Initial content exceeded limit of ${limit} characters. Content was automatically trimmed.`,
+            );
+            const tr = newState.tr.deleteRange(from, to);
+
+            initialEvaluationDone = true;
+            return tr;
+          }
+
+          initialEvaluationDone = true;
+        },
+        filterTransaction: (transaction, state) => {
+          const { limit } = this.options;
+
+          if (!transaction.docChanged || limit === 0 || limit === null || limit === undefined) {
+            return true;
+          }
+
+          const oldSize = this.storage.characters({ node: state.doc });
+          const newSize = this.storage.characters({ node: transaction.doc });
+
+          if (newSize <= limit) {
+            return true;
+          }
+
+          if (oldSize > limit && newSize > limit && newSize <= oldSize) {
+            return true;
+          }
+
+          if (oldSize > limit && newSize > limit && newSize > oldSize) {
+            return false;
+          }
+
+          const isPaste = transaction.getMeta('paste');
+
+          if (!isPaste) {
+            return false;
+          }
+          const { pos } = transaction.selection.$head;
+          const over = newSize - limit;
+          const from = pos - over;
+          const to = pos;
+          transaction.deleteRange(from, to);
+
+          const updatedSize = this.storage.characters({ node: transaction.doc });
+
+          if (updatedSize > limit) {
+            return false;
+          }
+
+          return true;
+        },
+      }),
+    ];
+  },
+});

package/src/components/BarrageInput/TextEditor/EditorCore.ts

@@ -4,7 +4,8 @@ import StarterKit from '@tiptap/starter-kit';
 import { Extension, Editor } from '@tiptap/vue-3';
 import { MessageContentType } from '../../../states/MessageInputState';
 import { isMobile } from '../../../utils/environment';
-import type { IInputContent } from '../../../states/MessageInputState';
+import { CharacterCount } from './CharacterCountExtension';
+import type { InputContent } from '../../../states/MessageInputState';
 import type { JSONContent, EditorOptions as TiptapEditorOptions } from '@tiptap/vue-3';
 import './Editor.scss';
 
@@ -71,7 +72,7 @@ function createEnterKeyExtension(options?: { onEnter?: (() => void) | undefined
   });
 }
 
-function convertEditorContent(node: JSONContent): IInputContent[] {
+function convertEditorContent(node: JSONContent): InputContent[] {
   if (!node?.content) {
     return [];
   }
@@ -123,10 +124,11 @@ interface EditorOptions {
   placeholder?: string;
   autoFocus?: boolean;
   disabled?: boolean;
-  onUpdate?: (content: IInputContent[]) => void;
+  onUpdate?: (content: InputContent[]) => void;
   onEnter?: () => void;
   onFocus?: () => void;
   onBlur?: () => void;
+  maxLength?: number;
 }
 
 function createEditor({
@@ -134,6 +136,7 @@ function createEditor({
   placeholder = '',
   autoFocus = false,
   disabled = false,
+  maxLength,
   onUpdate,
   onEnter,
   onFocus,
@@ -141,6 +144,9 @@ function createEditor({
 }: EditorOptions) {
   const createBaseExtensions = (enterHandler?: () => void) => [
     StarterKit,
+    CharacterCount.configure({
+      limit: maxLength,
+    }),
     createEnterKeyExtension(enterHandler ? { onEnter: enterHandler } : undefined),
     createEmojiExtension(),
     createImageExtension(),

package/src/components/BarrageInput/TextEditor/TextEditor.vue

@@ -1,21 +1,31 @@
 <template>
   <div :class="[styles['input-wrapper'], props.disabled && styles.disabled]">
     <div :class="styles['input-prefix']">
-      <slot name="prefix"></slot>
+      <slot name="prefix" />
+    </div>
+    <div
+      v-if="!props.disabled"
+      ref="editorRef"
+      :class="styles['editor']"
+    />
+    <div
+      v-if="props.disabled"
+      :class="[styles['disabled-editor']]"
+    >
+      {{ placeholderText }}
     </div>
-    <div v-show="!props.disabled" ref="editorRef" :class="styles['editor']"></div>
-    <div v-if="props.disabled" :class="[styles['disabled-editor']]">{{ placeholderText }}</div>
     <span :class="styles['input-suffix']">
-      <slot name="suffix"></slot>
+      <slot name="suffix" />
     </span>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, computed, watch, withDefaults, defineProps, nextTick, defineEmits } from 'vue';
-import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { TUIToast, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 import { useConversationListState } from '../../../states/ConversationListState';
 import { useMessageInputState } from '../../../states/MessageInputState';
+import { ERROR_MESSAGE } from '../constants';
 import { createEditor } from './EditorCore';
 import styles from './TextEditor.module.scss';
 import type { Editor } from './EditorCore';
@@ -24,6 +34,7 @@ interface ITextEditorProps {
   autoFocus?: boolean;
   disabled?: boolean;
   placeholder?: string;
+  maxLength?: number;
 }
 
 const props = withDefaults(defineProps<ITextEditorProps>(), {
@@ -37,8 +48,8 @@ const emit = defineEmits<{
   (e: 'blur'): void;
 }>();
 const { t } = useUIKit();
-const { currentConversationID } = useConversationListState();
-const { updateRawValue, sendMessage, setEditorInstance, setContent } = useMessageInputState();
+const { activeConversation } = useConversationListState();
+const { inputRawValue, updateRawValue, sendMessage, setEditorInstance, setContent } = useMessageInputState();
 
 const editorRef = ref<HTMLDivElement | null>(null);
 const isFocused = ref(props.autoFocus);
@@ -47,23 +58,31 @@ const placeholderText = computed(() => props.placeholder || t('Say something'));
 
 let editorInstance: Editor | null = null;
 
-const createEditorInstance = (props: ITextEditorProps) => {
+const createEditorInstance = (p: ITextEditorProps) => {
   const element = editorRef.value;
-  if (!element || props.disabled) {
+  if (!element || p.disabled) {
     return;
   }
   if (!element.dataset.editorCreated) {
     editorInstance = createEditor({
       element,
       placeholder: placeholderText.value,
-      autoFocus: props.autoFocus,
-      disabled: props.disabled,
-      onUpdate: content => {
+      autoFocus: p.autoFocus,
+      disabled: p.disabled,
+      maxLength: p.maxLength,
+      onUpdate: (content) => {
         updateRawValue(content);
       },
-      onEnter: () => {
-        sendMessage();
-        setContent('');
+      onEnter: async () => {
+        try {
+          const inputValue = inputRawValue.value;
+          setContent('');
+          await sendMessage(inputValue);
+        } catch (err: any) {
+          TUIToast.error({
+            message: t(ERROR_MESSAGE[err.code as keyof typeof ERROR_MESSAGE] || 'send message failed'),
+          });
+        }
       },
       onFocus: () => {
         isFocused.value = true;
@@ -96,7 +115,7 @@ watch(
         createEditorInstance(props);
       }
     }
-  }
+  },
 );
 
 onMounted(() => {
@@ -107,8 +126,8 @@ onUnmounted(() => {
   destroyEditorInstance();
 });
 
-watch(currentConversationID, (newID, oldID) => {
-  if (newID !== oldID) {
+watch(activeConversation, (newConversation, oldConversation) => {
+  if (newConversation?.conversationID !== oldConversation?.conversationID) {
     setContent('');
   }
 });

package/src/components/BarrageInput/constants.ts

@@ -0,0 +1,3 @@
+export const ERROR_MESSAGE = {
+  10017: 'you have been forbidden to speak',
+};

package/src/components/BarrageInput/i18n/en-US/index.ts

@@ -2,4 +2,6 @@ export const resource = {
   'Say something': 'Say something...',
   'You have been muted': 'You have been muted',
   Send: 'Send',
+  'you have been forbidden to speak': 'You have been forbidden to speak',
+  'send message failed': 'Send message failed',
 };

package/src/components/BarrageInput/i18n/zh-CN/index.ts

@@ -2,4 +2,6 @@ export const resource = {
   'Say something': '说点什么...',
   'You have been muted': '您已被禁言',
   Send: '发送',
+  'you have been forbidden to speak': '您已被禁言',
+  'send message failed': '发送失败',
 };

package/src/components/BarrageList/BarrageList.vue

@@ -244,7 +244,7 @@ onUnmounted(() => {
       </ObserverView>
 
       <div class="message-chunk">
-        <template v-for="message in messageList" :key="message.ID + message.isRevoked">
+        <template v-for="message in messageList" :key="message.ID + message.isRevoked + message.status">
           <component
             :style="props.itemStyle"
             :is="props.Message || DefaultMessage"
@@ -365,7 +365,7 @@ onUnmounted(() => {
   letter-spacing: 0.1em;
 
   .message-group-tip-name {
-    color: var(--text-color-link);
+    color: var(--uikit-color-theme-8);
   }
   .message-group-tip-action {
   }

package/src/components/BarrageList/BarrageListH5.vue

@@ -244,7 +244,7 @@ onUnmounted(() => {
       </ObserverView>
 
       <div class="message-chunk">
-        <template v-for="message in messageList" :key="message.ID + message.isRevoked">
+        <template v-for="message in messageList" :key="message.ID + message.isRevoked + message.status">
           <component
             class="message-item"
             :style="props.itemStyle"
@@ -365,7 +365,7 @@ onUnmounted(() => {
   letter-spacing: 0.1em;
 
   .message-group-tip-name {
-    color: var(--text-color-link);
+    color: var(--uikit-color-theme-8);
   }
   .message-group-tip-action {
   }

package/src/components/BarrageList/Message/MessageLayout/MessageLayout.vue

@@ -185,7 +185,6 @@ $message-bubble-border-radius: 8px;
 
   &__meta {
     flex: 0 0 auto;
-    align-self: flex-end;
   }
 
   &__failed {

package/src/components/BarrageList/Message/MessageLayout/MessageMeta/MessageMeta.vue

@@ -8,7 +8,7 @@
       class="message-meta__time"
     >{{ getTimeStampAuto(props.timestamp) }}</span>
     <div
-      v-if="props.status && props.isShowSendStatus"
+      v-if="showStatus"
       class="message-meta__status"
     >
       <MessageStatusIcon :status="props.status" />
@@ -17,6 +17,7 @@
 </template>
 
 <script lang="ts" setup>
+import { computed } from 'vue';
 import cs from 'classnames';
 import { getTimeStampAuto } from '../../../../../utils/time';
 import MessageStatusIcon from './MessageStatusIcon.vue';
@@ -40,10 +41,12 @@ const props = withDefaults(defineProps<IMessageMetaProps>(), {
   isShowSendStatus: false,
   isShowReadStatus: false,
   isShowTime: false,
-  status: undefined,
+  status: '',
   class: undefined,
   style: undefined,
 });
+
+const showStatus = computed(() => (props.status && props.isShowSendStatus) || props.status === 'fail');
 </script>
 
 <style lang="scss" scoped>

package/src/components/BarrageList/Message/MessageLayout/MessageMeta/MessageStatusIcon.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { IconLoading, IconSuccess } from '@tencentcloud/uikit-base-component-vue3';
+import { IconErrorToast, IconLoading, IconSuccess } from '@tencentcloud/uikit-base-component-vue3';
 
 defineProps<{
   status: string;
@@ -10,12 +10,16 @@ defineProps<{
   <IconLoading
     v-if="status === 'unSend'"
     class="message-meta__status--unSend"
-    :size="16"
+    :size="14"
   />
   <IconSuccess
     v-else-if="status === 'success'"
     name="&#xe60a;"
-    :size="16"
+    :size="14"
+  />
+  <IconErrorToast
+    v-else-if="status === 'fail'"
+    :size="14"
   />
 </template>
 

package/src/components/BarrageList/Message/TextMessage/TextMessage.vue

@@ -218,13 +218,13 @@ const handleNickClick = (event: MouseEvent) => {
     letter-spacing: 0.1em;
 
     &__nick {
-      color: var(--text-color-link);
+      color: var(--uikit-color-theme-8);
       cursor: pointer;
     }
 
     &__nick:hover {
-      color: var(--text-color-link-active);
-      font-weight: 600;
+      // color: var(--text-color-link-active);
+      // font-weight: 600;
     }
 
     &__text {