Spaces:

pykara
/

py-learn

Running

App Files Files Community

Oviya commited on 17 days ago

Commit

06c5ea6

1 Parent(s): 99b2002

update statichat

Browse files

Files changed (6) hide show

dist/gramm-ai/browser/assets/staticchat/bg-layout.png +3 -0
dist/gramm-ai/browser/index.html +1 -1
dist/gramm-ai/browser/{main-53XHVZC2.js → main-KU245MKS.js} +0 -0
src/app/staticchat/staticchat.component.css +15 -1
src/app/staticchat/staticchat.component.html +102 -97
src/assets/staticchat/bg-layout.png +3 -0

dist/gramm-ai/browser/assets/staticchat/bg-layout.png ADDED Viewed

Git LFS Details

SHA256: b03aba7cad156d26ab292172a07bed66adeb2a822adb3eb10044a6f353843118
Pointer size: 132 Bytes
Size of remote file: 1.16 MB

dist/gramm-ai/browser/index.html CHANGED Viewed

@@ -16,5 +16,5 @@
 </style><link rel="stylesheet" href="styles-TX4PRGSR.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles-TX4PRGSR.css"></noscript></head>
 <body>
   <app-root></app-root>
-<script src="polyfills-FFHMD2TL.js" type="module"></script><script src="main-53XHVZC2.js" type="module"></script></body>
 </html>

 </style><link rel="stylesheet" href="styles-TX4PRGSR.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles-TX4PRGSR.css"></noscript></head>
 <body>
   <app-root></app-root>
+<script src="polyfills-FFHMD2TL.js" type="module"></script><script src="main-KU245MKS.js" type="module"></script></body>
 </html>

dist/gramm-ai/browser/{main-53XHVZC2.js → main-KU245MKS.js} RENAMED Viewed

The diff for this file is too large to render. See raw diff

src/app/staticchat/staticchat.component.css CHANGED Viewed

@@ -4,12 +4,26 @@
   font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif !important;
 }
 /* ===== MAIN CONTAINER ===== */
 .chat-container {
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 91vh;
   padding: 2vw;
   gap: 2vw;
 }

   font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif !important;
 }
+.staticchat-container {
+  height: 100vh;
+  background: url('/assets/staticchat/bg-layout.png') repeat;
+}
+.nav-bar {
+  background-color: rgb(25 34 69);
+  box-shadow: 0 6px 18px rgba(0,0,0,0.42);
+  text-align: center;
+  color: white;
+  font-size: 2vw;
+  font-family: Amonk_Outline !important;
+  padding:1vw;
+}
 /* ===== MAIN CONTAINER ===== */
 .chat-container {
   display: flex;
   justify-content: center;
   align-items: center;
+  height: 89vh; /* keep viewport-based height */
   padding: 2vw;
   gap: 2vw;
 }

src/app/staticchat/staticchat.component.html CHANGED Viewed

@@ -1,115 +1,120 @@
-<div class="chat-container">
-  <div class="chat-window">
-    <button class="arrow-btn up" title="Prev message" (click)="showPreviousPair()">↑</button>
-    <!-- MESSAGES -->
-    <div class="chat-messages" #chatContainer>
-      <div *ngFor="let pair of pairedMessages; let i = index" class="pair" [attr.data-index]="i">
-        <!-- If user exists in pair (now shown first/top) -->
-        <div *ngIf="pair.user" class="message-row user-row">
-          <div class="message-bubble user-message">
-            <span style="font-size:1.5vw;">{{ pair.user.text }}</span>
-            <div class="message-time">
-              {{ pair.user.timestamp | date:'shortTime' }}
-            </div>
-          </div>
-          <img src="assets/staticchat/student.png" class="avatar" />
-        </div>
-        <!-- If bot exists in pair (now shown below user) -->
-        <div *ngIf="pair.bot" class="message-row bot-row">
-          <img src="assets/staticchat/teacher.png" class="avatar" />
-          <div class="message-bubble bot-message">
-            <span style="font-size:1.5vw;">{{ pair.bot.text }}</span>
-            <div class="mediaRow" *ngIf="pair.bot.rawData && (pair.bot.rawData?.audio_url || pair.bot.rawData?.video_url)">
-              <button class="chip" *ngIf="pair.bot.rawData?.audio_url" (click)="playAudio(pair.bot.rawData?.audio_url)">
-                🔊 Audio
-              </button>
-              <button class="chip" *ngIf="pair.bot.rawData?.video_url" (click)="playResponseVideo(pair.bot.rawData?.video_url)">
-                🎬 Video
-              </button>
-              <button class="chip" *ngIf="pair.bot.rawData?.detail_url" (click)="playResponseVideo(pair.bot.rawData?.detail_url)">
-                💡 Detail
-              </button>
-              <button class="chip" *ngIf="pair.bot.rawData?.story_url" (click)="playResponseVideo(pair.bot.rawData?.story_url)">
-                📖 Story
-              </button>
-              <button class="chip" *ngIf="pair.bot.rawData?.example_url" (click)="playResponseVideo(pair.bot.rawData?.example_url)">
-                🧪 Example
-              </button>
             </div>
