tuikit-atomicx-vue3 0.1.0

package/src/components/MessageInput/TextEditor/TextEditor.module.scss

@@ -0,0 +1,25 @@
+.input-wrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  min-width: 0;
+  user-select: none;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--text-color-primary);
+
+  &.disabled {
+    cursor: not-allowed;
+  }
+}
+
+.input-prefix,
+.input-suffix {
+  display: flex;
+  align-items: center;
+}
+
+.editor {
+  flex: 1;
+  display: flex;
+}

package/src/components/MessageInput/TextEditor/TextEditor.vue

@@ -0,0 +1,90 @@
+<template>
+  <div :class="[styles['input-wrapper'], props.disabled && styles.disabled]">
+    <div :class="styles['input-prefix']">
+      <slot name="prefix"></slot>
+    </div>
+    <div ref="editorRef" :class="styles['editor']"></div>
+    <div :class="styles['input-suffix']">
+      <slot name="suffix"></slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, computed, watch } from 'vue';
+import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { useConversationListState } from '../../../states/ConversationListState';
+import { useMessageInputState } from '../../../states/MessageInputState';
+import { createEditor } from './EditorCore';
+import styles from './TextEditor.module.scss';
+import type { Editor } from './EditorCore';
+
+interface ITextEditorProps {
+  autoFocus?: boolean;
+  disabled?: boolean;
+  placeholder?: string;
+}
+
+const props = withDefaults(defineProps<ITextEditorProps>(), {
+  autoFocus: true,
+  disabled: false,
+  placeholder: '',
+});
+
+const { t } = useUIKit();
+const { currentConversationID } = useConversationListState();
+const { updateRawValue, sendMessage, setEditorInstance, setContent } = useMessageInputState();
+
+const editorRef = ref<HTMLDivElement | null>(null);
+const isFocused = ref(props.autoFocus);
+
+const placeholderText = computed(() => (props.disabled ? '' : props.placeholder || t('TUIChat.Enter a message')));
+
+let editorInstance: Editor | null = null;
+
+onMounted(() => {
+  const element = editorRef.value;
+  if (!element) {
+    return;
+  }
+
+  if (!element.dataset.editorCreated) {
+    editorInstance = createEditor({
+      element,
+      placeholder: placeholderText.value,
+      autoFocus: props.autoFocus,
+      disabled: props.disabled,
+      onUpdate: content => {
+        updateRawValue(content);
+      },
+      onEnter: () => {
+        sendMessage();
+        setContent('');
+      },
+      onFocus: () => {
+        isFocused.value = true;
+      },
+      onBlur: () => {
+        isFocused.value = false;
+      },
+    });
+    element.dataset.editorCreated = 'true';
+    setEditorInstance(editorInstance);
+  }
+});
+
+onUnmounted(() => {
+  const element = editorRef.value;
+  if (editorInstance && element) {
+    editorInstance.destroy();
+    element.removeAttribute('data-editor-created');
+    setEditorInstance(null);
+  }
+});
+
+watch(currentConversationID, (newID, oldID) => {
+  if (newID !== oldID) {
+    setContent('');
+  }
+});
+</script>

package/src/components/MessageInput/TextEditor/index.ts

@@ -0,0 +1,5 @@
+import TextEditor from './TextEditor.vue';
+
+export {
+  TextEditor,
+};

package/src/components/MessageInput/index.ts

@@ -0,0 +1,14 @@
+import { AttachmentPicker, FilePicker, ImagePicker, VideoPicker } from './AttachmentPicker';
+import { EmojiPicker } from './EmojiPicker';
+import { TextEditor } from './TextEditor';
+import MessageInput from './MessageInput.vue';
+
+export {
+  TextEditor,
+  MessageInput,
+  EmojiPicker,
+  AttachmentPicker,
+  FilePicker,
+  ImagePicker,
+  VideoPicker,
+};

package/src/components/MessageInput/types.d.ts

