feat(chat): improve a little bit prompt

apps/backend/src/modules/prompts/context/create-context-prompt.ts

@@ -1,6 +1,8 @@
 import { xml } from '../xml';
+import { createCriticalContextPrompt } from './create-critical-context-prompt';
 import {
   createActionButtonsContextPrompt,
+  createHtmlPreviewContextPrompt,
   createQuotesContextPrompt,
 } from './features';
 import {
@@ -19,11 +21,13 @@ export function createContextPrompt({ personality }: Attrs) {
       description: 'A general chat context for the user.',
     },
     children: [
+      createCriticalContextPrompt(),
       personality
         ? createCustomPersonaContextPrompt(personality)
         : createDefaultPersonaContextPrompt(),
       createQuotesContextPrompt(),
       createActionButtonsContextPrompt(),
+      createHtmlPreviewContextPrompt(),
     ],
   });
 }

apps/backend/src/modules/prompts/context/create-critical-context-prompt.ts

@@ -0,0 +1,12 @@
+import { xml } from '../xml';
+
+export function createCriticalContextPrompt() {
+  return xml('user-language', {
+    attributes: {
+      description: 'User language',
+    },
+    children: [
+      xml('rule', { children: ['ALWAYS respond with user language unless specified otherwise.'] }),
+    ],
+  });
+}

apps/backend/src/modules/prompts/context/features/create-html-preview-context-prompt.ts

@@ -0,0 +1,55 @@
+import { xml } from '../../xml';
+import { featureXML } from './feature-xml-tag';
+
+export function createHtmlPreviewContextPrompt(): string {
+  return featureXML({
+    name: 'HTML Preview',
+    description: 'You can embed HTML content with interactive data visualizations, statistical analysis, and charts using markdown HTML tags. When presenting data analysis results, prefer visual representations using charts and graphs placed at the beginning of the section, followed by explanatory text.',
+    children: [
+      xml('rules', {
+        children: [
+          xml('rule', { children: ['Place charts and visualizations before their descriptive text'] }),
+          xml('rule', { children: ['All HTML must be self-contained with no local file dependencies'] }),
+          xml('rule', { children: ['Include all JavaScript code inline using <script> tags'] }),
+          xml('rule', { children: ['Include all CSS styles inline using <style> tags'] }),
+          xml('rule', { children: ['External libraries must be loaded from CDN sources only'] }),
+          xml('rule', { children: ['Prefer popular CDNs like cdnjs, unpkg, or jsdelivr'] }),
+          xml('rule', { children: ['When presenting data analysis, use visualization libraries like Chart.js, D3.js, or Plotly.js'] }),
+          xml('rule', { children: ['Ensure visualizations are responsive and properly sized'] }),
+          xml('rule', { children: ['Always provide fallback content in case JavaScript is disabled'] }),
+          xml('rule', { children: ['For data analysis results, combine charts with brief textual explanations below'] }),
+          xml('rule', { children: ['Place charts at the beginning of the section, followed by explanatory text'] }),
+        ],
+      }),
+      xml('examples', {
+        children: [
+          xml('example', {
+            attributes: {
+              description: 'Example of a data visualization chart',
+            },
+            children: [
+              `\`\`\`html
+<div class="chart-container">
+  <style>
+    .chart-container { width: 100%; height: 400px; }
+  </style>
+  <div id="myChart"></div>
+  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+  <script>
+    // Example of data visualization
+    const data = [{
+      values: [19, 26, 55],
+      labels: ['Analysis A', 'Analysis B', 'Analysis C'],
+      type: 'pie'
+    }];
+    Plotly.newPlot('myChart', data);
+  </script>
+</div>
+\`\`\``,
+            ],
+          }),
+        ],
+      }),
+    ],
+  });
+}

apps/backend/src/modules/prompts/context/features/index.ts

@@ -1,3 +1,4 @@
 export * from './create-action-buttons-context-prompt';
+export * from './create-html-preview-context-prompt';
 export * from './create-quotes-context-prompt';
 export * from './feature-xml-tag';