From 01ee48be50bd23bc4bed1835cba39267b8ebf411 Mon Sep 17 00:00:00 2001 From: Andrii Kostenko Date: Fri, 14 Nov 2025 08:05:55 +0000 Subject: [PATCH 1/6] mermaid support --- frontend/angular.json | 4 +++- .../db-table-ai-panel/db-table-ai-panel.component.html | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/frontend/angular.json b/frontend/angular.json index 32dd8e811..d5d45e553 100644 --- a/frontend/angular.json +++ b/frontend/angular.json @@ -35,7 +35,9 @@ "stylePreprocessorOptions": { "includePaths": ["node_modules/@brumeilde/ngx-theme/presets/material"] }, - "scripts": [], + "scripts": [ + "node_modules/mermaid/dist/mermaid.min.js" + ], "vendorChunk": true, "extractLicenses": false, "buildOptimizer": false, diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.html b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.html index e53ee953a..9938c6b2c 100644 --- a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.html +++ b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.html @@ -21,7 +21,7 @@

- {{message.text}} + {{message.text}}
From 98f53fbb968e638ac4984f9027cf34cf47f09056 Mon Sep 17 00:00:00 2001 From: Andrii Kostenko Date: Fri, 14 Nov 2025 08:29:51 +0000 Subject: [PATCH 2/6] disable markdown ui on user input --- .../db-table-ai-panel/db-table-ai-panel.component.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.html b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.html index 9938c6b2c..64f23ffc0 100644 --- a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.html +++ b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.html @@ -21,7 +21,8 @@

- {{message.text}} + {{message.text}} + {{message.text}}
From 264e8700687ffce8d2463f2706d5758ae12ce367 Mon Sep 17 00:00:00 2001 From: Andrii Kostenko Date: Fri, 14 Nov 2025 08:30:45 +0000 Subject: [PATCH 3/6] mermaid as a direct dependency --- frontend/package.json | 1 + frontend/yarn.lock | 1 + 2 files changed, 2 insertions(+) diff --git a/frontend/package.json b/frontend/package.json index 8f9ef28c6..b616601d4 100644 --- a/frontend/package.json +++ b/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", diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 2260f4765..c64fa4d11 100644 --- a/frontend/yarn.lock +++ b/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 From 41894c20d225b6096586dfc4e0576f2c5d051a38 Mon Sep 17 00:00:00 2001 From: Andrii Kostenko Date: Fri, 14 Nov 2025 09:15:53 +0000 Subject: [PATCH 4/6] dynamically load mermaid --- frontend/angular.json | 1 - .../db-table-ai-panel/db-table-ai-panel.component.ts | 6 ++++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/frontend/angular.json b/frontend/angular.json index d5d45e553..433a32a67 100644 --- a/frontend/angular.json +++ b/frontend/angular.json @@ -36,7 +36,6 @@ "includePaths": ["node_modules/@brumeilde/ngx-theme/presets/material"] }, "scripts": [ - "node_modules/mermaid/dist/mermaid.min.js" ], "vendorChunk": true, "extractLicenses": false, diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.ts b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.ts index 2c1c1e039..f21ae3eab 100644 --- a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.ts +++ b/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', From d138f06c78298e22dff72a4a1bb2dd84ed505f43 Mon Sep 17 00:00:00 2001 From: Andrii Kostenko Date: Fri, 14 Nov 2025 09:19:15 +0000 Subject: [PATCH 5/6] table view --- .../db-table-ai-panel.component.css | 45 +++++++++++++++++++ 1 file changed, 45 insertions(+) diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css index 944d19b6e..6665fa7c2 100644 --- a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css +++ b/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); From 1f22a8de41f1e58d531315523c5b51661b21de64 Mon Sep 17 00:00:00 2001 From: Andrii Kostenko Date: Fri, 14 Nov 2025 09:27:02 +0000 Subject: [PATCH 6/6] tell AI to use mermaid --- .../ai/use-cases/request-info-from-table-with-ai-v4.use.case.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/backend/src/entities/ai/use-cases/request-info-from-table-with-ai-v4.use.case.ts b/backend/src/entities/ai/use-cases/request-info-from-table-with-ai-v4.use.case.ts index 96b00c3fd..3d0a78efd 100644 --- a/backend/src/entities/ai/use-cases/request-info-from-table-with-ai-v4.use.case.ts +++ b/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.`; }