-            <div class="message-time">
-              {{ pair.bot.timestamp | date:'shortTime' }}
             </div>
           </div>
-        </div>
-      </div>
-      <!-- Typing indicator -->
-      <div *ngIf="isTyping" class="typing-indicator">
-        <div class="dot"></div>
-        <div class="dot"></div>
-        <div class="dot"></div>
       </div>
-    </div>
-    <button class="arrow-btn down" title="Next message" (click)="showNextPair()">↓</button>
-    <!-- SUGGESTIONS DROPDOWN -->
-    <div *ngIf="showSuggestions && suggestedQuestions.length > 0" class="suggestions-box">
-      <div *ngFor="let question of suggestedQuestions"
-           class="suggestion-item"
-           (click)="selectQuestion(question)">
-        {{ question }}
       </div>
-    </div>
-    <!-- INPUT BAR -->
-    <form [formGroup]="chatForm" (ngSubmit)="sendMessage()" class="chat-input">
-      <!--<input type="text"
-         formControlName="message"
-         #messageInput
-         placeholder="Type your message..."
-         (focus)="onInputFocus()"
-         (input)="onInputChange()"
-         [readonly]="isSpeechProcessing" />-->
-      <input type="text"
-             formControlName="message"
-             #messageInput
-             [placeholder]="isListening ? '⏺ Listening...' : 'Type your message...'"
-             (focus)="onInputFocus()"
-             (input)="onInputChange()"
-             [readonly]="isSpeechProcessing || isListening" />
-      <button type="button"
-              class="micBtn"
-              [disabled]="!supported || isListening"
-              (click)="toggleMic()">
-        🎤
-      </button>
-      <div class="actions" *ngIf="showActions">
-        <button class="reject" (click)="reject()">❌</button>
-        <button class="accept" (click)="accept()">✅</button>
-      </div>
-      <button type="submit" [disabled]="!chatForm.valid">
-        ➤
-      </button>
-    </form>
-  </div>
-  <div class="video-window">
-    <video #videoPlayer autoplay muted playsinline></video>
-    <img class="play-pause-btn"
-         [src]="(currentVideoType !== 'blink' && isVideoPlaying) ? 'assets/staticchat/pause.png' : 'assets/staticchat/play.png'"
-         (click)="togglePlayPause()" />
   </div>
 </div>

+<div class="staticchat-container">
+  <div class="nav-bar">MJ-CHAT</div>
+  <div class="chat-container">
+    <div class="chat-window">
+      <button class="arrow-btn up" title="Prev message" (click)="showPreviousPair()">↑</button>
+      <!-- MESSAGES -->
+      <div class="chat-messages" #chatContainer>
+        <div *ngFor="let pair of pairedMessages; let i = index" class="pair" [attr.data-index]="i">
+          <!-- If user exists in pair (now shown first/top) -->
+          <div *ngIf="pair.user" class="message-row user-row">
+            <div class="message-bubble user-message">
+              <span style="font-size:1.5vw;">{{ pair.user.text }}</span>
+              <div class="message-time">
+                {{ pair.user.timestamp | date:'shortTime' }}
+              </div>
             </div>
