Conversations Session Management Component 📱

Introduction

Conversations is a session management component developed based on Vue 3 and Element Plus, supporting grouped display, menu interaction, scroll loading, custom styles and other features. Suitable for message lists, file management, task grouping and other scenarios, it meets diverse business needs through flexible configuration and slot extensions.

Code Examples

Basic Usage

Get selected session information through @change event. v-model:active binds the currently selected session.

Time Grouping and Sticky Effect

today
yesterday
未分组

Time Grouping and Sticky Effect

Automatically groups by the group field of session items, group titles stick to top when scrolling, enhancing navigation experience.

Custom Group Sorting

📚 Study
📊 Work
🏠 Personal
📁 未分组

Custom Group Sorting

Pass sorting function through groupable property to customize group order (e.g.: Study > Work > Personal > Ungrouped).

vue

<script setup lang="ts">
import type { GroupableOptions } from 'vue-element-plus-x/types/Conversations';

const groupBasedItems = ref([
  {
    key: 'g1',
    label: 'Work Document 1',
    group: 'Work'
  },
  {
    key: 'g2',
    label: 'Work Document 11111111111111111111111111111111111111111',
    group: 'Work'
  },
  {
    key: 'g3',
    label: 'Work Document 3',
    group: 'Work'
  },
  {
    key: 'g4',
    label: 'Work Document 4',
    group: 'Work'
  },
  {
    key: 'g5',
    label: 'Work Document 5',
    group: 'Work'
  },
  {
    key: 'g6',
    label: 'Work Document 6',
    group: 'Work'
  },
  {
    key: 'g7',
    label: 'Study Notes 1',
    group: 'Study'
  },
  {
    key: 'g8',
    label: 'Study Notes 2',
    group: 'Study'
  },
  {
    key: 'g9',
    label: 'Personal Document 1',
    group: 'Personal'
  },
  {
    key: 'g10',
    label: 'Ungrouped Item'
  }
]);

// Custom group options
const customGroupOptions: GroupableOptions = {
  // Custom group sorting, Study > Work > Personal > Ungrouped
  sort: (a: any, b: any) => {
    const order: Record<string, number> = {
      Study: 0,
      Work: 1,
      Personal: 2,
      Ungrouped: 3
    };
    const orderA = order[a] !== undefined ? order[a] : 999;
    const orderB = order[b] !== undefined ? order[b] : 999;
    return orderA - orderB;
  }
};

const activeKey2 = ref('g1');
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; height: 420px">
    <Conversations
      v-model:active="activeKey2"
      :items="groupBasedItems"
      :groupable="customGroupOptions"
      :label-max-width="200"
      :show-tooltip="true"
      show-to-top-btn
      row-key="key"
    >
      <template #groupTitle="{ group }">
        <div class="custom-group-title">
          <!-- Add different prefixes for different groups -->
          <span v-if="group.title === 'Work'">📊 </span>
          <span v-else-if="group.title === 'Study'">📚 </span>
          <span v-else-if="group.title === 'Personal'">🏠 </span>
          <span v-else>📁 </span>
          {{ group.title }}
        </div>
      </template>
    </Conversations>
  </div>
</template>

<style scoped lang="less">
.custom-group-title {
  display: flex;
  align-items: center;
  font-weight: 500;
  color: #409eff;
}
</style>

Built-in Dropdown Menu

Built-in basic menu functionality (rename, delete), supports menu command callbacks, easily implements quick operations for session items.

@menu-command triggers built-in menu click events.

vue

<script setup lang="ts">
import type {
  ConversationItem,
  ConversationMenuCommand
} from 'vue-element-plus-x/types/Conversations';