@@ -0,0 +1,42 @@
+import type { Component, CSSProperties } from 'vue';
+
+type BuiltInAction =
+  | 'EmojiPicker'
+  | 'ImagePicker'
+  | 'FilePicker'
+  | 'VideoPicker'
+  | 'AttachmentPicker';
+
+export type CustomAction = {
+  key: string;
+  label?: string | undefined;
+  component?: Component | undefined;
+  className?: string | undefined;
+  style?: CSSProperties | undefined;
+  iconSize?: number | undefined;
+};
+
+export type MessageInputActions = Array<BuiltInAction | CustomAction>;
+
+export type MessageInputAttachmentPickerMode = 'collapsed' | 'expanded';
+
+export interface IMessageInputProps {
+  autoFocus?: boolean;
+  disabled?: boolean;
+  hideSendButton?: boolean;
+  placeholder?: string;
+  className?: string;
+  style?: CSSProperties;
+  attachmentPickerMode?: MessageInputAttachmentPickerMode;
+  actions?: MessageInputActions;
+  slots?: MessageInputSlots;
+}
+
+export interface MessageInputSlots {
+  headerToolbar?: () => VNode[];
+  footerToolbar?: () => VNode[];
+  leftInline?: () => VNode[];
+  rightInline?: () => VNode[];
+  inputPrefix?: () => VNode[];
+  inputSuffix?: () => VNode[];
+}

package/src/components/MessageList/Message/AudioMessage/AudioMessage.vue

@@ -0,0 +1,92 @@
+<template>
+  <View class="audio-message">
+    <View class="audio-message__content">
+      <PlayButton
+        :is-playing="isPlaying"
+        @click="isPlaying ? pause() : play()"
+      />
+      <WaveForm
+        :progress="progress"
+        :bars-count="barCount"
+        @seek="setProgress"
+      />
+      <View class="audio-message__duration">
+        {{ formatDuration(messageContent.second) }}
+      </View>
+    </View>
+  </View>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { View } from '../../../../baseComp/View';
+import { useAudioControl } from '../../../../hooks/useAudioControl';
+import PlayButton from './PlayButton.vue';
+import WaveForm from './WaveForm.vue';
+import type { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+
+interface IAudioMessageProps {
+  message: IMessageModel;
+}
+
+interface IAudioMessageContent {
+  url: string;
+  second: number;
+}
+
+const props = defineProps<IAudioMessageProps>();
+
+const messageContent = computed(() => props.message.getMessageContent() as IAudioMessageContent);
+const barCount = computed(() => {
+  const count = messageContent.value.second;
+  if (count <= 5) {
+    return 10;
+  }
+  if (count <= 10) {
+    return 14;
+  }
+  return 18;
+});
+
+// Generate unique ID
+const audioId = computed(() => `audio-${props.message.ID}`);
+
+// Use audio control hook
+const {
+  isPlaying,
+  progress,
+  play,
+  pause,
+  setProgress,
+} = useAudioControl({
+  url: messageContent.value.url,
+  audioId: audioId.value,
+});
+
+// Format audio duration
+const formatDuration = (seconds: number): string => {
+  const minutes = Math.floor(seconds / 60);
+  const remainingSeconds = Math.floor(seconds % 60);
+  return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
+};
+</script>
+
+<style lang="scss" scoped>
+.audio-message {
+  padding: 8px 16px;
+
+  &__content {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 12px;
+  }
+
+  &__duration {
+    flex-shrink: 0;
+    font-size: 14px;
+    color: #999;
+    min-width: 36px;
+  }
+}
+</style>

package/src/components/MessageList/Message/AudioMessage/PlayButton.vue

@@ -0,0 +1,83 @@
+<template>
+  <button
+    class="play-button"
+    :class="{ 'play-button--playing': isPlaying }"
+    @click="onClick"
+  >
+    <svg
+      v-if="isPlaying"
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <rect x="6" y="4" width="4" height="16" />
+      <rect x="14" y="4" width="4" height="16" />
+    </svg>
+    <svg
+      v-else
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="play-button__play-icon"
+    >
+      <polygon points="5 3 19 12 5 21 5 3" />
+    </svg>
+  </button>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  isPlaying: boolean | undefined;
+}>();
+
+const emit = defineEmits<{
+  (e: 'click'): void;
+}>();
+
+const onClick = () => {
+  emit('click');
+};
+</script>
+
+<style lang="scss" scoped>
+.play-button {
+  flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: none;
+  background-color: #4080ff;
+  color: white;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background-color: #3070ee;
+  }
+
+  &__play-icon {
+    margin-left: 2px;
+  }
+
+  &--playing {
+    svg {
+      margin-left: 0;
+    }
+  }
+}
+</style>