+            <img src="assets/staticchat/student.png" class="avatar" />
+          </div>
+          <!-- If bot exists in pair (now shown below user) -->
+          <div *ngIf="pair.bot" class="message-row bot-row">
+            <img src="assets/staticchat/teacher.png" class="avatar" />
+            <div class="message-bubble bot-message">
+              <span style="font-size:1.5vw;">{{ pair.bot.text }}</span>
+              <div class="mediaRow" *ngIf="pair.bot.rawData && (pair.bot.rawData?.audio_url || pair.bot.rawData?.video_url)">
+                <button class="chip" *ngIf="pair.bot.rawData?.audio_url" (click)="playAudio(pair.bot.rawData?.audio_url)">
+                  🔊 Audio
+                </button>
+                <button class="chip" *ngIf="pair.bot.rawData?.video_url" (click)="playResponseVideo(pair.bot.rawData?.video_url)">
+                  🎬 Video
+                </button>
+                <button class="chip" *ngIf="pair.bot.rawData?.detail_url" (click)="playResponseVideo(pair.bot.rawData?.detail_url)">
+                  💡 Detail
+                </button>
+                <button class="chip" *ngIf="pair.bot.rawData?.story_url" (click)="playResponseVideo(pair.bot.rawData?.story_url)">
+                  📖 Story
+                </button>
+                <button class="chip" *ngIf="pair.bot.rawData?.example_url" (click)="playResponseVideo(pair.bot.rawData?.example_url)">
+                  🧪 Example
+                </button>
+              </div>
+              <div class="message-time">
+                {{ pair.bot.timestamp | date:'shortTime' }}
+              </div>
             </div>
           </div>
+        </div>
+        <!-- Typing indicator -->
+        <div *ngIf="isTyping" class="typing-indicator">
+          <div class="dot"></div>
+          <div class="dot"></div>
+          <div class="dot"></div>
+        </div>
       </div>
+      <button class="arrow-btn down" title="Next message" (click)="showNextPair()">↓</button>
+      <!-- SUGGESTIONS DROPDOWN -->
+      <div *ngIf="showSuggestions && suggestedQuestions.length > 0" class="suggestions-box">
+        <div *ngFor="let question of suggestedQuestions"
+             class="suggestion-item"
+             (click)="selectQuestion(question)">
+          {{ question }}
+        </div>
       </div>
+      <!-- INPUT BAR -->
+      <form [formGroup]="chatForm" (ngSubmit)="sendMessage()" class="chat-input">
+        <!--<input type="text"
+           formControlName="message"
+           #messageInput
+           placeholder="Type your message..."
+           (focus)="onInputFocus()"
+           (input)="onInputChange()"
+           [readonly]="isSpeechProcessing" />-->
+        <input type="text"
+               formControlName="message"
+               #messageInput
+               [placeholder]="isListening ? '⏺ Listening...' : 'Type your message...'"
+               (focus)="onInputFocus()"
+               (input)="onInputChange()"
+               [readonly]="isSpeechProcessing || isListening" />
+        <button type="button"
+                class="micBtn"
+                [disabled]="!supported || isListening"
+                (click)="toggleMic()">
+          🎤
+        </button>
+        <div class="actions" *ngIf="showActions">
+          <button class="reject" (click)="reject()">❌</button>
+          <button class="accept" (click)="accept()">✅</button>
+        </div>
+        <button type="submit" [disabled]="!chatForm.valid">
+          ➤
+        </button>
+      </form>
+    </div>
+    <div class="video-window">
+      <video #videoPlayer autoplay muted playsinline></video>
+      <img class="play-pause-btn"
+           [src]="(currentVideoType !== 'blink' && isVideoPlaying) ? 'assets/staticchat/pause.png' : 'assets/staticchat/play.png'"
+           (click)="togglePlayPause()" />
+    </div>
   </div>
 </div>

src/assets/staticchat/bg-layout.png ADDED Viewed

Git LFS Details

SHA256: b03aba7cad156d26ab292172a07bed66adeb2a822adb3eb10044a6f353843118
Pointer size: 132 Bytes
Size of remote file: 1.16 MB