const menuTestItems = ref([
  {
    key: 'm1',
    label:
      'Menu Test Item 1 - Long text effect demonstration text length overflow effect test'.repeat(
        2
      )
  },
  {
    key: 'm2',
    label: 'Menu Test Item 2',
    disabled: true
  },
  {
    key: 'm3',
    label: 'Menu Test Item 3'
  },
  {
    key: 'm4',
    label: 'Menu Test Item 4'
  },
  {
    key: 'm5',
    label: 'Menu Test Item 5'
  },
  {
    key: 'm6',
    label: 'Menu Test Item 6'
  },
  {
    key: 'm7',
    label: 'Menu Test Item 7'
  },
  {
    key: 'm8',
    label: 'Menu Test Item 8'
  },
  {
    key: 'm9',
    label: 'Menu Test Item 9'
  },
  {
    key: 'm10',
    label: 'Menu Test Item 10'
  },
  {
    key: 'm11',
    label: 'Menu Test Item 11'
  },
  {
    key: 'm12',
    label: 'Menu Test Item 12'
  },
  {
    key: 'm13',
    label: 'Menu Test Item 13'
  },
  {
    key: 'm14',
    label: 'Menu Test Item 14'
  }
]);

const activeKey4 = ref('m1');

// Built-in menu click method
function handleMenuCommand(
  command: ConversationMenuCommand,
  item: ConversationItem
) {
  console.log('Built-in menu click event:', command, item);
  // Whether directly modifying item takes effect
  if (command === 'delete') {
    const index = menuTestItems.value.findIndex(
      itemSlef => itemSlef.key === item.key
    );

    if (index !== -1) {
      menuTestItems.value.splice(index, 1);
      console.log('Delete successful');
      ElMessage.success('Delete successful');
    }
  }
  if (command === 'rename') {
    item.label = 'Modified';
    console.log('Rename successful');
    ElMessage.success('Rename successful');
  }
}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; height: 420px">
    <Conversations
      v-model:active="activeKey4"
      :items="menuTestItems"
      :label-max-width="200"
      :show-tooltip="true"
      row-key="key"
      tooltip-placement="right"
      :tooltip-offset="35"
      show-to-top-btn
      show-built-in-menu
      @menu-command="handleMenuCommand"
    />
  </div>
</template>

<style scoped lang="less"></style>

Custom Menu Interaction

Extend menu content through slots, supports icons, text and custom commands, meets complex business logic.

vue

<script setup lang="ts">
import { Delete, Edit, EditPen, Share } from '@element-plus/icons-vue';

const menuTestItems = ref([
  {
    key: 'm1',
    label:
      'Menu Test Item 1 - Long text effect demonstration text length overflow effect test'.repeat(
        2
      )
  },
  {
    key: 'm2',
    label: 'Menu Test Item 2',
    disabled: true
  },
  {
    key: 'm3',
    label: 'Menu Test Item 3'
  },
  {
    key: 'm4',
    label: 'Menu Test Item 4'
  },
  {
    key: 'm5',
    label: 'Menu Test Item 5'
  },
  {
    key: 'm6',
    label: 'Menu Test Item 6'
  },
  {
    key: 'm7',
    label: 'Menu Test Item 7'
  },
  {
    key: 'm8',
    label: 'Menu Test Item 8'
  },
  {
    key: 'm9',
    label: 'Menu Test Item 9'
  },
  {
    key: 'm10',
    label: 'Menu Test Item 10'
  },
  {
    key: 'm11',
    label: 'Menu Test Item 11'
  },
  {
    key: 'm12',
    label: 'Menu Test Item 12'
  },
  {
    key: 'm13',
    label: 'Menu Test Item 13'
  },
  {
    key: 'm14',
    label: 'Menu Test Item 14'
  }
]);

const conversationMenuItems = [
  {
    key: 'edit',
    label: 'Edit',
    icon: Edit,
    command: {
      self_id: '1',
      self_message: 'Edit',
      self_type: 'primary'
    }
  },
  {
    key: 'delete',
    label: 'Delete',
    icon: Delete,
    disabled: true,
    divided: true
  },
  {
    key: 'share',
    label: 'Share',
    icon: Share,
    command: 'share'
  }
];

const activeKey4 = ref('m1');