package/src/components/MessageList/Message/AudioMessage/WaveForm.vue

@@ -0,0 +1,114 @@
+<template>
+  <div
+    class="wave-form"
+    @click="handleClick"
+    :style="waveFormStyle"
+  >
+    <div
+      v-for="(height, index) in waveBarHeights"
+      :key="index"
+      class="wave-form__bar"
+      :class="{ 'wave-form__bar--active': isBarActive(index) }"
+      :style="{ height: `${height}px` }"
+    />
+    <div
+      class="wave-form__cursor"
+      :style="cursorStyle"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, onMounted } from 'vue';
+
+interface WaveFormProps {
+  progress: number | undefined;
+  barsCount?: number;
+  width?: string | number;
+}
+
+const props = withDefaults(defineProps<WaveFormProps>(), {
+  barsCount: 30,
+  width: '100%'
+});
+
+const emit = defineEmits<{
+  (e: 'seek', progress: number): void;
+}>();
+
+// Calculate wave form container style
+const waveFormStyle = computed(() => ({
+  width: typeof props.width === 'number' ? `${props.width}px` : props.width
+}));
+
+// Generate fixed wave bar heights array to avoid height changes on re-render
+const waveBarHeights = ref<number[]>([]);
+
+// Generate random heights on component mount and keep them constant during component lifecycle
+onMounted(() => {
+  const heights = [];
+  for (let i = 0; i < props.barsCount; i++) {
+    // Generate random heights between 8px and 24px
+    heights.push(Math.random() * 16 + 8);
+  }
+  waveBarHeights.value = heights;
+});
+
+// Check if wave bar is active
+const isBarActive = (index: number) => {
+  const barProgress = (index + 1) / props.barsCount;
+  return (props.progress || 0) >= barProgress;
+};
+
+// Calculate cursor position style
+const cursorStyle = computed(() => ({
+  left: `${(props.progress || 0) * 100}%`
+}));
+
+// Handle click event, calculate new progress
+const handleClick = (event: MouseEvent) => {
+  const waveElement = event.currentTarget as HTMLElement;
+  const rect = waveElement.getBoundingClientRect();
+  const offsetX = event.clientX - rect.left;
+  const newProgress = offsetX / rect.width;
+  
+  // Ensure progress value is between 0-1
+  const validProgress = Math.max(0, Math.min(1, newProgress));
+  emit('seek', validProgress);
+};
+</script>
+
+<style lang="scss" scoped>
+.wave-form {
+  position: relative;
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 2px;
+  height: 24px;
+  cursor: pointer;
+  padding: 0 2px;
+
+  &__bar {
+    flex: 1;
+    width: 3px;
+    background-color: rgba(0, 0, 0, 10%);
+    border-radius: 1.5px;
+    transition: background-color 0.2s ease;
+
+    &--active {
+      background-color: #4080ff;
+    }
+  }
+
+  &__cursor {
+    position: absolute;
+    top: 0;
+    width: 2px;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 20%);
+    pointer-events: none;
+  }
+}
+</style>

package/src/components/MessageList/Message/AudioMessage/index.ts

@@ -0,0 +1,3 @@
+import AudioMessage from './AudioMessage.vue';
+
+export { AudioMessage };

package/src/components/MessageList/Message/CustomMessage/CustomMessage.vue

@@ -0,0 +1,7 @@
+<script lang="ts" setup>
+// TODO
+</script>
+
+<template>
+  [Custom Message]
+</template>

package/src/components/MessageList/Message/CustomMessage/index.ts

@@ -0,0 +1,3 @@
+import CustomMessage from './CustomMessage.vue';
+
+export { CustomMessage };

package/src/components/MessageList/Message/FaceMessage/FaceMessage.vue

