mermaid support

backend/src/entities/ai/use-cases/request-info-from-table-with-ai-v4.use.case.ts

@@ -476,6 +476,8 @@ IMPORTANT:
 - For MongoDB databases, call executeAggregationPipeline with the aggregation pipeline
 - The user cannot see the query results until you execute it with the appropriate tool
 - Always provide your answers in a conversational, human-friendly format
+- Use mermaid syntax for any diagrams or charts
+- Use markdown formatting for tables
 Remember that all responses should be clear and user-friendly, explaining technical details when necessary.`;
   }
 

frontend/angular.json

@@ -35,7 +35,8 @@
             "stylePreprocessorOptions": {
               "includePaths": ["node_modules/@brumeilde/ngx-theme/presets/material"]
             },
-            "scripts": [],
+            "scripts": [
+            ],
             "vendorChunk": true,
             "extractLicenses": false,
             "buildOptimizer": false,

frontend/package.json

@@ -46,6 +46,7 @@
     "json5": "^2.2.3",
     "libphonenumber-js": "^1.12.9",
     "lodash": "^4.17.21",
+    "mermaid": "^11.12.1",
     "monaco-editor": "0.44.0",
     "ng-dynamic-component": "^10.7.0",
     "ngx-cookie-service": "^19.0.0",

frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css

@@ -47,6 +47,51 @@
     z-index: 0;
 }
 
+.ai-panel-sidebar-content ::ng-deep .ai-message table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 8px 0;
+    font-size: 14px;
+}
+
+.ai-panel-sidebar-content ::ng-deep .ai-message table thead {
+    background-color: rgba(0, 0, 0, 0.04);
+}
+
+@media (prefers-color-scheme: dark) {
+    .ai-panel-sidebar-content ::ng-deep .ai-message table thead {
+        background-color: rgba(255, 255, 255, 0.04);
+    }
+}
+
+.ai-panel-sidebar-content ::ng-deep .ai-message table th,
+.ai-panel-sidebar-content ::ng-deep .ai-message table td {
+    padding: 8px 12px;
+    text-align: left;
+    border: 1px solid rgba(0, 0, 0, 0.12);
+}
+
+@media (prefers-color-scheme: dark) {
+    .ai-panel-sidebar-content ::ng-deep .ai-message table th,
+    .ai-panel-sidebar-content ::ng-deep .ai-message table td {
+        border: 1px solid rgba(255, 255, 255, 0.12);
+    }
+}
+
+.ai-panel-sidebar-content ::ng-deep .ai-message table th {
+    font-weight: 600;
+}
+
+.ai-panel-sidebar-content ::ng-deep .ai-message table tbody tr:hover {
+    background-color: rgba(0, 0, 0, 0.02);
+}
+
+@media (prefers-color-scheme: dark) {
+    .ai-panel-sidebar-content ::ng-deep .ai-message table tbody tr:hover {
+        background-color: rgba(255, 255, 255, 0.02);
+    }
+}
+
 @media (prefers-color-scheme: dark) {
     .ai-panel-sidebar-content {
         border-left: 1px solid var(--mat-sidenav-container-divider-color);

frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.html

@@ -21,7 +21,8 @@ <h2 class="mat-heading-2 ai-panel-sidebar__title">
         <div *ngIf="messagesChain.length; else suggestions" class="ai-message-chain-box" #chatContainer>
             <div class="ai-message-chain">
                 <div *ngFor="let message of messagesChain" class="{{message.type}}-message">
-                    <markdown>{{message.text}}</markdown>
+                    <span style="white-space: pre-wrap" *ngIf="message.type == 'user'">{{message.text}}</span>
+                    <markdown *ngIf="message.type == 'ai'" mermaid>{{message.text}}</markdown>
                 </div>
             </div>
         </div>

frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.ts

@@ -71,6 +71,12 @@ export class DbTableAiPanelComponent implements OnInit, OnDestroy {
     });
   }
 
+  async ngAfterViewInit() {
+    const mermaid = await import("mermaid")
+    //@ts-expect-error dynamic load of mermaid
+    window.mermaid = mermaid;
+  };
+
   ngOnDestroy() {
     this.angulartics2.eventTrack.next({
       action: 'AI panel: destroyed',

frontend/yarn.lock

@@ -6726,6 +6726,7 @@ __metadata:
     karma-jasmine-html-reporter: ^2.1.0
     libphonenumber-js: ^1.12.9
     lodash: ^4.17.21
+    mermaid: ^11.12.1
     monaco-editor: 0.44.0
     ng-dynamic-component: ^10.7.0
     ngx-cookie-service: ^19.0.0