// Handle menu click
function handleMenuClick(menuKey: string, item: any) {
  console.log('Menu click', menuKey, item);

  switch (menuKey) {
    case 'edit':
      console.log(`Edit: ${item.label}`);
      ElMessage.warning(`Edit: ${item.label}`);
      break;
    case 'delete':
      console.log(`Delete: ${item.label}`);
      ElMessage.error(`Delete: ${item.label}`);
      break;
    case 'share':
      console.log(`Share: ${item.label}`);
      ElMessage.success(`Share: ${item.label}`);
      break;
  }
}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; height: 420px">
    <Conversations
      v-model:active="activeKey4"
      :items="menuTestItems"
      row-key="key"
      :label-max-width="200"
      :show-tooltip="true"
      show-to-top-btn
      show-built-in-menu
    >
      <template #more-filled>
        <el-icon>
          <EditPen />
        </el-icon>
      </template>

      <template #menu="{ item }">
        <div class="menu-buttons">
          <el-button
            v-for="menuItem in conversationMenuItems"
            :key="menuItem.key"
            link
            size="small"
            @click.stop="handleMenuClick(menuItem.key, item)"
          >
            <el-icon v-if="menuItem.icon">
              <component :is="menuItem.icon" />
            </el-icon>
            <span v-if="menuItem.label">{{ menuItem.label }}</span>
          </el-button>
        </div>
      </template>
    </Conversations>
  </div>
</template>

<style scoped lang="less">
.menu-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  padding: 12px;

  // Custom menu button-el-button styles
  .el-button {
    padding: 4px 8px;
    margin-left: 0;

    .el-icon {
      margin-right: 8px;
    }
  }
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171

Lazy Loading Feature

Automatically triggers loading more data when scrolling to bottom, supports loading state display, optimizes performance for large data scenarios.

vue

<script setup lang="ts">
import { ChatDotRound, ChatLineRound } from '@element-plus/icons-vue';

const lazyItems = shallowRef([
  {
    key: 'l1',
    label: 'Initial Item 1',
    prefixIcon: ChatLineRound
  },
  {
    key: 'l2',
    label: 'Initial Item 2',
    prefixIcon: ChatDotRound
  },
  {
    key: 'l3',
    label: 'Initial Item 3',
    prefixIcon: ChatLineRound
  },
  {
    key: 'l4',
    label: 'Initial Item 1',
    prefixIcon: ChatLineRound
  },
  {
    key: 'l5',
    label: 'Initial Item 2',
    prefixIcon: ChatDotRound
  },
  {
    key: 'l6',
    label: 'Initial Item 3',
    prefixIcon: ChatLineRound
  },
  {
    key: 'l7',
    label: 'Initial Item 1',
    prefixIcon: ChatLineRound
  },
  {
    key: 'l8',
    label: 'Initial Item 2',
    prefixIcon: ChatDotRound
  },
  {
    key: 'l9',
    label: 'Initial Item 3',
    prefixIcon: ChatLineRound
  }
]);

// Load more handling
const isLoading = ref(false);

function loadMoreItems() {
  if (isLoading.value)
    return;

  isLoading.value = true;
  console.log('Loading more data...');

  // Simulate async loading
  setTimeout(() => {
    const newItems = [
      {
        key: `l${lazyItems.value.length + 1}`,
        label: `Loaded Item ${lazyItems.value.length + 1}`,
        prefixIcon: markRaw(ChatLineRound)
      },
      {
        key: `l${lazyItems.value.length + 2}`,
        label: `Loaded Item ${lazyItems.value.length + 2}`,
        prefixIcon: markRaw(ChatDotRound)
      }
    ];

    lazyItems.value = [...lazyItems.value, ...newItems];
    isLoading.value = false;
  }, 2000);
}

