add avatar image soppurt

main.js

@@ -104,7 +104,7 @@ function mapChatRow(row) {
     id: row.id,
     name: row.name,
     status: row.status,
-    avatar: row.avatar,
+    avatar: parseAvatarColumn(row.avatar, row.id),
     subtitle: row.subtitle ?? undefined,
     timeLabel: row.time_label ?? undefined,
     unreadCount: row.unread_count ?? undefined,
@@ -180,6 +180,25 @@ function parseAttachmentColumn(value, fieldName, rowId) {
   return undefined;
 }
 
+function parseAvatarColumn(value, rowId) {
+  const parsedValue = parseJsonColumn(value, 'avatar', rowId);
+  if (parsedValue === undefined) {
+    return value;
+  }
+
+  if (
+    parsedValue &&
+    typeof parsedValue === 'object' &&
+    typeof parsedValue.type === 'string' &&
+    typeof parsedValue.value === 'string'
+  ) {
+    return parsedValue;
+  }
+
+  console.warn(`Unexpected avatar payload for chat ${rowId}.`, parsedValue);
+  return value;
+}
+
 function mapMessageRow(row) {
   return {
     id: row.id,
@@ -339,7 +358,7 @@ function registerDbHandlers() {
       [
         chat.name,
         chat.status,
-        chat.avatar,
+        JSON.stringify(chat.avatar),
         chat.subtitle ?? null,
         chat.timeLabel ?? null,
         chat.unreadCount ?? 0,
@@ -614,6 +633,42 @@ function registerDbHandlers() {
     return mapChatRow(row);
   });
 
+  ipcMain.handle('db:updateChatAvatar', async (_event, { chatId, avatar }) => {
+    const now = new Date().toISOString();
+    await run(
+      `
+        UPDATE chats
+        SET avatar = ?,
+            updated_at = ?
+        WHERE id = ?
+      `,
+      [JSON.stringify(avatar), now, chatId],
+    );
+
+    const row = await get(
+      `
+        SELECT
+          id,
+          name,
+          status,
+          avatar,
+          subtitle,
+          time_label,
+          unread_count,
+          highlight_time,
+          avatar_ring,
+          tip_label,
+          created_at,
+          updated_at
+        FROM chats
+        WHERE id = ?
+      `,
+      [chatId],
+    );
+
+    return mapChatRow(row);
+  });
+
   ipcMain.handle('db:updateSupporterAgent', async (_event, { chatId, agentName }) => {
     const result = await run(
       `

src/app/chat-list-component/chat-list-component.html

@@ -22,7 +22,13 @@
       (click)="onOpenChat(chat)"
     >
       <div class="chat-list-item__avatar-wrap" [class.chat-list-item__avatar-wrap--ring]="chat.avatarRing">
-        <div class="chat-list-item__avatar">{{ avatarFor(chat) }}</div>
+        <div class="chat-list-item__avatar">
+          @if (chat.avatar.type === 'image') {
+            <img [src]="chat.avatar.value" alt="avatar" class="chat-list-item__avatar-img" />
+          } @else {
+            {{ chat.avatar.value }}
+          }
+        </div>
       </div>
       <div class="chat-list-item__content">
         <div class="chat-list-item__top">
@@ -49,4 +55,4 @@
 </div>
 <button type="button" class="floating-compose" aria-label="New chat" (click)="onCreateChat()">
     +
-</button>
+</button>

src/app/chat-list-component/chat-list-component.scss

@@ -145,6 +145,44 @@
   color: #21b15d !important;
 }
 
+.chat-list-item__avatar {
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+  overflow: hidden;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.chat-list-item__avatar-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.chat-delete-button {
+  width: 1.7rem;
+  height: 1.7rem;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: #7a8a96;
+  font-size: 0.8rem;
+  cursor: pointer;
+}
+
+.chat-delete-button:hover:not(:disabled) {
+  background: #eceff1;
+  color: #d93025;
+}
+
+.chat-delete-button:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+
 .chat-list-item__bottom {
   margin-top: 0.28rem;
 }

src/app/chat-list-component/chat-list-component.ts

@@ -31,26 +31,20 @@ export class ChatListComponent {
         });
 
     return chats.sort(
-      (a, b) => (b.messages.at(-1)?.time?.getTime() ?? 0) - (a.messages.at(-1)?.time?.getTime() ?? 0),
+      (a, b) =>
+        (b.messages.at(-1)?.time?.getTime() ?? 0) - (a.messages.at(-1)?.time?.getTime() ?? 0),
     );
   }
 
-  avatarFor(chat: Chat): string {
-    return chat.avatar;
-  }
-
   lastMessageText(chat: Chat): string {
     const lastMessage = chat.messages.at(-1);
     if (!lastMessage) {
       return chat.subtitle || 'start the conversation';
     }
 
-    return DOMPurify.sanitize(
-      lastMessage.value || 
-      lastMessage.attachment?.name || 
-      '', 
-      { ALLOWED_TAGS: [] }
-    );
+    return DOMPurify.sanitize(lastMessage.value || lastMessage.attachment?.name || '', {
+      ALLOWED_TAGS: [],
+    });
   }
 
   lastMessageTime(chat: Chat): string {

src/app/chat-navbar-component/chat-navbar-component.html

@@ -51,7 +51,7 @@
         </button>
       }
 
-      <div class="avatar" aria-hidden="true">{{ chat.avatar }}</div>
+      <div class="avatar" aria-hidden="true">{{ chat.avatar.value }}</div>
       <div class="contact-meta">
         <h1>{{ chat.name }}</h1>
         <p>{{ chat.status }}</p>

src/classes/Chat.ts

@@ -2,11 +2,16 @@ import { Message } from './Message';
 import { Supporter } from './Supporter';
 import { Client } from './Client';
 
+export type Avatar = {
+  type: 'image' | 'text';
+  value: string;
+};
+
 export class Chat {
   id: number;
   name: string;
   status: string;
-  avatar: string;
+  avatar: Avatar;
   subtitle?: string;
   timeLabel?: string;
   unreadCount: number;
@@ -23,7 +28,7 @@ export class Chat {
     id: number,
     name: string,
     status: string,
-    avatar: string,
+    avatar: Avatar,
     supporter: Supporter,
     options: {
       subtitle?: string;
@@ -56,6 +61,9 @@ export class Chat {
   processFileUrl(file: File): string | Promise<string> {
     return this._processFileUrlDriver(file);
   }
+  updateAvatar(avatar: Avatar) {
+    this.avatar = avatar;
+  }
   setFileUrlProcessor(processor: typeof this._processFileUrlDriver) {
     this._processFileUrlDriver = processor;
   }

src/interfaces/db/ChatRecord.ts

@@ -1,8 +1,10 @@
+import { Avatar } from '../../classes/Chat';
+
 export interface ChatRecord {
   id: number;
   name: string;
   status: string;
-  avatar: string;
+  avatar: Avatar | string;
   subtitle?: string;
   timeLabel?: string;
   unreadCount?: number;

src/interfaces/db/CreateChatRecordInput.ts

@@ -1,7 +1,9 @@
+import { Avatar } from '../../classes/Chat';
+
 export interface CreateChatRecordInput {
   name: string;
   status: string;
-  avatar: string;
+  avatar: Avatar;
   subtitle?: string;
   timeLabel?: string;
   unreadCount?: number;

src/interfaces/db/UpdateChatAvatarInput.ts

@@ -0,0 +1,6 @@
+import { Avatar } from '../../classes/Chat';
+
+export interface UpdateChatAvatarInput {
+  chatId: number;
+  avatar: Avatar;
+}

src/services/chat.service.ts

@@ -4,7 +4,7 @@ import { Message } from '../classes/Message';
 import { coerceValidatorSpec } from '../classes/MessageValidator';
 import { Question, getPersistableValidationErrorMessage } from '../classes/Question';
 import { Supporter } from '../classes/Supporter';
-import { Chat } from '../classes/Chat';
+import { Avatar, Chat } from '../classes/Chat';
 import { Agent } from '../classes/Agent';
 import { AgentsService } from './agents.service';
 import { ChatRecord } from '../interfaces/db/ChatRecord';
@@ -37,7 +37,7 @@ export class ChatService {
     const record = await this.dbService.createChat({
       name,
       status,
-      avatar: name.slice(0, 2).toUpperCase(),
+      avatar: { type: 'text', value: name.slice(0, 2).toUpperCase() },
       subtitle: options.subtitle,
       timeLabel: options.timeLabel,
       unreadCount: options.unreadCount,
@@ -103,6 +103,23 @@ export class ChatService {
     chat.name = record.name;
   }
 
+  async updateChatAvatar(chat: Chat, avatar: Avatar): Promise<void> {
+    if (chat.avatar.type === avatar.type && chat.avatar.value === avatar.value) {
+      return;
+    }
+
+    const record = await this.dbService.updateChatAvatar({
+      chatId: chat.id,
+      avatar,
+    });
+
+    chat.updateAvatar(this.normalizeAvatar(record.avatar));
+  }
+
+  private normalizeAvatar(avatar: Avatar | string): Avatar {
+    return typeof avatar === 'string' ? { type: 'text', value: avatar } : avatar;
+  }
+
   hydrateChat(
     record: ChatRecord,
     initialAgent: Agent,
@@ -117,7 +134,7 @@ export class ChatService {
     catch{
       supporter.setContext(supporterRecord?.context ?? '{}');
     }
-    const chat = new Chat(record.id, record.name, record.status, record.avatar, supporter, {
+    const chat = new Chat(record.id, record.name, record.status, this.normalizeAvatar(record.avatar), supporter, {
       subtitle: record.subtitle,
       timeLabel: record.timeLabel,
       unreadCount: record.unreadCount,

src/services/db.service.ts

@@ -6,6 +6,7 @@ import { CreateMessageRecordInput } from '../interfaces/db/CreateMessageRecordIn
 import { CreateSupporterRecordInput } from '../interfaces/db/CreateSupporterRecordInput';
 import { MessageRecord } from '../interfaces/db/MessageRecord';
 import { SupporterRecord } from '../interfaces/db/SupporterRecord';
+import { UpdateChatAvatarInput } from '../interfaces/db/UpdateChatAvatarInput';
 import { UpdateChatTitleInput } from '../interfaces/db/UpdateChatTitleInput';
 import { UpdateSupporterAgentInput } from '../interfaces/db/UpdateSupporterAgentInput';
 import { UpdateSupporterContextInput } from '../interfaces/db/UpdateSupporterContextInput';
@@ -56,6 +57,10 @@ export class DbService {
     return this.electronService.invoke<ChatRecord>('db:updateChatTitle', input);
   }
 
+  async updateChatAvatar(input: UpdateChatAvatarInput): Promise<ChatRecord> {
+    return this.electronService.invoke<ChatRecord>('db:updateChatAvatar', input);
+  }
+
   async updateSupporterAgent(input: UpdateSupporterAgentInput): Promise<boolean> {
     return this.electronService.invoke<boolean>('db:updateSupporterAgent', input);
   }