@aakash58/chatbot 1.1.20 → 1.1.21

package/projects/doohbot/src/lib/app/chat/components/message-list/message-list.component.scss

@@ -0,0 +1,436 @@
+/* Chat messages */
+:host {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  overflow: hidden;
+}
+
+.login-btn {
+  padding: 10px 15px;
+  border: none;
+  border-radius: 20px;
+  background-color: var(--primary-color);
+  color: var(--user-text-color);
+  font-size: 1em;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.chat-messages {
+  flex-grow: 1;
+  padding: 20px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  scroll-behavior: smooth;
+}
+
+/* Webkit browsers (Chrome, Edge, Safari) */
+.chat-messages::-webkit-scrollbar {
+  width: 6px;
+}
+
+.chat-messages::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.chat-messages::-webkit-scrollbar-thumb {
+  background: rgba(var(--black-rgb), 0.1);
+  border-radius: 10px;
+}
+
+.chat-messages::-webkit-scrollbar-thumb:hover {
+  background: rgba(var(--black-rgb), 0.1);
+}
+
+/* Firefox */
+.chat-messages {
+  // scrollbar-width: thin;
+  // scrollbar-color: var(--primary-color) var(--background-color);
+
+  /* Message */
+  .message {
+    display: flex;
+    align-items: flex-end;
+    gap: 8px;
+    margin-bottom: 6px;
+
+    &.user {
+      justify-content: flex-end;
+    }
+
+    &.assistant {
+      justify-content: flex-start;
+    }
+
+    /* User avatar container */
+    .avatar-container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 4px;
+
+      .user-avatar {
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        object-fit: cover;
+        border: 1px solid var(--border-color);
+      }
+
+      /* Bot avatar */
+      .assistant-avatar {
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        object-fit: cover;
+        border: 1px solid var(--border-color);
+        filter: var(--avatar-filter);
+      }
+
+      /* Only placeholder gets filter */
+      .user-avatar.placeholder {
+        filter: var(--avatar-filter);
+      }
+
+      .user-name {
+        font-size: 10px;
+        color: var(--secondary-text-color);
+        font-family: var(--font-family);
+        text-align: center;
+        max-width: 60px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+
+    /* Message bubbles */
+    .message-content {
+      max-width: 80%;
+      // overflow-y: auto;
+      word-wrap: break-word;
+      white-space: pre-wrap;
+      font-family: var(--font-family);
+      user-select: text;
+      cursor: text;
+
+      .user {
+        background-color: var(--primary-color);
+        color: var(--user-text-color);
+        align-self: flex-end;
+        border-radius: 20px;
+        padding: 10px 15px;
+        position: relative;
+        user-select: text;
+        cursor: text;
+
+        .copy-btn {
+          position: absolute;
+          top: 8px;
+          right: 8px;
+          opacity: 0;
+          transition: opacity 0.2s ease;
+          background: var(--background-color);
+          border: none;
+          cursor: pointer;
+          padding: 4px;
+          border-radius: 4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          pointer-events: auto;
+
+          mat-icon {
+            font-size: 16px;
+            width: 16px;
+            height: 16px;
+            color: var(--bot-text-color);
+          }
+
+          &:hover {
+            background: var(--background-color);
+          }
+        }
+
+        &:hover .copy-btn {
+          opacity: 1;
+        }
+      }
+
+      .assistant {
+        background-color: var(--bot-message-color);
+        color: var(--bot-text-color);
+        align-self: flex-start;
+        border-radius: 20px;
+        padding: 10px 15px;
+        position: relative;
+        user-select: text;
+        cursor: text;
+
+        // Apply animation only to bot messages
+        animation: fadeIn 0.4s ease-out forwards;
+
+        .copy-btn {
+          position: absolute;
+          top: 8px;
+          right: 8px;
+          opacity: 0;
+          transition: opacity 0.2s ease;
+          background: var(--background-color);
+          border: none;
+          cursor: pointer;
+          padding: 4px;
+          border-radius: 4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          pointer-events: auto;
+
+          mat-icon {
+            font-size: 16px;
+            width: 16px;
+            height: 16px;
+            color: var(--bot-text-color);
+          }
+
+          &:hover {
+            background: var(--background-color);
+          }
+        }
+
+        &:hover .copy-btn {
+          opacity: 1;
+        }
+
+        /* Markdown Styles */
+        .markdown-content {
+
+          h1,
+          h2,
+          h3 {
+            margin-top: 10px;
+            margin-bottom: 5px;
+            font-weight: 600;
+            line-height: 1.25;
+          }
+
+          h1 {
+            font-size: 1.25em;
+          }
+
+          h2 {
+            font-size: 1.1em;
+          }
+
+          h3 {
+            font-size: 1em;
+          }
+
+          p {
+            margin-bottom: 8px;
+            line-height: 1.5;
+          }
+
+          // Lists
+          ul,
+          ol {
+            margin-top: 0;
+            margin-bottom: 8px;
+            padding-left: 20px;
+          }
+
+          li {
+            margin-bottom: 4px;
+            line-height: 1.5;
+          }
+
+          // Emphasis
+          strong {
+            font-weight: 700;
+          }
+
+          em {
+            font-style: italic;
+          }
+        }
+      }
+
+      .message-time {
+        font-size: 12px;
+        color: var(--secondary-text-color);
+        text-align: end;
+        margin-top: 6px;
+        line-height: 1;
+        user-select: none;
+        cursor: default;
+      }
+    }
+
+    .message-content ::selection {
+      background-color: color-mix(in srgb, var(--primary-color), white 60%);
+    }
+
+    .message-content ::-moz-selection {
+      background-color: color-mix(in srgb, var(--primary-color), white 60%);
+    }
+  }
+}
+
+/* Welcome screen */
+.welcome-screen {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  height: 100%;
+  padding: 0 20px;
+}
+
+.welcome-image {
+  width: 80px;
+  margin-bottom: 30px;
+}
+
+.marquee-container {
+  margin-bottom: 12px;
+}
+
+.welcome-greeting {
+  margin: 0;
+  color: var(--text-color);
+  font-family: var(--font-family);
+  font-size: 24px;
+  font-weight: 600;
+  background: var(--text-color);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  display: inline-block;
+  /* Ensure it stays inline for marquee */
+}
+
+/* Prevent emoji from inheriting gradient text style */
+.welcome-greeting .emoji {
+  background: none;
+  -webkit-background-clip: initial;
+  -webkit-text-fill-color: initial;
+  background-clip: initial;
+  // color: var(--text-color); /*apply color here */
+}
+
+.welcome-screen h3 {
+  margin: 0 0 5px 0;
+  color: var(--text-color);
+  font-family: var(--font-family);
+  font-size: 18px;
+}
+
+.welcome-screen p {
+  margin: 0;
+  color: var(--secondary-text-color);
+  font-size: 14px;
+  font-family: var(--font-family);
+  margin-bottom: 30px;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+// Optional: Pulse effect for streaming messages (if supported by class)
+.message-wrapper.streaming .assistant-avatar {
+  box-shadow: 0 0 8px rgba(var(--black-rgb), 0.1);
+  transition: all 0.3s ease;
+}
+
+/* Typing indicator */
+.typing-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 4px;
+  min-height: 20px;
+}
+
+.typing-indicator span {
+  width: 8px;
+  height: 8px;
+  background-color: var(--typing-indicator-color);
+  border-radius: 50%;
+  animation: blink 1.4s infinite both;
+}
+
+.typing-indicator span:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.typing-indicator span:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes blink {
+
+  0%,
+  80%,
+  100% {
+    opacity: 0.2;
+  }
+
+  40% {
+    opacity: 1;
+  }
+}
+
+/* Auth Buttons (Primary/Secondary) */
+.auth-buttons-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  gap: 10px;
+}
+
+.auth-btn {
+  padding: 8px 16px;
+  border-radius: 20px;
+  font-size: 0.9em;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &.primary {
+    background: var(--primary-color);
+    color: var(--white);
+    border: 1px solid var(--primary-color);
+
+    &:hover {
+      opacity: 0.9;
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+
+  &.secondary {
+    background: transparent;
+    color: var(--primary-color);
+    border: 1px solid var(--primary-color);
+
+    &:hover {
+      opacity: 0.9;
+    }
+  }
+}

package/projects/doohbot/src/lib/app/chat/components/message-list/message-list.component.ts

@@ -0,0 +1,106 @@
+import {
+  AfterViewInit,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  Output,
+  TrackByFunction,
+  ViewChild,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Message } from '../../../../core/models/message';
+import { Chips } from '../../../../shared/chips/chips.component';
+import { MarkdownPipe } from '../../../../shared/pipes/simple-markdown.pipe';
+import { MatIconModule } from '@angular/material/icon';
+import { AppEmoji } from '../../../../constant/utf8';
+
+@Component({
+  selector: 'app-message-list',
+  standalone: true,
+  imports: [CommonModule, Chips, MarkdownPipe, MatIconModule],
+  templateUrl: './message-list.component.html',
+  styleUrls: ['./message-list.component.scss'],
+})
+export class MessageListComponent implements AfterViewInit, OnDestroy {
+  @Input() messages: Message[] = [];
+  @Input() isBotTyping: boolean = false;
+  @Input() isStreaming: boolean = true;
+  @Input() appLogoUrl: string = '';
+  @Input() appSubtitle: string = '';
+  @Input() welcomeDesc: string = '';
+  @Input() predefinedMessages: string[] = [];
+  @Input() botAvatarUrl: string = '';
+  @Input() userAvatarUrl: string = '';
+  @Input() userName: string = '';
+  @Input() isAuthenticated: boolean = false;
+  @Input() isLoggingIn: boolean = false;
+  @Input() trackByMessageId: TrackByFunction<Message> = (index, item) => item.id ?? index;
+
+  @Output() suggestionClick = new EventEmitter<string>();
+  @Output() loginClick = new EventEmitter<void>();
+
+  @ViewChild('chatMessages') private chatMessagesContainer!: ElementRef;
+  private mutationObserver!: MutationObserver;
+
+  appEmoji = AppEmoji;
+
+  constructor(private cdr: ChangeDetectorRef) {}
+
+  ngAfterViewInit(): void {
+    if (!this.chatMessagesContainer) return;
+
+    this.mutationObserver = new MutationObserver(() => this.scrollToBottom());
+
+    this.mutationObserver.observe(this.chatMessagesContainer.nativeElement, {
+      childList: true,
+      subtree: true,
+    });
+
+    this.scrollToBottom();
+  }
+
+  private scrollToBottom(): void {
+    if (!this.chatMessagesContainer) {
+      return;
+    }
+    const container = this.chatMessagesContainer.nativeElement;
+    container.scrollTo({
+      top: container.scrollHeight,
+      behavior: 'smooth',
+    });
+  }
+
+  onPredefinedClick(text: string) {
+    this.suggestionClick.emit(text);
+  }
+
+  copyMessage(message: Message): void {
+    if (!message.text) return;
+
+    navigator.clipboard.writeText(message.text).then(() => {
+      // Logger.info('Copied to clipboard');
+      // SnackbarUtils.info('Copied to clipboard');
+
+      message.copied = true;
+      this.cdr.markForCheck(); //  force UI update
+
+      setTimeout(() => {
+        message.copied = false;
+        this.cdr.markForCheck(); //  update again
+      }, 800);
+    });
+  }
+
+  // trackByChunkIndex(index: number) {
+  //   return index;
+  // }
+
+  ngOnDestroy(): void {
+    if (this.mutationObserver) {
+      this.mutationObserver.disconnect();
+    }
+  }
+}

package/projects/doohbot/src/lib/app/chat/model/chat-history.model.ts

@@ -0,0 +1,57 @@
+import { MessageRole } from '../../../core/types/message-role.type';
+
+/**
+ * Chat History Request Model
+ */
+export interface ChatHistoryRequest {
+  limit: number;
+  offset: number;
+}
+
+/**
+ * Chat Message from API
+ */
+export interface ChatMessage {
+  message_id?: string; // Some endpoints return message_id
+  // chat_message_id?: string; // Others return chat_message_id
+  role: MessageRole;
+  content: string;
+  model_name: string | null;
+  prompt_tokens: number | null;
+  completion_tokens: number | null;
+  created_at: string;
+}
+
+/**
+ * Chat Session from API
+ */
+export interface ChatSessionResponse {
+  response_id: string;
+  title: string;
+  last_message_at: string;
+  chat_session_id?: string;
+  is_active?: boolean;
+  created_at?: string;
+  updated_at?: string;
+  messages?: ChatMessage[];
+}
+
+/**
+ * Chat History Data from API
+ */
+export interface ChatHistoryData {
+  sessions: ChatSessionResponse[];
+  total: number;
+  limit: number;
+  offset: number;
+}
+
+/**
+ * Chat History API Response
+ */
+export interface ChatHistoryResponse {
+  success: boolean;
+  message: string;
+  data: ChatHistoryData;
+  timestamp: string;
+}

package/projects/doohbot/src/lib/app/chat/model/chat-request.model.ts

@@ -0,0 +1,17 @@
+import { PromptMode } from '../../../core/types/prompt-mode.type';
+
+export interface ChatRequest {
+  question: string;
+
+  temperature?: number;
+
+  max_tokens?: number;
+
+  prompt_mode?: PromptMode;
+
+  organization_id: string;
+
+  response_id?: string;
+
+  custom_instructions?: string;
+}

package/projects/doohbot/src/lib/app/chat/model/chat-response.model.ts

@@ -0,0 +1,9 @@
+export interface ChatResponse {
+  id: string;
+  content: string;
+  created_at: string;
+  isComplete: boolean;
+  sources: any[];
+  error?: any;
+  response_id?: string;
+}

package/projects/doohbot/src/lib/app/chat/model/chat-session.model.ts

@@ -0,0 +1,14 @@
+import { Message } from '../../../core/models/message';
+
+export interface ChatSession {
+  id: string;
+  timestamp: Date;
+  title: string; // Auto-generated from first message
+  messages: Message[];
+  userId: string;
+}
+
+export interface ChatSessionGroup {
+  label: string;
+  sessions: ChatSession[];
+}

package/{lib/app/chat/model/chat-stream-message.model.d.ts → projects/doohbot/src/lib/app/chat/model/chat-stream-message.model.ts}

@@ -1,5 +1,6 @@
-import { MessageRole } from '../../../core/types/message-role.type';
-export interface ChatStreamMessage {
-    role: MessageRole;
-    content: string;
-}
+import { MessageRole } from '../../../core/types/message-role.type';
+
+export interface ChatStreamMessage {
+  role: MessageRole;
+  content: string;
+}

package/projects/doohbot/src/lib/app/chat/model/chat-stream-response.model.ts

@@ -0,0 +1,12 @@
+import { ChatStream } from '../../../core/types/chat-stream.type';
+
+export interface ChatStreamResponse {
+  id: string;
+  type: ChatStream;
+  content: string;
+  error?: any;
+  created_at: string;
+  // isComplete: boolean;
+  sources: any[];
+  response_id?: string;
+}