From 41cda2da0f0b87942ba87854a01a8ee3d978d41c Mon Sep 17 00:00:00 2001
From: sanchezcarlosjr <24639141+sanchezcarlosjr@users.noreply.github.com>
Date: Mon, 20 Nov 2023 19:19:26 -0800
Subject: [PATCH] feat: create assistant with gradio web component

---
 src/app/notebook/assistant/assistant.component.css  | 6 +++---
 src/app/notebook/assistant/assistant.component.html | 2 +-
 src/app/notebook/assistant/assistant.component.ts   | 2 +-
 src/app/notebook/notebook.module.ts                 | 5 +++--
 src/index.html                                      | 2 ++
 src/styles.css                                      | 3 ++-
 6 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/app/notebook/assistant/assistant.component.css b/src/app/notebook/assistant/assistant.component.css
index d301c01..436cf4f 100644
--- a/src/app/notebook/assistant/assistant.component.css
+++ b/src/app/notebook/assistant/assistant.component.css
@@ -15,9 +15,9 @@
 .chatbot {
   border: 0;
   position: fixed;
-  bottom: 4em;
+  bottom: 7em;
   right: 2em;
-  width: 30em;
-  height: 42em;
+  width: 32em;
+  height: 43em;
   z-index: 2;
 }
diff --git a/src/app/notebook/assistant/assistant.component.html b/src/app/notebook/assistant/assistant.component.html
index 9e2b1cb..3cddc23 100644
--- a/src/app/notebook/assistant/assistant.component.html
+++ b/src/app/notebook/assistant/assistant.component.html
@@ -1,2 +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://evatutor.sanchezcarlosjr.com/"></iframe>
+<gradio-app *ngIf="showChatbot" info="false" class="chatbot" src="https://evatutor.sanchezcarlosjr.com/"></gradio-app>
diff --git a/src/app/notebook/assistant/assistant.component.ts b/src/app/notebook/assistant/assistant.component.ts
index e0254fb..6427f76 100644
--- a/src/app/notebook/assistant/assistant.component.ts
+++ b/src/app/notebook/assistant/assistant.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
 
 @Component({
   selector: 'app-assistant',
diff --git a/src/app/notebook/notebook.module.ts b/src/app/notebook/notebook.module.ts
index 62c78f1..8e07707 100644
--- a/src/app/notebook/notebook.module.ts
+++ b/src/app/notebook/notebook.module.ts
@@ -1,4 +1,4 @@
-import {NgModule} from '@angular/core';
+import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';
 import {CommonModule, NgOptimizedImage} from '@angular/common';
 
 import {NotebookRoutingModule} from './notebook-routing.module';
@@ -61,7 +61,8 @@ import { AssistantComponent } from './assistant/assistant.component';
     MatRippleModule,
     MatRadioModule,
     NgOptimizedImage
-  ]
+  ],
+  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
 })
 export class NotebookModule {
 }
diff --git a/src/index.html b/src/index.html
index 983c38c..08d577e 100644
--- a/src/index.html
+++ b/src/index.html
@@ -14,5 +14,7 @@
   <app-root></app-root>
   <noscript>Please enable JavaScript to continue using this application.</noscript>
   <script defer src="https://cdn.jsdelivr.net/pyodide/v0.23.1/full/pyodide.js"></script>
+  <script defer type="module" src="https://gradio.s3-us-west-2.amazonaws.com/4.4.1/gradio.js"
+  ></script>
 </body>
 </html>
diff --git a/src/styles.css b/src/styles.css
index 8edbd86..ea7f261 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -32,6 +32,7 @@ main {
   display: block;
 }
 
+
 /**
  * Correct the font size and margin on `h1` elements within `section` and
  * `article` contexts in Chrome, Firefox, and Safari.
@@ -842,4 +843,4 @@ py-config {
 /* Mermaid */
 [aria-roledescription="error"] {
   display: none;
-}
\ No newline at end of file
+}