const activeKey6 = ref('l1');
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; height: 420px">
    <Conversations
      v-model:active="activeKey6"
      :items="lazyItems"
      :label-max-width="200"
      row-key="key"
      :show-tooltip="true"
      :load-more="loadMoreItems"
      :load-more-loading="isLoading"
      show-to-top-btn
    />
  </div>
</template>

<style scoped lang="less"></style>

Custom Styles and Group Titles

📚 Study
Menu Test Item 4
Menu Test Item 5
Menu Test Item 6
Menu Test Item 7

📊 Work

Menu Test Item 1 - Long text effect demonstration text length overflow effect testMenu Test Item 1 - Long text effect demonstration text length overflow effect test

Menu Test Item 2

Menu Test Item 3

🏠 Personal

Menu Test Item 8

Menu Test Item 9

Menu Test Item 10

Menu Test Item 11

📁 未分组

Menu Test Item 12

Menu Test Item 13

Menu Test Item 14

Property Name	Type	Required	Default	Description
`items`	`ConversationItem<T>[]`	No	`[]`	Session item data list, containing `label`, `group`, `disabled` and other fields
`groupable`	`boolean \| GroupableOptions`	No	`false`	Whether to enable grouping, passing object can customize group sorting (`sort` function)
`showBuiltInMenu`	`boolean`	No	`false`	Whether to show built-in menu (rename, delete)
`loadMore`	`() => void`	No	-	Lazy loading callback function, triggered when scrolling to bottom
`loadMoreLoading`	`boolean`	No	`false`	Load more state, controls loading animation display
`showToTopBtn`	`boolean`	No	`false`	Whether to show back to top button
`labelKey`	`string`	No	`'label'`	Session item label field name
`rowKey`	`string`	No	`'id'`	Session item unique identifier field name
`itemsStyle`	`CSSProperties`	No	`{}`	Session item default style
`itemsHoverStyle`	`CSSProperties`	No	`{}`	Session item hover style
`itemsActiveStyle`	`CSSProperties`	No	`{}`	Session item active style
`itemsMenuOpenedStyle`	`CSSProperties`	No	`{}`	Session item style when menu is opened

Slot Name	Parameters	Description
`#groupTitle`	`{ group: GroupItem }`	Custom group title, supports adding icons or special styles
`#label`	`{ item: ConversationItem<T> }`	Custom session item label content, supports text overflow handling or rich text
`#more-filled`	`{ item, isHovered, isActive, isMenuOpened, isDisabled }`	Session item right side additional content, displays status indicators (e.g.: disabled mark, action icons)
`#menu`	`{ item: ConversationItem<T> }`	Custom menu content, supports buttons, icons or complex interactive components
`#header`	-	Container header slot, for adding search bars, filter buttons and other custom content
`#footer`	-	Container footer slot, for adding pagination, statistics and other custom content

Event	Parameters	Description
`@menuCommand`	`(command: ConversationMenuCommand, item: ConversationItem): void`	Menu command callback, supports rename, delete and other operations. If you choose custom menu, this method is disabled, you need to handle menu click logic yourself.
`:loadMore`	--	Bind lazy loading callback, triggered when scrolling to bottom

Conversations Session Management Component 📱

Introduction

Code Examples

Basic Usage

Time Grouping and Sticky Effect

Custom Group Sorting

Custom Menu Interaction

Lazy Loading Feature

Custom Styles and Group Titles

Properties

Slots

Events

Features

Conversations Session Management Component 📱 ​

Introduction ​

Code Examples ​

Basic Usage ​

Time Grouping and Sticky Effect ​

Custom Group Sorting ​

Built-in Dropdown Menu ​

Custom Menu Interaction ​

Lazy Loading Feature ​

Custom Styles and Group Titles ​

Properties ​

Slots ​

Events ​

Features ​

Conversations Session Management Component 📱

Introduction

Code Examples

Basic Usage

Time Grouping and Sticky Effect

Custom Group Sorting

Built-in Dropdown Menu

Custom Menu Interaction

Lazy Loading Feature

Custom Styles and Group Titles

Properties

Slots

Events

Features