Add Workflow Support in ADK Web and some major UI refactor

angular.json

@@ -33,15 +33,33 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.scss"
+              "src/styles.scss",
+              {
+                "input": "node_modules/prismjs/themes/prism.css",
+                "bundleName": "prism-light",
+                "inject": false
+              },
+              {
+                "input": "node_modules/prismjs/themes/prism-tomorrow.css",
+                "bundleName": "prism-dark",
+                "inject": false
+              }
             ],
             "scripts": [],
             "allowedCommonJsDependencies": [
               "string-to-color",
               "json-source-map",
               "natural-compare-lite",
               "ajv",
-              "jmespath"
+              "jmespath",
+              "prismjs",
+              "prismjs/components/prism-javascript",
+              "prismjs/components/prism-typescript",
+              "prismjs/components/prism-css",
+              "prismjs/components/prism-json",
+              "prismjs/components/prism-bash",
+              "prismjs/components/prism-python",
+              "prismjs/components/prism-yaml"
             ]
           },
           "configurations": {
@@ -105,7 +123,17 @@
               }
             ],
             "styles": [
-              "src/styles.scss"
+              "src/styles.scss",
+              {
+                "input": "node_modules/prismjs/themes/prism.css",
+                "bundleName": "prism-light",
+                "inject": false
+              },
+              {
+                "input": "node_modules/prismjs/themes/prism-tomorrow.css",
+                "bundleName": "prism-dark",
+                "inject": false
+              }
             ],
             "scripts": []
           }

fix_vars.js

