feat: add input

Author: Angular2Guy

frontend/src/angular/src/app/function-search/function-search.component.html

@@ -70,7 +70,7 @@
         [dataSource]="dataSource"      
         class="example-tree"
         >
-        <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
+        <mat-nested-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
           <div class="tree-node">
             <div>
               <span i18n="@@functionSearchTitle">Title</span>: {{ node.value1 }}
@@ -79,7 +79,7 @@
               <span i18n="@@functionSearchSummary">Summary</span>: {{ node.value2 }}
             </div>
           </div>
-        </mat-tree-node>
+        </mat-nested-tree-node>
         <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
           <div class="mat-tree-node">
             <button

frontend/src/angular/src/app/mcp-client/mcp-client.component.html

@@ -24,3 +24,14 @@
     </div>
   </div>
 </mat-toolbar>
+<div class="my-input-container">
+  <div class="my-textarea">
+    <mat-form-field class="example-full-width">
+      <mat-label>Query about books or movies</mat-label>
+      <textarea matInput placeholder="Ask about books or movies."></textarea>
+    </mat-form-field>
+  </div>
+  <div class="my-button">
+    <button matButton="filled">Basic</button>    
+  </div>
+</div>

frontend/src/angular/src/app/mcp-client/mcp-client.component.scss

@@ -10,4 +10,44 @@
    See the License for the specific language governing permissions and
    limitations under the License.
  */
- 
+ .toolbar-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  width: 100%;
+}
+
+.example-fill-remaining-space {
+  // This fills the remaining space, by using flexbox.
+  // Every toolbar row uses a flexbox row layout.
+  flex: 1 1 auto;
+}
+
+.example-full-width {
+  width: 100%;
+}
+
+ .my-input-container {
+  display: flex;  
+  flex-wrap: nowrap;
+  width: 100%;
+  height: 100px;
+  padding: 5px;
+  align-items: center;
+ }
+
+.my-textarea {
+    flex-grow: 1;  
+    height: 100px;
+    padding: 5px;
+  }
+
+ .my-button {    
+  padding: 15px;
+ }
+ 
+.example-full-width {
+  width: 100%;
+}
+

frontend/src/angular/src/app/mcp-client/mcp-client.component.ts

@@ -14,14 +14,19 @@ import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatToolbarModule } from '@angular/material/toolbar';
+import {MatInputModule} from '@angular/material/input';
+import {MatFormFieldModule} from '@angular/material/form-field';
 import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-mcp-client',
   imports: [
     CommonModule,
 		MatToolbarModule,
-		MatButtonModule],
+		MatButtonModule,
+		MatInputModule,
+		MatFormFieldModule
+	],
   templateUrl: './mcp-client.component.html',
   styleUrl: './mcp-client.component.scss'
 })