Feature: Paperless AI (#10319)

src-ui/src/app/components/chat/chat/chat.component.html

@@ -0,0 +1,35 @@
+
+<li ngbDropdown class="nav-item me-n2" (openChange)="onOpenChange($event)">
+  <button class="btn border-0" id="chatDropdown" ngbDropdownToggle>
+    <i-bs width="1.3em" height="1.3em" name="chatSquareDots"></i-bs>
+  </button>
+  <div ngbDropdownMenu class="dropdown-menu-end shadow p-3" aria-labelledby="chatDropdown">
+    <div class="chat-container bg-light p-2">
+      <div class="chat-messages font-monospace small">
+        @for (message of messages; track message) {
+          <div class="message d-flex flex-row small" [class.justify-content-end]="message.role === 'user'">
+            <span class="p-2 m-2" [class.bg-dark]="message.role === 'user'">
+              {{ message.content }}
+              @if (message.isStreaming) { <span class="blinking-cursor">|</span> }
+            </span>
+          </div>
+        }
+        <div #scrollAnchor></div>
+      </div>
+
+      <form class="chat-input">
+        <div class="input-group">
+          <input
+            #chatInput
+            class="form-control form-control-sm" name="chatInput" type="text"
+            [placeholder]="placeholder"
+            [disabled]="loading"
+            [(ngModel)]="input"
+            (keydown)="searchInputKeyDown($event)"
+            />
+          <button class="btn btn-sm btn-secondary" type="button" (click)="sendMessage()" [disabled]="loading">Send</button>
+        </div>
+      </form>
+    </div>
+  </div>
+</li>