tuikit-atomicx-vue3 0.1.0 → 0.1.1

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

@@ -1,12 +1,21 @@
 <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>
@@ -24,6 +33,7 @@ interface ITextEditorProps {
   autoFocus?: boolean;
   disabled?: boolean;
   placeholder?: string;
+  maxLength?: number;
 }
 
 const props = withDefaults(defineProps<ITextEditorProps>(), {
@@ -37,7 +47,7 @@ const emit = defineEmits<{
   (e: 'blur'): void;
 }>();
 const { t } = useUIKit();
-const { currentConversationID } = useConversationListState();
+const { activeConversation } = useConversationListState();
 const { updateRawValue, sendMessage, setEditorInstance, setContent } = useMessageInputState();
 
 const editorRef = ref<HTMLDivElement | null>(null);
@@ -47,18 +57,19 @@ 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: () => {
@@ -96,7 +107,7 @@ watch(
         createEditorInstance(props);
       }
     }
-  }
+  },
 );
 
 onMounted(() => {
@@ -107,8 +118,8 @@ onUnmounted(() => {
   destroyEditorInstance();
 });
 
-watch(currentConversationID, (newID, oldID) => {
-  if (newID !== oldID) {
+watch(activeConversation, (newConversation, oldConversation) => {
+  if (newConversation?.conversationID !== oldConversation?.conversationID) {
     setContent('');
   }
 });

package/src/components/ChatSetting/C2CChatSetting/C2CChatSetting.vue

@@ -0,0 +1,223 @@
+<script lang="ts" setup>
+import { IconCopy, TUIToast, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { useC2CSettingState } from '../../../states/C2CSettingState';
+import { copyTextToClipboard } from '../../../utils';
+import { Avatar } from '../../Avatar';
+import { SettingItem } from '../SettingItem';
+
+const { t } = useUIKit();
+
+const {
+  userID,
+  nick,
+  avatar,
+  signature,
+  remark,
+  isMuted,
+  isPinned,
+  setChatPinned,
+  setChatMuted,
+  setUserRemark,
+} = useC2CSettingState();
+
+function handlePinnedChange(value: boolean) {
+  setChatPinned(value);
+}
+
+function handleMutedChange(value: boolean) {
+  setChatMuted(value);
+}
+
+function handleRemarkConfirm(value: string) {
+  setUserRemark(value);
+  TUIToast.success({
+    message: t('ChatSetting.remark_update_success'),
+  });
+}
+
+function handleCopyUserID() {
+  if (userID.value) {
+    copyTextToClipboard(userID.value).then(() => {
+      TUIToast.success({
+        message: t('ChatSetting.copied'),
+      });
+    });
+  }
+}
+</script>
+
+<template>
+  <div
+    v-if="userID"
+    class="c2c-chat-setting"
+  >
+    <!-- User Info Section -->
+    <div class="c2c-chat-setting__info-section">
+      <div class="c2c-chat-setting__avatar-section">
+        <Avatar
+          :src="avatar || ''"
+          size="xxl"
+          class="c2c-chat-setting__avatar"
+        />
+      </div>
+
+      <!-- User ID -->
+      <div class="c2c-chat-setting__item">
+        <div class="c2c-chat-setting__label">
+          {{ t('ChatSetting.user_id') }}
+        </div>
+        <div class="c2c-chat-setting__content">
+          <div class="c2c-chat-setting__value">
+            {{ userID }}
+          </div>
+          <IconCopy
+            class="c2c-chat-setting__copy-btn"
+            @click="handleCopyUserID"
+          />
+        </div>
+      </div>
+
+      <!-- Nick Name -->
+      <SettingItem
+        type="display"
+        :label="t('ChatSetting.nickname')"
+        :value="nick || ''"
+        :placeholder="t('ChatSetting.nickname_placeholder')"
+      />
+
+      <!-- Signature -->
+      <SettingItem
+        v-if="signature && signature.trim()"
+        type="display"
+        :label="t('ChatSetting.signature')"
+        :value="signature"
+      />
+    </div>
+
+    <!-- Remark Section -->
+    <div class="c2c-chat-setting__remark-section">
+      <SettingItem
+        type="input"
+        :label="t('ChatSetting.remark')"
+        :value="remark ?? ''"
+        :placeholder="t('ChatSetting.remark_placeholder')"
+        :editable="true"
+        @confirm="handleRemarkConfirm"
+      />
+    </div>
+
+    <!-- Settings Section -->
+    <div class="c2c-chat-setting__settings-section">
+      <!-- Pin Setting -->
+      <SettingItem
+        v-if="isPinned !== undefined"
+        type="switch"
+        :label="t('ChatSetting.pin_conversation')"
+        :value="isPinned"
+        @change="handlePinnedChange"
+      />
+
+      <!-- Mute Setting -->
+      <SettingItem
+        v-if="isMuted !== undefined"
+        type="switch"
+        :label="t('ChatSetting.mute_conversation')"
+        :value="isMuted"
+        @change="handleMutedChange"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.c2c-chat-setting {
+  display: flex;
+  flex-direction: column;
+  background-color: transparent;
+  gap: 16px;
+  padding: 20px;
+
+  color: var(--text-color-primary);
+
+  &__info-section {
+    gap: 20px;
+    display: flex;
+    flex-direction: column;
+    background-color: transparent;
+  }
+
+  &__avatar-section {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &__item {
+    display: flex;
+    flex-direction: column;
+
+    border-bottom: 0.5px solid var(--stroke-color-module);
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  &__label {
+    font-size: 14px;
+    font-weight: 500;
+    margin-bottom: 8px;
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+  }
+
+  &__value {
+    flex: 1;
+    font-size: 14px;
+    word-break: break-word;
+    white-space: pre-wrap;
+
+    color: var(--text-color-secondary);
+  }
+
+  &__copy-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px;
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+    border-radius: 6px;
+    transition: all 0.2s ease;
+    flex-shrink: 0;
+
+    color: var(--text-color-secondary);
+    &:hover {
+      color: var(--text-color-button);
+      background-color: var(--button-color-primary-hover);
+    }
+    &:active {
+      background-color: var(--button-color-primary-active);
+    }
+  }
+
+  &__remark-section {
+    display: flex;
+    flex-direction: column;
+    background-color: transparent;
+  }
+
+  &__settings-section {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+  }
+}
+</style>

package/src/components/ChatSetting/C2CChatSetting/index.ts

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

package/src/components/ChatSetting/ChatSetting.vue

@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { TUIChatEngine } from '@tencentcloud/chat-uikit-engine';
+import { useConversationListState } from '../../states/ConversationListState';
+import { useUIOpenControlState } from '../../states/UIOpenControlState';
+import { C2CChatSetting } from './C2CChatSetting';
+import { GroupChatSetting } from './GroupChatSetting';
+
+const { currentConversation: activeConversation } = useConversationListState();
+const { isChatSettingOpen } = useUIOpenControlState();
+// Constants for conversation types
+const { TYPES } = TUIChatEngine;
+const { CONV_C2C, CONV_GROUP } = TYPES;
+
+const chatType = computed(() => activeConversation?.value?.type);
+</script>
+
+<template>
+  <div
+    v-if="activeConversation && isChatSettingOpen"
+    class="chat-setting"
+  >
+    <!-- C2C Chat Setting -->
+    <C2CChatSetting v-if="chatType === CONV_C2C" />
+    <!-- Group Chat Setting -->
+    <GroupChatSetting v-else-if="chatType === CONV_GROUP" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@use '../../styles/mixins' as mixins;
+
+.chat-setting {
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+
+  background-color: var(--bg-color-operate);
+  border-left: 1px solid var(--stroke-color-primary);
+
+  @include mixins.scrollbar-hidden();
+}
+</style>

package/src/components/ChatSetting/GroupChatSetting/GroupActions/GroupActions.vue

@@ -0,0 +1,204 @@
+<template>
+  <div
+    :class="[
+      'group-actions',
+    ]"
+  >
+    <!-- Change group owner button - only for group owner -->
+    <TUIButton
+      v-if="canChangeGroupOwner"
+      class="group-actions__button"
+      radius="rect"
+      :disabled="loading"
+      @click="handleChangeGroupOwner"
+    >
+      {{ t('ChatSetting.transfer_group_owner') }}
+    </TUIButton>
+
+    <!-- Quit group button -->
+    <TUIButton
+      v-if="canQuitGroup"
+      class="group-actions__button"
+      color="red"
+      radius="rect"
+      @click="() => isShowQuitDialog = true"
+    >
+      {{ t('ChatSetting.quit_group') }}
+    </TUIButton>
+
+    <!-- Dismiss group button - only for group owner -->
+    <TUIButton
+      v-if="canDismissGroup"
+      class="group-actions__button"
+      color="red"
+      radius="rect"
+      @click="() => isShowDismissDialog = true"
+    >
+      {{ t('ChatSetting.dismiss_group') }}
+    </TUIButton>
+
+    <!-- Transfer Group Owner Dialog -->
+    <TUIDialog
+      :visible="isShowTransferDialog"
+      :title="t('ChatSetting.transfer_group_owner')"
+      :custom-classes="['user-picker-dialog']"
+      @close="() => isShowTransferDialog = false"
+      @cancel="() => isShowTransferDialog = false"
+      @confirm="handleTransferConfirm"
+    >
+      <UserPicker
+        ref="userPickerRef"
+        display-mode="list"
+        :data-source="transferDataSource"
+        :locked-items="[{ key: currentUserID! }]"
+        :max-count="1"
+        @max-count-exceed="() => {
+          TUIToast.error({
+            message: t('ChatSetting.only_one_owner_error'),
+          });
+        }"
+      />
+    </TUIDialog>
+
+    <!-- Dismiss Group Dialog -->
+    <TUIDialog
+      :visible="isShowDismissDialog"
+      :title="t('ChatSetting.dismiss_group')"
+      @close="() => isShowDismissDialog = false"
+      @cancel="() => isShowDismissDialog = false"
+      @confirm="handleDismissGroup"
+    />
+
+    <!-- Quit Group Dialog -->
+    <TUIDialog
+      :visible="isShowQuitDialog"
+      :title="t('ChatSetting.quit_group')"
+      @close="() => isShowQuitDialog = false"
+      @cancel="() => isShowQuitDialog = false"
+      @confirm="handleQuitGroup"
+    >
+      <div>
+        {{ t('ChatSetting.confirm_quit_group') }}
+      </div>
+    </TUIDialog>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from 'vue';
+import { TUIButton, TUIDialog, TUIToast, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { useGroupSettingState, GroupPermission } from '../../../../states/GroupSettingState';
+import { UserPicker } from '../../../UserPicker';
+import type { IUserPickerRef } from '../../../UserPicker';
+
+const { t } = useUIKit();
+
+const {
+  allMembers,
+  currentUserID,
+  dismissGroup,
+  quitGroup,
+  hasPermission,
+  changeGroupOwner,
+} = useGroupSettingState();
+
+const isShowTransferDialog = ref(false);
+const isShowDismissDialog = ref(false);
+const isShowQuitDialog = ref(false);
+const loading = ref(false);
+
+const userPickerRef = ref<IUserPickerRef>();
+
+// Check permissions for different actions
+const canDismissGroup = computed(() => hasPermission(GroupPermission.DISMISS_GROUP));
+const canQuitGroup = computed(() => hasPermission(GroupPermission.QUIT_GROUP));
+const canChangeGroupOwner = computed(() => hasPermission(GroupPermission.TRANSFER_OWNERSHIP));
+
+// Handle change group owner
+const handleChangeGroupOwner = () => {
+  isShowTransferDialog.value = true;
+};
+
+// Handle transfer confirm
+const handleTransferConfirm = async () => {
+  const selectedItems = userPickerRef.value?.getSelectedItems();
+  if (!selectedItems || selectedItems.length === 0) {
+    TUIToast.error({
+      message: t('ChatSetting.select_new_owner_error'),
+    });
+    return;
+  }
+
+  if (selectedItems.length > 1) {
+    TUIToast.error({
+      message: t('ChatSetting.only_one_owner_error'),
+    });
+    return;
+  }
+
+  const newOwnerID = selectedItems[0].key;
+
+  try {
+    loading.value = true;
+    await changeGroupOwner({ newOwnerID });
+    TUIToast.success({
+      message: t('ChatSetting.transfer_owner_success'),
+    });
+    isShowTransferDialog.value = false;
+  } catch {
+    TUIToast.error({
+      message: t('ChatSetting.transfer_owner_failed'),
+    });
+  } finally {
+    loading.value = false;
+  }
+};
+
+// Get available members for transfer (exclude current user and owner)
+const transferDataSource = computed(() => {
+  if (!allMembers.value) {
+    return [];
+  }
+
+  return allMembers.value
+    .map((member) => {
+      let label = member.nick || member.userID;
+      if (label.length > 20) {
+        label = `${label.slice(0, 20)}...`;
+      }
+      label = `${label} (${t(`ChatSetting.group_member_role_${member.role.toLowerCase()}`)})`;
+
+      if (member.userID === currentUserID.value) {
+        label = `${label} (${t('ChatSetting.me')})`;
+      }
+
+      return {
+        key: member.userID,
+        label,
+        avatarUrl: member.avatar,
+      };
+    });
+});
+
+// Handle quit group
+const handleQuitGroup = () => {
+  quitGroup();
+};
+
+// Handle dismiss group
+const handleDismissGroup = () => {
+  dismissGroup();
+};
+</script>
+
+<style lang="scss" scoped>
+.group-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  &__button {
+    width: 100%;
+  }
+}
+</style>

package/src/components/ChatSetting/GroupChatSetting/GroupActions/index.ts

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