feat: show chatbot

src/app/notebook/assistant/assistant.component.css

@@ -0,0 +1,23 @@
+.chatbot-toggle {
+  position: fixed;
+  bottom: 1em;
+  right: 1.5em;
+  width: 4em;
+  height: 4em;
+  background-color: #f1f1f1;
+  border-radius: 20em;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  z-index: 3;
+  cursor: pointer;
+}
+
+.chatbot {
+  border: 0;
+  position: fixed;
+  bottom: 4em;
+  right: 2em;
+  width: 30em;
+  height: 42em;
+  z-index: 2;
+}

src/app/notebook/assistant/assistant.component.html

@@ -0,0 +1,2 @@
+<img (click)="toggleChatbot()"  class="chatbot-toggle" ngSrc="../../../assets/avatar.png" alt="avatar.png" height="512" width="512">
+<iframe *ngIf="showChatbot" class="chatbot" src="https://e9c998d63c4940750c.gradio.live/"></iframe>

src/app/notebook/assistant/assistant.component.spec.ts

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

src/app/notebook/assistant/assistant.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-assistant',
+  templateUrl: './assistant.component.html',
+  styleUrls: ['./assistant.component.css']
+})
+export class AssistantComponent {
+  showChatbot = false;
+  toggleChatbot() {
+    this.showChatbot = !this.showChatbot;
+  }
+}

src/app/notebook/notebook.component.html

@@ -43,3 +43,5 @@
 </mat-toolbar>
 
 <section id="editor-js"><p *ngIf="loading">Loading...</p></section>
+
+<app-assistant></app-assistant>

src/app/notebook/notebook.module.ts

@@ -1,5 +1,5 @@
 import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
+import {CommonModule, NgOptimizedImage} from '@angular/common';
 
 import {NotebookRoutingModule} from './notebook-routing.module';
 import {NotebookComponent} from './notebook.component';
@@ -26,6 +26,7 @@ import { ShareDialogComponent } from './share-dialog.component';
 import {MatDialogModule} from "@angular/material/dialog";
 import { ClipboardModule } from '@angular/cdk/clipboard';
 import {HistoryComponent} from "./history.component";
+import { AssistantComponent } from './assistant/assistant.component';
 
 @NgModule({
   declarations: [
@@ -35,30 +36,32 @@ import {HistoryComponent} from "./history.component";
     TreeComponent,
     ShareDialogComponent,
     HistoryComponent,
-    CodeComponent
+    CodeComponent,
+    AssistantComponent
   ],
-    imports: [
-        CommonModule,
-        NotebookRoutingModule,
-        JsonFormsModule,
-        JsonFormsAngularMaterialModule,
-        MatAutocompleteModule,
-        MatButtonModule,
-        MatToolbarModule,
-        MatMenuModule,
-        MatButtonModule,
-        MatSnackBarModule,
-        FormsModule,
-        MatDialogModule,
-        MatTableModule,
-        MatSortModule,
-        MatPaginatorModule,
-        MatTreeModule,
-        ClipboardModule,
-        MatCardModule,
-        MatRippleModule,
-        MatRadioModule
-    ]
+  imports: [
+    CommonModule,
+    NotebookRoutingModule,
+    JsonFormsModule,
+    JsonFormsAngularMaterialModule,
+    MatAutocompleteModule,
+    MatButtonModule,
+    MatToolbarModule,
+    MatMenuModule,
+    MatButtonModule,
+    MatSnackBarModule,
+    FormsModule,
+    MatDialogModule,
+    MatTableModule,
+    MatSortModule,
+    MatPaginatorModule,
+    MatTreeModule,
+    ClipboardModule,
+    MatCardModule,
+    MatRippleModule,
+    MatRadioModule,
+    NgOptimizedImage
+  ]
 })
 export class NotebookModule {
 }