diff --git a/frontend/src/views/chat/ChatRow.vue b/frontend/src/views/chat/ChatRow.vue
new file mode 100644
index 0000000..ffa4176
--- /dev/null
+++ b/frontend/src/views/chat/ChatRow.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { ChatInfo, type ChatMessage } from '@/api/chat.ts'
+import logo_fold from '@/assets/LOGO-fold.svg'
+import { useAppearanceStoreWithOut } from '@/stores/appearance'
+import custom_small from '@/assets/svg/logo-custom_small.svg'
+
+withDefaults(
+  defineProps<{
+    msg: ChatMessage
+    currentChat: ChatInfo
+    hideAvatar?: boolean
+  }>(),
+  {
+    hideAvatar: false,
+  }
+)
+const appearanceStore = useAppearanceStoreWithOut()
+</script>
+
+<template>
+  <div class="chat-row-container">
+    <div class="chat-row" :class="{ 'right-to-left': msg.role === 'user' }">
+      <div v-if="msg.role === 'assistant'" class="ai-avatar">
+        <el-icon v-if="!hideAvatar">
+          <custom_small v-if="appearanceStore.themeColor === 'custom'"></custom_small>
+          <logo_fold v-else />
+        </el-icon>
+      </div>
+      <div :class="{ 'row-full': msg.role === 'assistant', 'width-auto': msg.role === 'user' }">
+        <slot></slot>
+      </div>
+    </div>
+    <slot name="footer"></slot>
+  </div>
+</template>
+
+<style scoped lang="less">
+.chat-row-container {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+  max-width: 800px;
+
+  .chat-row {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    gap: 8px;
+    padding: 20px 0 0;
+
+    width: 100%;
+
+    &.right-to-left {
+      flex-direction: row-reverse;
+    }
+
+    .row-full {
+      flex: 1;
+      width: 0;
+    }
+
+    .width-auto {
+      width: auto;
+      max-width: 100%;
+    }
+
+    .ai-avatar {
+      font-size: 28px;
+      background: transparent;
+      width: 28px;
+    }
+  }
+}
+</style>