master: 添加会话模块及界面改进

- 新增 ChatView 页面及其逻辑设计 - 修改 App.vue 以支持动态会话标题 - 调整 Sidebar 为固定高度及改进滚动样式 - 优化会话分页，添加 lastPage 逻辑 - 在 SessionSidebar 中实现刷新操作和路由同步 - 更新路由配置，添加 chat 相关路径 - 添加单元测试以覆盖新逻辑
2025-12-14 20:22:06 +08:00
parent 0959754d1e
commit b107a5e680
5 changed files with 781 additions and 51 deletions
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,9 +11,10 @@ const menus = [
 ]

 const isAuthRoute = computed(() => route.name === 'login')
-const activeMenuLabel = computed(
-  () => menus.find((m) => m.name === route.name)?.label || '控制台'
-)
+const activeMenuLabel = computed(() => {
+  if (route.name === 'chat') return '会话'
+  return menus.find((m) => m.name === route.name)?.label || '控制台'
+})
 const miniMenuOpen = ref(false)
 </script>

@@ -30,15 +31,9 @@ const miniMenuOpen = ref(false)
      <section class="main">
        <header class="topbar">
          <div class="top-title">{{ activeMenuLabel }}</div>
-          <div class="top-meta">会话列表常驻左侧，Apple 风格控制台</div>
-        </header>
-        <div class="page">
-          <router-view />
-        </div>
-      </section>
          <el-popover
            v-model:visible="miniMenuOpen"
-        placement="top-start"
+            placement="bottom-end"
            trigger="click"
            popper-class="mini-popper"
          >
@@ -61,6 +56,11 @@ const miniMenuOpen = ref(false)
              </button>
            </template>
          </el-popover>
+        </header>
+        <div class="page">
+          <router-view />
+        </div>
+      </section>
    </div>
  </div>
 </template>
@@ -122,19 +122,11 @@ const miniMenuOpen = ref(false)
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
 }

-.top-meta {
-  color: #6b7280;
-  font-size: 14px;
-}
-
 .page {
  min-height: calc(100vh - 140px);
 }

 .mini-btn {
-  position: fixed;
-  left: 18px;
-  bottom: 18px;
  height: 46px;
  padding: 0 12px;
  border-radius: 12px;
@@ -147,6 +139,7 @@ const miniMenuOpen = ref(false)
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  color: #111827;
+  min-width: 104px;
 }

 .mini-btn:hover {
--- a/src/components/SessionSidebar.vue
+++ b/src/components/SessionSidebar.vue
@@ -11,17 +11,16 @@ const router = useRouter()
 const sessions = ref([])
 const loading = ref(false)
 const errorMessage = ref('')
-const canLoadMore = computed(
-  () => pagination.page * pagination.perPage < pagination.total
-)
+const canLoadMore = computed(() => pagination.page < pagination.lastPage)
 const filters = reactive({
  q: '',
  status: 'OPEN',
 })
 const pagination = reactive({
  page: 1,
-  perPage: 20,
+  perPage: 10,
  total: 0,
+  lastPage: 1,
 })
 const currentSessionId = ref(localStorage.getItem('ars-current-session') || '')

@@ -53,9 +52,19 @@ const fetchSessions = async ({ append = false } = {}) => {
    })
    const list = data.data || []
    sessions.value = append ? [...sessions.value, ...list] : list
-    pagination.total = data.total || 0
-    pagination.page = data.current_page || pagination.page
-    pagination.perPage = data.per_page || pagination.perPage
+    const meta = data.meta || {}
+    const total = meta.total ?? data.total ?? list.length
+    const currentPage = meta.current_page ?? data.current_page ?? pagination.page
+    const perPage =
+      meta.per_page ?? data.per_page ?? pagination.perPage ?? 10
+    const lastPage =
+      meta.last_page ??
+      data.last_page ??
+      (perPage ? Math.ceil(total / perPage) || 1 : 1)
+    pagination.total = total
+    pagination.page = currentPage
+    pagination.perPage = perPage
+    pagination.lastPage = lastPage
  } catch (err) {
    const status = err.response?.status
    const message = err.response?.data?.message || '获取会话列表失败'
@@ -71,6 +80,9 @@ const selectSession = (session) => {
  currentSessionId.value = session.session_id
  localStorage.setItem('ars-current-session', session.session_id)
  ElMessage.success(`已切换到会话：${session.session_name || '未命名'}`)
+  if (router.currentRoute.value.params.id !== session.session_id) {
+    router.push({ name: 'chat', params: { id: session.session_id } })
+  }
 }

 const handleCreated = (session) => {
@@ -83,12 +95,20 @@ const handleCreated = (session) => {
    }
    currentSessionId.value = session.session_id
    localStorage.setItem('ars-current-session', session.session_id)
+    router.push({ name: 'chat', params: { id: session.session_id } })
  }
  fetchSessions()
 }

 const handleSearch = () => {
  pagination.page = 1
+  pagination.lastPage = 1
+  fetchSessions()
+}
+
+const refreshList = () => {
+  pagination.page = 1
+  pagination.lastPage = 1
  fetchSessions()
 }