@@ -0,0 +1,18 @@
+const fs = require('fs');
+const path = require('path');
+
+const chatComponentPath = path.resolve(__dirname, 'src/app/components/chat/chat.component.ts');
+
+let content = fs.readFileSync(chatComponentPath, 'utf8');
+
+// Fix unrenamed `messages`
+content = content.replace(/\.\.\.messages/g, '...uiEvents');
+content = content.replace(/messages\.slice/g, 'uiEvents.slice');
+content = content.replace(/ \= \[\.\.\.messages\];/g, ' = [...uiEvents];');
+content = content.replace(/messages\.findIndex/g, 'uiEvents.findIndex');
+content = content.replace(/uiEvents\.forEach\(msg \=\>/g, 'this.uiEvents().forEach(msg =>');
+// Let's verify if there are any standalone `messages`
+content = content.replace(/const existingIndex \= messages\.findIndex/g, 'const existingIndex = uiEvents.findIndex');
+
+fs.writeFileSync(chatComponentPath, content);
+console.log('Fixed chat.component.ts');

fix_vars_2.js

@@ -0,0 +1,23 @@
+const fs = require('fs');
+const path = require('path');
+
+const chatComponentPath = path.resolve(__dirname, 'src/app/components/chat/chat.component.ts');
+let content = fs.readFileSync(chatComponentPath, 'utf8');
+
+// Fix unrenamed `messages`
+content = content.replace(/\.\.\.messages/g, '...uiEvents');
+content = content.replace(/ \= \[\.\.\.messages\];/g, ' = [...uiEvents];');
+content = content.replace(/messages\.findIndex/g, 'uiEvents.findIndex');
+content = content.replace(/uiEvents\.forEach\(msg \=\>/g, 'this.uiEvents().forEach(msg =>');
+content = content.replace(/messages\.slice/g, 'uiEvents.slice');
+fs.writeFileSync(chatComponentPath, content);
+console.log('Fixed chat.component.ts');
+
+const chatPanelHtmlPath = path.resolve(__dirname, 'src/app/components/chat-panel/chat-panel.component.html');
+let htmlContent = fs.readFileSync(chatPanelHtmlPath, 'utf8');
+htmlContent = htmlContent.replace(/\[allMessages\]\=\"messages\"/g, '[allMessages]="uiEvents"');
+htmlContent = htmlContent.replace(/\[messages\]\=\"messages\"/g, '[messages]="uiEvents"');
+htmlContent = htmlContent.replace(/messages\.length/g, 'uiEvents.length');
+htmlContent = htmlContent.replace(/messages\.includes/g, 'uiEvents.includes');
+fs.writeFileSync(chatPanelHtmlPath, htmlContent);
+console.log('Fixed chat-panel.component.html');

rename_messages.js

@@ -0,0 +1,51 @@
+const fs = require('fs');
+const path = require('path');
+
+const srcDir = path.resolve(__dirname, 'src/app/components');
+
+function walkDir(dir, callback) {
+  fs.readdirSync(dir).forEach(f => {
+    let dirPath = path.join(dir, f);
+    let isDirectory = fs.statSync(dirPath).isDirectory();
+    isDirectory ? walkDir(dirPath, callback) : callback(path.join(dir, f));
+  });
+}
+
+walkDir(srcDir, function(filePath) {
+  if (filePath.endsWith('.ts') || filePath.endsWith('.html') || filePath.endsWith('.scss')) {
+    if (filePath.includes('chat.component') || filePath.includes('chat-panel.component')) {
+      let originalContent = fs.readFileSync(filePath, 'utf8');
+      let newContent = originalContent
+        .replace(/this\.messages/g, 'this.uiEvents')
+        .replace(/\bmessages\(\)/g, 'uiEvents()')
+        .replace(/messages = signal/g, 'uiEvents = signal')
+        .replace(/messages\.update/g, 'uiEvents.update')
+        .replace(/\(messages \=\> /g, '(uiEvents => ')
+        .replace(/messages\.map/g, 'uiEvents.map')
+        .replace(/messages\.filter/g, 'uiEvents.filter')
+        .replace(/messages\.forEach/g, 'uiEvents.forEach')
+        .replace(/messages\.length/g, 'uiEvents.length')
+        .replace(/\[messages\]="messages\(\)"/g, '[uiEvents]="uiEvents()"')
+        .replace(/messages\)/g, 'uiEvents)')
+        .replace(/\[messages\]=/, '[uiEvents]=')
+        .replace(/@Input\(\) messages\: /g, '@Input() uiEvents: ')
+        .replace(/messages\[/g, 'uiEvents[')
+        .replace(/let i = 0; i < messages\./g, 'let i = 0; i < uiEvents.')
+        .replace(/changes\['messages'\]/g, "changes['uiEvents']")
+        .replace(/for \(let message of messages/g, 'for (let uiEvent of uiEvents')
+        .replace(/for \(const message of messages/g, 'for (const uiEvent of uiEvents')
+        .replace(/for \(let message of this\.messages/g, 'for (let uiEvent of this.uiEvents')
+        .replace(/\.messages\s{0,9}=\s{0,9}messages;/g, '.uiEvents = uiEvents;')
+        .replace(/\bconst messages = component.messages\(\);/g, 'const uiEvents = component.uiEvents();')
+        .replace(/expect\(messages/g, 'expect(uiEvents')
+        .replace(/component\.messages\(\)/g, 'component.uiEvents()')
+        .replace(/component\.messages\.set/g, 'component.uiEvents.set')
+        .replace(/chatPanelComponent\.messages/g, 'chatPanelComponent.uiEvents');
+
+      if (originalContent !== newContent) {
+        fs.writeFileSync(filePath, newContent);
+        console.log('Updated', filePath);
+      }
+    }
+  }
+});

src/app/app.component.spec.ts

@@ -38,6 +38,7 @@ import {GRAPH_SERVICE} from './core/services/interfaces/graph';
 import {LOCAL_FILE_SERVICE} from './core/services/interfaces/localfile';
 import {SAFE_VALUES_SERVICE} from './core/services/interfaces/safevalues';
 import {STRING_TO_COLOR_SERVICE} from './core/services/interfaces/string-to-color';
+import {THEME_SERVICE} from './core/services/interfaces/theme';
 import {LOCATION_SERVICE} from './core/services/location.service';
 import {SESSION_SERVICE} from './core/services/interfaces/session';
 import {STREAM_CHAT_SERVICE} from './core/services/interfaces/stream-chat';
@@ -55,6 +56,7 @@ import {MockSafeValuesService} from './core/services/testing/mock-safevalues.ser
 import {MockSessionService} from './core/services/testing/mock-session.service';
 import {MockStreamChatService} from './core/services/testing/mock-stream-chat.service';
 import {MockStringToColorService} from './core/services/testing/mock-string-to-color.service';
+import {MockThemeService} from './core/services/testing/mock-theme.service';
 import {MockTraceService} from './core/services/testing/mock-trace.service';
 import {MockUiStateService} from './core/services/testing/mock-ui-state.service';
 import {MockVideoService} from './core/services/testing/mock-video.service';
@@ -193,6 +195,10 @@ describe('AppComponent', () => {
               provide: AGENT_BUILDER_SERVICE,
               useValue: mockAgentBuilderService,
             },
+            {
+              provide: THEME_SERVICE,
+              useClass: MockThemeService,
+            },
           ],
         })
         .compileComponents();

src/app/app.component.ts

@@ -19,7 +19,7 @@ import {ChangeDetectionStrategy, Component} from '@angular/core';
 import { ChatComponent } from './components/chat/chat.component';
 
 @Component({
-    changeDetection: ChangeDetectionStrategy.Eager,
+    changeDetection: ChangeDetectionStrategy.Default,
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrl: './app.component.scss',

src/app/components/add-callback-dialog/add-callback-dialog.component.scss

@@ -42,12 +42,7 @@ mat-form-field {
   margin-top: 8px !important;
 }
 
-.mat-mdc-raised-button.mat-secondary:not([disabled]) {
-  background-color: #8ab4f8;
-}
-
 .callback-info-container {
-  background-color: rgba(138, 180, 248, 0.08);
   border: 1px solid rgba(138, 180, 248, 0.2);
   border-radius: 8px;
   padding: 16px;

src/app/components/add-callback-dialog/add-callback-dialog.component.ts

@@ -44,7 +44,7 @@ export class ImmediateErrorStateMatcher implements ErrorStateMatcher {
 }
 
 @Component({
-  changeDetection: ChangeDetectionStrategy.Eager,
+  changeDetection: ChangeDetectionStrategy.Default,
   selector: 'app-add-callback-dialog',
   templateUrl: './add-callback-dialog.component.html',
   styleUrl: './add-callback-dialog.component.scss',