Update Fireworks to have Llama 3.1 70b and 405b

frontend/src/app/chat/chat-controls/chat-controls.component.html

@@ -0,0 +1,70 @@
+<mat-card
+  [formGroup]="chatForm"
+  style="width: 100%; min-height: 125px; margin-bottom: 8px"
+>
+  <mat-card-content>
+    <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="center center">
+      <!-- TODO: Better layout of form controls -->
+      <mat-form-field fxFlex="calc(100%-56px-56px-16px-16px-8px-8px)">
+        <textarea
+          matInput
+          placeholder="Message"
+          formControlName="message"
+          (keydown.enter)="submit()"
+        ></textarea>
+      </mat-form-field>
+
+      <button
+        mat-fab
+        color="primary"
+        (click)="submit()"
+        [disabled]="!chatForm.get('message')?.value"
+      >
+        <mat-icon>send</mat-icon>
+      </button>
+
+      <input
+        #fileInput
+        style="display: none;"
+        id="input-file-id"
+        multiple
+        type="file"
+        (change)="setSelectedFiles($event)"
+      />
+
+      <button mat-fab color="accent" disabled (click)="fileInput.click()">
+        <mat-icon>attach_file</mat-icon>
+      </button>
+    </div>
+
+    <h6 *ngIf="hasAttachments()">Attachments:</h6>
+
+    <mat-chip-list
+      #chipList
+      style="width: 100%; margin-bottom: 8px;"
+      fxLayout="row"
+      fxLayoutGap="8px"
+      fxLayoutAlign="start center"
+      matTooltip="These files will be uploaded as a attachment for the message above."
+      matTooltipPosition="below"
+    >
+      <mat-chip
+        *ngFor="let attachment of getAttachments(); let i = index"
+        selected
+        removable
+        (removed)="deleteAttachment(attachment)"
+        color="primary"
+      >
+        <mat-icon>insert_drive_file</mat-icon>
+        {{ attachment.name }}
+        <mat-icon matChipRemove *ngIf="true">cancel</mat-icon>
+      </mat-chip>
+    </mat-chip-list>
+
+    <mat-progress-bar
+      *ngIf="getAttachments().length > 0"
+      mode="determinate"
+      value="getUploadPercentage(i) | async"
+    ></mat-progress-bar>
+  </mat-card-content>
+</mat-card>