@@ -132,7 +152,8 @@ onMounted(() => {
        size="small"
        color="#1d4ed8"
        :loading="loading"
-        @click="fetchSessions"
+        data-testid="refresh-btn"
+        @click="refreshList"
      >
        刷新
      </el-button>
@@ -169,12 +190,13 @@ onMounted(() => {
    <div class="pagination">
      <span>{{ pagination.total }} 个会话</span>
      <el-button
-        size="small"
-        text
+        class="load-more"
+        :loading="loading"
        :disabled="!canLoadMore || loading"
        @click="loadMore"
      >
-        加载更多
+        <span class="arrow">↓</span>
+        <span class="load-label">加载更多</span>
      </el-button>
    </div>

@@ -193,6 +215,9 @@ onMounted(() => {
 .sidebar {
  width: 300px;
  min-height: 100vh;
+  height: 100vh;
+  position: sticky;
+  top: 0;
  padding: 18px;
  background: rgba(255, 255, 255, 0.8);
  border-right: 1px solid rgba(0, 0, 0, 0.06);
@@ -201,6 +226,28 @@ onMounted(() => {
  display: flex;
  flex-direction: column;
  gap: 14px;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(37, 99, 235, 0.3) rgba(255, 255, 255, 0.6);
+}
+
+.sidebar::-webkit-scrollbar {
+  width: 8px;
+}
+
+.sidebar::-webkit-scrollbar-track {
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(236, 242, 255, 0.9));
+  border-radius: 12px;
+}
+
+.sidebar::-webkit-scrollbar-thumb {
+  background: linear-gradient(180deg, rgba(37, 99, 235, 0.6), rgba(59, 130, 246, 0.5));
+  border-radius: 12px;
+  border: 2px solid rgba(255, 255, 255, 0.9);
+}
+
+.sidebar::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(180deg, rgba(37, 99, 235, 0.8), rgba(37, 99, 235, 0.6));
 }

 .sidebar-head {
@@ -288,8 +335,8 @@ onMounted(() => {

 .pagination {
  display: flex;
-  justify-content: flex-start;
-  align-items: center;
+  flex-direction: column;
+  gap: 6px;
  font-size: 12px;
  color: #6b7280;
 }
@@ -298,10 +345,42 @@ onMounted(() => {
  margin-top: 6px;
 }

+.load-more {
+  width: 100%;
+  height: 34px;
+  border-radius: 10px;
+  border: 1px dashed rgba(0, 0, 0, 0.1);
+  color: #1f2937;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  letter-spacing: 0.02em;
+  background: rgba(255, 255, 255, 0.85);
+  transition: all 0.15s ease;
+}
+
+.load-more:hover {
+  border-color: rgba(37, 99, 235, 0.35);
+  color: #1d4ed8;
+}
+
+.load-more:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.arrow {
+  font-size: 14px;
+}
+
@media (max-width: 960px) {
  .sidebar {
    width: 100%;
    min-height: auto;
+    height: auto;
+    position: static;
+    overflow: visible;
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.08);
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router'
 import LoginView from '../views/LoginView.vue'
 import WelcomeView from '../views/WelcomeView.vue'
 import UsersView from '../views/UsersView.vue'
+import ChatView from '../views/ChatView.vue'

 const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
@@ -9,6 +10,7 @@ const router = createRouter({
    { path: '/', name: 'login', component: LoginView },
    { path: '/welcome', name: 'welcome', component: WelcomeView },
    { path: '/users', name: 'users', component: UsersView },
+    { path: '/chat/:id?', name: 'chat', component: ChatView },
    { path: '/:pathMatch(.*)*', redirect: '/' },
  ],
 })
--- a/src/views/ChatView.vue
+++ b/src/views/ChatView.vue
@@ -0,0 +1,605 @@
+<script setup>
+import { computed, reactive, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { ElMessage } from 'element-plus'
+
+const route = useRoute()
+const inputText = ref('我们继续讨论：请总结当前进展，并生成可执行的下一步。')
+const uploadFiles = ref([])
+const fileList = ref([])
+const sampleImage =
+  'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="220" height="140" viewBox="0 0 220 140"><defs><linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="100%"><stop stop-color="%23e0e9ff" offset="0%"/><stop stop-color="%23c7d8ff" offset="50%"/><stop stop-color="%23e8f1ff" offset="100%"/></linearGradient></defs><rect width="220" height="140" rx="12" fill="url(%23g)"/><text x="50%" y="52%" dominant-baseline="middle" text-anchor="middle" fill="%231d4ed8" font-family="Arial" font-size="16">mock image</text></svg>'
+
+const mockSessions = reactive({
+  s1: {
+    summary: {
+      title: '智能客服体验调优',
+      status: 'OPEN',
+      updatedAt: '2025-02-14 10:26',
+      lastSeq: 18,
+      tags: ['产品设计', 'LLM', '多模态'],
+    },
+    messages: [
+      {
+        id: 'm1',
+        role: 'user',
+        author: '你',
+        time: '10:05',
+        text: '我们需要让欢迎页更有 CRT 科幻感，同时保持 Apple 风格的简洁。',
+        attachments: [
+          { name: 'welcome-draft.pdf', type: 'file', size: '320KB' },
+        ],
+      },
+      {
+        id: 'm2',
+        role: 'agent',
+        author: 'ARS',
+        time: '10:08',
+        text: '已收到。建议：1) 使用玻璃拟态背景；2) 增加呼吸动画；3) 采用柔和蓝绿渐变。',
+        attachments: [],
+      },
+      {
+        id: 'm3',
+        role: 'user',
+        author: '你',
+        time: '10:12',
+        text: '这里有一张示意图，请参考。并补充一个简短的按钮文案。',
+        attachments: [
+          {
+            name: 'wireframe.png',
+            type: 'image',
+            size: '640KB',
+            url: sampleImage,
+          },
+        ],
+      },
+      {
+        id: 'm4',
+        role: 'agent',
+        author: 'ARS',
+        time: '10:15',
+        text: '好的，按钮文案可以用 “开始体验”。并将插画置于右侧，保留留白。',
+        attachments: [],
+      },
+    ],
+  },
+  s2: {
+    summary: {
+      title: '用户反馈整理',
+      status: 'LOCKED',
+      updatedAt: '2025-02-13 17:20',
+      lastSeq: 9,
+      tags: ['反馈', '数据整理'],
+    },
+    messages: [
+      {
+        id: 'm1',
+        role: 'user',
+        author: '你',
+        time: '17:00',
+        text: '请汇总最近 30 条用户反馈，并标记优先级。',
+        attachments: [{ name: 'feedback.csv', type: 'file', size: '80KB' }],
+      },
+      {
+        id: 'm2',
+        role: 'agent',
+        author: 'ARS',
+        time: '17:12',
+        text: '已完成：共 30 条，高优先级 6 条，中 12 条，低 12 条，已按主题聚合。',
+        attachments: [],
+      },
+    ],
+  },
+})
+
+const sessionId = computed(() => (route.params.id ? String(route.params.id) : 's1'))
+const sessionData = ref(mockSessions[sessionId.value] || mockSessions.s1)
+
+const applySession = () => {
+  sessionData.value = mockSessions[sessionId.value] || mockSessions.s1
+}
+
+watch(
+  () => route.params.id,
+  () => applySession(),
+  { immediate: true }
+)
+
+const summary = computed(() => sessionData.value?.summary || {})
+const messages = computed(() => sessionData.value?.messages || [])
+
+const handleFileChange = (uploadFile, uploadFilesList) => {
+  fileList.value = uploadFilesList
+  uploadFiles.value = uploadFilesList.map((file) => ({
+    uid: file.uid,
+    name: file.name,
+    type: file.raw?.type?.startsWith('image/') ? 'image' : 'file',
+    size: file.size ? `${Math.ceil(file.size / 1024)}KB` : '',
+    url: file.url || (file.raw ? URL.createObjectURL(file.raw) : sampleImage),
+  }))
+}
+
+const handleFileRemove = (file, list) => {
+  const toAttachment = (item) => ({
+    uid: item.uid,
+    name: item.name,
+    type:
+      item.raw?.type?.startsWith('image/') || item.type?.startsWith('image/')
+        ? 'image'
+        : 'file',
+    size: item.size ? `${Math.ceil(item.size / 1024)}KB` : '',
+    url: item.url || (item.raw ? URL.createObjectURL(item.raw) : sampleImage),
+  })
+
+  if (Array.isArray(list)) {
+    fileList.value = list
+    uploadFiles.value = list.map(toAttachment)
+    return
+  }
+
+  const filtered = fileList.value.filter((item) => item.uid !== file.uid)
+  fileList.value = filtered
+  uploadFiles.value = filtered.map(toAttachment)
+}
+
+const handleSend = () => {
+  ElMessage.info('仅做 UI 演示，尚未接入发送接口')
+}
+</script>
+
+<template>
+  <div class="chat-shell">
+    <section class="session-hero">
+      <div class="hero-left">
+        <p class="eyebrow">会话详情</p>
+        <h2>{{ summary.title || '未命名会话' }}</h2>
+        <div class="hero-meta">
+          <el-tag
+            :type="summary.status === 'OPEN' ? 'success' : summary.status === 'LOCKED' ? 'warning' : 'info'"
+            effect="plain"
+            size="small"
+          >
+            {{ summary.status || 'UNKNOWN' }}
+          </el-tag>
+          <span class="muted">最近更新 · {{ summary.updatedAt || '--' }}</span>
+          <span class="muted">last_seq · {{ summary.lastSeq ?? '--' }}</span>
+        </div>
+        <div class="chips">
+          <span v-for="tag in summary.tags || []" :key="tag" class="chip">
+            {{ tag }}
+          </span>
+        </div>
+      </div>
+      <div class="hero-right">
+        <div class="stat">
+          <p class="stat-label">历史消息</p>
+          <p class="stat-value">{{ messages.length }}</p>
+        </div>
+        <div class="stat">
+          <p class="stat-label">草稿字数</p>
+          <p class="stat-value">{{ inputText.length }}</p>
+        </div>
+      </div>
+    </section>
+
+    <section class="chat-window">
+      <div class="history">
+        <div
+          v-for="msg in messages"
+          :key="msg.id"
+          class="bubble"
+          :class="msg.role === 'user' ? 'bubble-user' : 'bubble-agent'"
+        >
+          <div class="bubble-head">
+            <span class="author">{{ msg.author }}</span>
+            <span class="time">{{ msg.time }}</span>
+          </div>
+          <p class="bubble-text">{{ msg.text }}</p>
+          <div v-if="msg.attachments?.length" class="attachment-list">
+            <div
+              v-for="file in msg.attachments"
+              :key="file.name"
+              class="attachment"
+              :class="file.type"
+            >
+              <div
+                v-if="file.type === 'image'"
+                class="attachment-thumb"
+                :style="{ backgroundImage: file.url ? `url(${file.url})` : undefined }"
+              />
+              <div class="attachment-meta">
+                <span class="name">{{ file.name }}</span>
+                <span class="size">{{ file.size || '图像' }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="composer">
+        <el-upload
+          class="upload"
+          multiple
+          accept="image/*,.pdf,.txt,.doc,.docx,.md"
+          :auto-upload="false"
+          :show-file-list="false"
+          :file-list="fileList"
+          :on-change="handleFileChange"
+          :on-remove="handleFileRemove"
+        >
+          <button type="button" class="add-btn" aria-label="上传文件">
+            +
+          </button>
+        </el-upload>
+        <el-input
+          v-model="inputText"
+          type="textarea"
+          :autosize="{ minRows: 2, maxRows: 6 }"
+          class="composer-input"
+          placeholder="输入消息，支持粘贴大段文本与附件..."
+        />
+        <el-button color="#1d4ed8" class="send-btn" @click="handleSend">
+          发送
+        </el-button>
+      </div>
+
+      <div v-if="uploadFiles.length" class="pending-attachments">
+        <p class="pending-title">待发送附件</p>
+        <div class="pending-list">
+          <div
+            v-for="file in uploadFiles"
+            :key="file.uid"
+            class="pending-chip"
+          >
+            <div
+              v-if="file.type === 'image'"
+              class="pending-thumb"
+              :style="{ backgroundImage: file.url ? `url(${file.url})` : undefined }"
+            />
+            <div class="pending-meta">
+              <span class="name">{{ file.name }}</span>
+              <span class="size">{{ file.size || '文件' }}</span>
+            </div>
+            <button
+              type="button"
+              class="remove"
+              aria-label="移除附件"
+              @click="handleFileRemove(file)"
+            >
+              ×
+            </button>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.chat-shell {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-height: 80vh;
+}
+
+.session-hero {
+  display: flex;
+  justify-content: space-between;
+  gap: 18px;
+  padding: 18px 20px;
+  border-radius: 16px;
+  background: linear-gradient(135deg, #f5f8ff, #edf2ff);
+  border: 1px solid rgba(0, 0, 0, 0.04);
+  box-shadow: 0 18px 38px rgba(17, 24, 39, 0.08);
+}
+
+.hero-left h2 {
+  margin: 6px 0;
+  color: #0f172a;
+  font-size: 24px;
+}
+
+.eyebrow {
+  margin: 0;
+  font-size: 13px;
+  letter-spacing: 0.08em;
+  color: #6b7280;
+  text-transform: uppercase;
+}
+
+.hero-meta {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: #6b7280;
+  font-size: 13px;
+}
+
+.muted {
+  color: #6b7280;
+}
+
+.chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.chip {
+  padding: 6px 10px;
+  border-radius: 10px;
+  background: rgba(37, 99, 235, 0.08);
+  color: #1d4ed8;
+  font-size: 12px;
+  letter-spacing: 0.01em;
+}
+
+.hero-right {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 10px;
+  min-width: 260px;
+}
+
+.stat {
+  padding: 12px 14px;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.85);
+  border: 1px solid rgba(0, 0, 0, 0.04);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
+}
+
+.stat-label {
+  margin: 0 0 4px;
+  color: #6b7280;
+  font-size: 13px;
+}
+
+.stat-value {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 700;
+  color: #111827;
+}
+
+.chat-window {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px;
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.9);
+  border: 1px solid rgba(0, 0, 0, 0.04);
+  box-shadow: 0 18px 32px rgba(17, 24, 39, 0.08);
+}
+
+.history {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  max-height: 48vh;
+  overflow: auto;
+  padding-right: 8px;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(37, 99, 235, 0.25) rgba(255, 255, 255, 0.8);
+}
+
+.history::-webkit-scrollbar {
+  width: 8px;
+}
+
+.history::-webkit-scrollbar-thumb {
+  background: rgba(37, 99, 235, 0.3);
+  border-radius: 10px;
+}
+
+.bubble {
+  padding: 12px 14px;
+  border-radius: 14px;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  max-width: 760px;
+  box-shadow: 0 10px 20px rgba(17, 24, 39, 0.06);
+}
+
+.bubble-user {
+  align-self: flex-end;
+  background: linear-gradient(135deg, #e7f0ff, #dfe9ff);
+  border-color: rgba(37, 99, 235, 0.18);
+}
+
+.bubble-agent {
+  align-self: flex-start;
+  background: #ffffff;
+}
+
+.bubble-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+
+.author {
+  font-weight: 700;
+  color: #0f172a;
+}
+
+.time {
+  font-size: 12px;
+  color: #9ca3af;
+}
+
+.bubble-text {
+  margin: 0 0 6px;
+  color: #111827;
+  line-height: 1.6;
+}
+
+.attachment-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.attachment {
+  display: grid;
+  grid-template-columns: 52px 1fr;
+  gap: 10px;
+  align-items: center;
+  padding: 8px 10px;
+  border-radius: 10px;
+  background: rgba(15, 23, 42, 0.03);
+}
+
+.attachment.file {
+  grid-template-columns: 1fr;
+}
+
+.attachment-thumb {
+  width: 52px;
+  height: 52px;
+  border-radius: 12px;
+  background-size: cover;
+  background-position: center;
+  background-image: linear-gradient(135deg, #e5edff, #dbeafe);
+  border: 1px solid rgba(0, 0, 0, 0.04);
+}
+
+.attachment-meta .name {
+  display: block;
+  font-weight: 600;
+  color: #0f172a;
+}
+
+.attachment-meta .size {
+  display: block;
+  color: #6b7280;
+  font-size: 12px;
+}
+
+.composer {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  gap: 10px;
+  align-items: flex-start;
+  padding: 12px;
+  border-radius: 14px;
+  background: #f7f9fc;
+  border: 1px solid rgba(0, 0, 0, 0.04);
+}
+
+.add-btn {
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  background: #ffffff;
+  box-shadow: 0 8px 18px rgba(17, 24, 39, 0.08);
+  font-size: 24px;
+  color: #1d4ed8;
+  cursor: pointer;
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+.add-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 12px 24px rgba(17, 24, 39, 0.12);
+}
+
+.composer-input :deep(.el-textarea__inner) {
+  background: #ffffff;
+  border-radius: 12px;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
+}
+
+.send-btn {
+  height: 44px;
+  border-radius: 12px;
+  font-weight: 700;
+  padding: 0 18px;
+}
+
+.pending-attachments {
+  padding: 10px 0 0;
+  border-top: 1px dashed rgba(0, 0, 0, 0.08);
+  margin-top: 4px;
+}
+
+.pending-title {
+  margin: 0 0 8px;
+  font-size: 13px;
+  color: #6b7280;
+}
+
+.pending-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.pending-chip {
+  display: grid;
+  grid-template-columns: 48px 1fr 16px;
+  gap: 8px;
+  align-items: center;
+  padding: 8px 10px;
+  border-radius: 12px;
+  background: rgba(37, 99, 235, 0.06);
+  border: 1px solid rgba(37, 99, 235, 0.15);
+}
+
+.pending-thumb {
+  width: 48px;
+  height: 48px;
+  border-radius: 10px;
+  background-size: cover;
+  background-position: center;
+  background-image: linear-gradient(135deg, #e0e7ff, #c7d2fe);
+}
+
+.pending-meta .name {
+  display: block;
+  font-weight: 600;
+  color: #0f172a;
+}
+
+.pending-meta .size {
+  display: block;
+  font-size: 12px;
+  color: #4b5563;
+}
+
+.remove {
+  cursor: pointer;
+  color: #111827;
+  font-size: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@media (max-width: 900px) {
+  .session-hero {
+    flex-direction: column;
+  }
+
+  .chat-window {
+    padding: 12px;
+  }
+
+  .composer {
+    grid-template-columns: 1fr;
+  }
+
+  .add-btn {
+    width: 100%;
+  }
+
+  .send-btn {
+    width: 100%;
+  }
+}
+</style>
--- a/tests/session-sidebar.spec.js
+++ b/tests/session-sidebar.spec.js
@@ -20,6 +20,7 @@ const makeRouter = () =>
    routes: [
      { path: '/', name: 'login', component: LoginView },
      { path: '/welcome', name: 'welcome', component: LoginView },
+      { path: '/chat/:id', name: 'chat', component: LoginView },
    ],
  })

@@ -61,6 +62,7 @@ describe('SessionSidebar', () => {
        total: 1,
        current_page: 1,
        per_page: 20,
+        last_page: 1,
      },
    })

@@ -81,6 +83,55 @@ describe('SessionSidebar', () => {
    )
    expect(wrapper.text()).toContain('Demo')
    await wrapper.find('.session-item').trigger('click')
+    await flushPromises()
    expect(localStorage.getItem('ars-current-session')).toBe('s1')
+    expect(router.currentRoute.value.name).toBe('chat')
+  })
+
+  it('resets page when refreshing after loading more', async () => {
+    localStorage.setItem('ars-token', 'jwt-token')
+    mockedAxios.get
+      .mockResolvedValueOnce({
+        data: {
+          data: [{ session_id: 's1', session_name: 'P1', status: 'OPEN' }],
+          meta: { total: 2, current_page: 1, per_page: 10, last_page: 2 },
+        },
+      })
+      .mockResolvedValueOnce({
+        data: {
+          data: [{ session_id: 's2', session_name: 'P2', status: 'OPEN' }],
+          meta: { total: 2, current_page: 2, per_page: 10, last_page: 2 },
+        },
+      })
+      .mockResolvedValueOnce({
+        data: {
+          data: [{ session_id: 's1', session_name: 'Refreshed', status: 'OPEN' }],
+          meta: { total: 1, current_page: 1, per_page: 10, last_page: 1 },
+        },
+      })
+
+    const router = makeRouter()
+    router.push('/welcome')
+    await router.isReady()
+
+    const wrapper = mount(SessionSidebar, {
+      global: {
+        plugins: [router, ElementPlus],
+      },
+    })
+
+    await flushPromises()
+    expect(wrapper.findAll('.session-item')).toHaveLength(1)
+
+    await wrapper.find('.load-more').trigger('click')
+    await flushPromises()
+    expect(mockedAxios.get.mock.calls[1][1].params.page).toBe(2)
+    expect(wrapper.findAll('.session-item')).toHaveLength(2)
+
+    await wrapper.find('[data-testid="refresh-btn"]').trigger('click')
+    await flushPromises()
+    expect(mockedAxios.get.mock.calls[2][1].params.page).toBe(1)
+    expect(wrapper.findAll('.session-item')).toHaveLength(1)
+    expect(wrapper.text()).toContain('Refreshed')
  })
 })