@@ -0,0 +1,43 @@
+<template>
+  <div :class="cs('face-message')">
+    <img
+      :src="messageContent.url"
+      :alt="messageContent.name"
+    >
+  </div>
+</template>
+
+<script lang="ts" setup>
+import cs from 'classnames';
+import type { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+
+interface IFaceMessageProps {
+  message: IMessageModel;
+}
+
+interface IFaceMessageContent {
+  /** sender show name */
+  showName: string;
+  /** face image name [yz00@2x] */
+  name: string;
+  /** face image type[duplicate] */
+  type: string;
+  /** face image url */
+  url: string;
+}
+
+const props = withDefaults(defineProps<IFaceMessageProps>(), {
+  message: () => ({} as IMessageModel),
+});
+
+const messageContent = props.message.getMessageContent() as IFaceMessageContent;
+</script>
+
+<style lang="scss" scoped>
+.face-message {
+  // Face message styles will be implemented here
+  width: 150px;
+  height: 150px;
+  padding: 10px;
+}
+</style>

package/src/components/MessageList/Message/FaceMessage/index.ts

@@ -0,0 +1,3 @@
+import FaceMessage from './FaceMessage.vue';
+
+export { FaceMessage };

package/src/components/MessageList/Message/FileMessage/FileMessage.vue

@@ -0,0 +1,145 @@
+<script lang="ts" setup>
+import {
+  IconFile,
+  IconDownload,
+  TUIToast,
+  useUIKit,
+} from '@tencentcloud/uikit-base-component-vue3';
+import cs from 'classnames';
+import { View } from '../../../../baseComp/View';
+import type { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+
+interface IFileMessageProps {
+  message: IMessageModel;
+}
+
+interface IFileMessageContent {
+  /** sender show name */
+  showName: string;
+  /** file name */
+  name: string;
+  /** file type */
+  type: string;
+  /** file size */
+  size: string;
+  /** file url */
+  url: string;
+}
+
+const { t } = useUIKit();
+
+const props = withDefaults(defineProps<IFileMessageProps>(), {
+  message: () => ({} as IMessageModel),
+});
+
+const messageContent = props.message.getMessageContent() as IFileMessageContent;
+
+const handleFileClick = async (event: MouseEvent) => {
+  // If ctrl key (Windows) or command key (Mac) is pressed, open in new tab
+  if (event.metaKey || event.ctrlKey) {
+    window.open(messageContent.url, '_blank');
+  } else {
+    try {
+      event.preventDefault();
+
+      const response = await fetch(messageContent.url);
+      if (!response.ok) {
+        throw new Error('Download failed');
+      }
+
+      const blob = await response.blob();
+      const blobUrl = window.URL.createObjectURL(blob);
+
+      const link = document.createElement('a');
+      link.href = blobUrl;
+      link.download = messageContent.name;
+      link.click();
+
+      // Clean up blob url
+      window.URL.revokeObjectURL(blobUrl);
+    } catch {
+      TUIToast.error({
+        message: t('TUIChat.Download failed'),
+      });
+    }
+  }
+};
+</script>
+
+<template>
+  <View
+    :class="cs('file-message')"
+    @click="handleFileClick"
+  >
+    <View class="file-message__icon">
+      <IconFile />
+    </View>
+    <View class="file-message__middle">
+      <View class="file-message__name">
+        {{ messageContent.name }}
+      </View>
+      <View class="file-message__size">
+        {{ messageContent.size }}
+      </View>
+    </View>
+    <View class="file-message__download">
+      <IconDownload />
+    </View>
+  </View>
+</template>
+
+<style lang="scss" scoped>
+@use '../../../../styles/mixins/text' as text;
+
+.file-message {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: var(--background-color-secondary);
+  border-radius: 8px;
+  gap: 12px;
+  padding: 12px;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  max-width: 250px;
+
+  &__icon {
+    flex-shrink: 0;
+    color: var(--text-color-primary);
+  }
+
+  &__download {
+    flex-shrink: 0;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+    color: var(--text-color-primary);
+  }
+
+  &:hover {
+    .file-message__download {
+      opacity: 1;
+    }
+  }
+
+  &__middle {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  &__name {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--text-color-primary);
+
+    @include text.text-ellipsis;
+  }
+
+  &__size {
+    font-size: 12px;
+    color: var(--text-color-secondary);
+  }
+}
+</style>

package/src/components/MessageList/Message/FileMessage/index.ts

@@ -0,0 +1,3 @@
+import FileMessage from './FileMessage.vue';
+
+export { FileMessage };