frontend/src/app/chat/chat-controls/chat-controls.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChatControlsComponent } from './chat-controls.component';
+
+describe('ChatControlsComponent', () => {
+  let component: ChatControlsComponent;
+  let fixture: ComponentFixture<ChatControlsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ChatControlsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ChatControlsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/chat/chat-controls/chat-controls.component.ts

@@ -0,0 +1,85 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
+import { debounceTime, filter, throttleTime } from 'rxjs/operators';
+// import {FirebaseAttachmentService} from "@app/chat/services/firebase/firebase-attachment.service";
+import {FirebaseChatService} from "@app/chat/services/firebase/firebase-chat.service";
+
+@Component({
+  selector: 'app-chat-controls',
+  templateUrl: './chat-controls.component.html',
+  styleUrls: ['./chat-controls.component.scss']
+})
+export class ChatControlsComponent implements OnInit {
+  @Input() chatId: string = '';
+
+  messageControl: FormControl;
+  chatForm: FormGroup;
+
+  constructor(
+    // private attachmentService: FirebaseAttachmentService,
+    private chatService: FirebaseChatService,
+    private fb: FormBuilder
+  ) {
+    this.messageControl = new FormControl();
+    this.chatForm = this.fb.group({ message: this.messageControl });
+  }
+
+  ngOnInit() {
+    this.scrollBottom();
+
+    this.messageControl.valueChanges
+      .pipe(
+        filter(data => data !== ''),
+        throttleTime(1400)
+      )
+      .subscribe(data => {
+        // this.chatService.sendIsTyping(this.chatId).then();
+      });
+
+    this.messageControl.valueChanges
+      .pipe(
+        filter(data => data !== ''),
+        debounceTime(1500)
+      )
+      .subscribe(data => {
+        // this.chatService.deleteIsTyping(this.chatId).then();
+      });
+  }
+
+  submit(): void {
+    const msg = this.messageControl.value;
+    if (!msg) {
+      return alert('Please enter a message.');
+    }
+    this.chatService.sendMessage(this.chatId, msg).then();
+    // this.attachmentService.uploadAttachments().subscribe(
+    //     (res: any) => console.log(res),
+    //     (err: any) => console.log(err)
+    // );
+    this.messageControl.reset();
+    this.scrollBottom();
+  }
+
+  private scrollBottom(): void {
+    setTimeout(() => window.scrollTo(0, document.body.scrollHeight), 500);
+  }
+
+  setSelectedFiles(event: any): void {
+    // this.attachmentService.setSelectedFiles(event);
+  }
+
+  deleteAttachment(file: any): void {
+    // return this.attachmentService.deleteFile(file);
+  }
+
+  getAttachments(): File[] {
+    // return this.attachmentService.getFiles();
+    return []
+  }
+
+  hasAttachments() {
+    // return this.attachmentService.getFiles().length > 0;
+    false;
+  }
+}

frontend/src/app/chat/chat-header/chat-header.component.html

@@ -0,0 +1,9 @@
+<mat-toolbar color="primary" >
+        <span
+        >Asset Chat<span *ngIf="chatId"> - {{ chatId }}</span></span
+        >
+    <span style="flex: 1 1 auto;"></span>
+    <button mat-button routerLink="/" style="font-size: 20px;">
+        Back
+    </button>
+</mat-toolbar>

frontend/src/app/chat/chat-header/chat-header.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChatHeaderComponent } from './chat-header.component';
+
+describe('ChatHeaderComponent', () => {
+  let component: ChatHeaderComponent;
+  let fixture: ComponentFixture<ChatHeaderComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ChatHeaderComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ChatHeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/chat/chat-header/chat-header.component.ts

@@ -0,0 +1,10 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-chat-header',
+  templateUrl: './chat-header.component.html',
+  styleUrls: ['./chat-header.component.scss']
+})
+export class ChatHeaderComponent {
+  @Input() chatId: string = '';
+}

frontend/src/app/chat/chat-message/chat-message.component.html

@@ -0,0 +1,91 @@
+<div style="display: flex; flex-direction: column;">
+  <mat-chip
+    style="width: fit-content; align-self: center; margin: 8px"
+    *ngIf="isPreviousMessageFromOtherDay()"
+    color="accent"
+    selected
+    removable="false"
+    >{{ getDateDivider(msg) }}</mat-chip
+  >
+  <mat-card
+    style="box-shadow: none; background-color: transparent;"
+    [ngStyle]="{
+      'align-self': msg.uid !== user.uid ? 'flex-end' : 'flex-start',
+      'padding-top': !(isPredecessorSameAuthor() && isTemporalClose()) ? '16px' : '0px',
+      'padding-bottom': !(isPredecessorSameAuthor() && isTemporalClose()) ? '16px' : '0px'
+    }"
+  >
+    <!-- Message Header -->
+    <mat-card-header
+      [ngStyle]="{
+        'justify-content': 'flex-start',
+        'margin-bottom': '8px',
+        'flex-direction': msg.uid !== user.uid ? 'row-reverse' : 'row'
+      }"
+    >
+      <img
+        *ngIf="!(isPredecessorSameAuthor() && isTemporalClose())"
+        mat-card-avatar
+        [src]="msg.user.photoUrl || 'assets/account.png'"
+        width="50px"
+      />
+      <mat-card-title
+        *ngIf="!(isPredecessorSameAuthor() && isTemporalClose())"
+        style="font-size: 16px; margin-bottom: 6px;"
+      >
+        {{ getUserName(msg.user) }}
+      </mat-card-title>
+    </mat-card-header>
+    <mat-card-content
+      style="display: inline-flex; flex-direction: column; width: 100%;"
+    >
+      <!-- Message content-->
+      <mat-card
+        [ngStyle]="{
+          'background-color':
+            msg.uid !== user.uid ? 'lightslategrey' : '#536DFE',
+          color: msg.uid !== user.uid ? 'white' : 'white',
+          'align-self': msg.uid !== user.uid ? 'flex-end' : 'flex-start',
+          'text-align': msg.uid !== user.uid ? 'end' : 'start',
+          'border-top-right-radius': msg.uid !== user.uid ? '0px' : '4px',
+          'border-top-left-radius': msg.uid === user.uid ? '0px' : '4px',
+          'min-width': '150px',
+          'max-width': '100%',
+          'margin-bottom': '8px',
+          padding: '16px 12px 12px 12px'
+        }"
+      >
+        <div style="top: 2px;position: absolute;right: 4px; font-size: 12px; opacity: 0.6">
+          {{ getCreatedDate(msg) }}
+        </div>
+        <span style="overflow-wrap: break-word;">{{ msg.content }}</span>
+      </mat-card>
+
+      <button
+        *ngIf="allowsReply"
+        [ngStyle]="{
+          'align-self': msg.uid !== user.uid ? 'flex-end' : 'flex-start',
+          'margin-bottom': '8px',
+          'font-size': '10px',
+          'line-height': '18px'
+        }"
+        mat-stroked-button
+      >
+        REPLY
+      </button>
+
+      <!-- Attached files -->
+      <mat-chip-list
+        [ngStyle]="{
+          display: 'flex',
+          'justify-content': msg.uid !== user.uid ? 'flex-end' : 'flex-start'
+        }"
+      >
+        <mat-chip *ngFor="let attachment of msg.attachments">
+          <mat-icon>insert_drive_file</mat-icon>
+          {{ attachment.name }}
+        </mat-chip>
+      </mat-chip-list>
+    </mat-card-content>
+  </mat-card>
+</div>

frontend/src/app/chat/chat-message/chat-message.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChatMessageComponent } from './chat-message.component';
+
+describe('ChatMessageComponent', () => {
+  let component: ChatMessageComponent;
+  let fixture: ComponentFixture<ChatMessageComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ChatMessageComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ChatMessageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});