Feature mermaid rendering

[FreddyAyala]

This pull request introduces a new feature for rendering and downloading Mermaid diagrams within chat messages, along with some updates to dependencies. The most important changes include the addition of the MermaidComponent, modifications to the MessageContent component to support Mermaid diagrams, and updates to the package.json for new dependencies and debugging support.

New Feature: Mermaid Diagram Rendering

• src/features/chat-page/mermaid-diagram.tsx: Added MermaidComponent to render Mermaid diagrams and provide an option to download them as SVG files.
• src/features/chat-page/message-content.tsx: Integrated MermaidComponent to detect and render Mermaid diagrams within chat messages. [1] [2] [3] [4]

Dependency Updates

• src/package.json: Added mermaid library and updated several Azure-related dependencies. Also, added a new script for debugging. [1] [2] [3]

[DakotaWray2]

How are you telling the model to return mermaid markup?

[FreddyAyala]

@DakotaWray2 I've two ways: first one is a custom function skill that when given a prompt returns me proper mermaid code. The other one is just to pass this in the prompt: `Convert the following architecture description (or existing mermaid code that you will modify or correct) ${architectureDescription} into precise and error-free Mermaid diagram code. Here are examples of diagrams that can be used,
choose the one that best fits the description:

**Flowchart**
graph TD;
  A[Client] --> B[Server];
  B --> C{Database};
  C -->|Response| A;

**Sequence Diagram**
sequenceDiagram
  Alice->>Bob: Hello Bob, how are you?
  Bob-->>Alice: I am good thanks!
  Bob->>Charlie: How about you?;

**Class Diagram**
classDiagram
  class Animal {
    +int age
    +String gender
    +isMammal()
  }
  Animal <|-- Duck
  Animal <|-- Fish;

**Gantt Chart**
gantt
  title A Gantt Diagram
  dateFormat  YYYY-MM-DD
  section Section
  Task1 :a1, 2014-01-01, 30d
  Task2 :after a1, 20d;

**GitGraph**
gitGraph
  commit
  branch develop
  checkout develop
  commit
  checkout main
  merge develop
  commit;

**Entity Relationship Diagram**
erDiagram
  CUSTOMER ||--o{ ORDER : places
  ORDER ||--|{ LINE-ITEM : contains;

**C4 System Context (C4Context)**
C4Context
  title System Context diagram for Internet Banking System
  Enterprise_Boundary(b0, "BankBoundary0") {
    Person(customerA, "Banking Customer A", "Personal accounts")
    System(SystemAA, "Internet Banking System", "View information and make payments.")
  };

**C4 Container (C4Container)**
C4Container
  title Container diagram for Internet Banking System
  Container(web_app, "Web Application", "Java, Spring MVC")
  Rel(web_app, email_system, "Sends e-mails", "SMTP");

**C4 Component (C4Component)**
C4Component
  title Component diagram for Internet Banking System
  Component(accounts, "Accounts Summary Controller", "MVC Rest Controller")
  Rel(spa, accounts, "Uses", "JSON/HTTPS");

**C4 Dynamic (C4Dynamic)**
C4Dynamic
  title Dynamic diagram for Internet Banking System
  Component(c2, "Sign In Controller", "Spring MVC Rest Controller")
  Rel(c1, c2, "Submits credentials to", "JSON/HTTPS");

**C4 Deployment (C4Deployment)**
C4Deployment
  title Deployment Diagram for Internet Banking System
  Deployment_Node(mob, "Customer's mobile device", "Apple IOS or Android"){
      Container(mobile, "Mobile App", "Xamarin", "Provides functionality.")
  }
  Rel(mobile, web, "Makes API calls to", "JSON/HTTPS");

**Mindmap**
mindmap
  root((mindmap))
  Origins
    Long history
    ::icon(fa fa-book)
    Popularisation;

**Timeline**
timeline
  title History of Social Media
  2002 : LinkedIn
  2004 : Facebook
  2005 : Youtube;

**Quadrant Chart**
quadrantChart
  title Reach and engagement of campaigns
  x-axis Low Reach --> High Reach
  y-axis Low Engagement --> High Engagement
  quadrant-1 We should expand
  Campaign A: [0.3, 0.6];

**Pie Chart**
pie
  title Pets adopted
  "Dogs" : 386
  "Cats" : 85;

in the diagram text do not include the comments or mermaid tags, just the diagram directly in the file.
DO NOT INCLUDE \`\`\`mermaid AND \`\`\` TAGS IN THE FILE`

It works very well.

[DakotaWray2]

Thanks @FreddyAyala this is nifty and I'm going to take a stab at it. Appreciate your insight and I'll follow-up if I have any input to your proposed implementation.