+
{{ message.content|linebreaks }}
{{ message.timestamp|date:"H:i" }}
@@ -709,8 +734,8 @@ class ChatInterface {
const bubbleDiv = document.createElement('div');
bubbleDiv.className = 'message-bubble';
- // Convert line breaks to
tags
- const formattedContent = content.replace(/\n/g, '
');
+ // Use the shared formatting function
+ const formattedContent = formatMarkdownContent(content);
bubbleDiv.innerHTML = formattedContent;
// Add timestamp
@@ -762,6 +787,9 @@ class ChatInterface {
document.addEventListener('DOMContentLoaded', function() {
new ChatInterface();
+ // Format existing messages with markdown
+ formatExistingMessages();
+
// Clear any old localStorage data for sessions
const sessionId = document.body.getAttribute('data-session-id');
if (sessionId) {
@@ -776,6 +804,42 @@ document.addEventListener('DOMContentLoaded', function() {
}
});
+// Format existing messages on page load
+function formatExistingMessages() {
+ const messageBubbles = document.querySelectorAll('.message-bubble[data-raw-content]');
+ messageBubbles.forEach(bubble => {
+ const rawContent = bubble.getAttribute('data-raw-content');
+ if (rawContent) {
+ const formattedContent = formatMarkdownContent(rawContent);
+ // Only replace the content part, preserve the timestamp
+ const timeElement = bubble.querySelector('.message-time');
+ const timeHTML = timeElement ? timeElement.outerHTML : '';
+ bubble.innerHTML = formattedContent + timeHTML;
+ }
+ });
+}
+
+// Helper function to format markdown content
+function formatMarkdownContent(content) {
+ return content
+ // Convert headers
+ .replace(/^## (.*$)/gim, '
$1
')
+ .replace(/^### (.*$)/gim, '
$1
')
+ // Convert bold text
+ .replace(/\*\*(.*?)\*\*/g, '
$1')
+ // Convert bullet points
+ .replace(/^• (.*$)/gim, '
$1')
+ .replace(/^- (.*$)/gim, '
$1')
+ // Convert line breaks
+ .replace(/\n/g, '
')
+ // Wrap consecutive list items in ul tags
+ .replace(/(
.*?<\/li>(
)*)+/gs, '')
+ // Clean up extra breaks around lists
+ .replace(/(- .*?<\/li>)(
)*( - .*?<\/li>)*<\/ul>/gs, function(match) {
+ return match.replace(/
/g, '');
+ });
+}
+
// Download functionality
function toggleDownloadMenu() {
const menu = document.getElementById('downloadMenu');
diff --git a/agents/views.py b/agents/views.py
index 2c953fb..c63ed6e 100644
--- a/agents/views.py
+++ b/agents/views.py
@@ -544,7 +544,22 @@ def start_chat_session(request):
}, status=status.HTTP_500_INTERNAL_SERVER_ERROR)
# Send welcome message
- welcome_message = f"Welcome to {agent.name}! I'm here to help you with 5 Whys analysis. What problem would you like to analyze?"
+ welcome_message = f"""## Welcome to {agent.name}! 🔍
+
+I'm here to guide you through the **5 Whys methodology** - a powerful problem-solving technique to uncover root causes.
+
+### How It Works:
+• **Ask "Why" 5 times** to drill down from symptoms to root causes
+• **Systematic analysis** of Occurrence, Detection, and Prevention
+• **Actionable insights** for effective solutions
+
+### Getting Started:
+Please describe the **specific problem** you'd like to analyze. Include:
+- What happened?
+- When did it occur?
+- What are the immediate impacts?
+
+Let's discover the root cause together! 💪"""
ChatMessage.objects.create(
session=chat_session,
@@ -604,7 +619,25 @@ def send_chat_message(request):
# Prepare webhook payload
webhook_payload = {
"message": {
- "text": f"Chat message: {message_content}. Provide helpful guidance about 5 Whys analysis. Do not generate the final report - just chat and help the user understand their problem."
+ "text": f"""User message: "{message_content}"
+
+Provide helpful 5 Whys analysis guidance with professional formatting:
+
+FORMATTING REQUIREMENTS:
+- Use markdown headers (##, ###) for sections
+- Use **bold** for key terms and emphasis
+- Use bullet points (•) for lists
+- Use numbered lists (1., 2., 3.) for steps
+- Structure responses with clear sections
+- Add relevant emojis for engagement
+
+CONTENT GUIDELINES:
+- Guide through 5 Whys methodology systematically
+- Ask probing questions about Occurrence, Detection, Prevention
+- Help user drill down from symptoms to root causes
+- Keep responses conversational but structured
+- Do not generate final reports - focus on interactive guidance
+- Encourage deeper thinking with follow-up questions"""
},
"sessionId": session_id,
"userId": str(request.user.id),
diff --git a/templates/components/previous_sessions_widget.html b/templates/components/previous_sessions_widget.html
index b65b083..2dfc0c8 100644
--- a/templates/components/previous_sessions_widget.html
+++ b/templates/components/previous_sessions_widget.html
@@ -22,7 +22,7 @@