css tweaks

app/backend/InputOutputHandler.tsx

@@ -50,8 +50,10 @@ const InputOutputBackend: React.FC = () => {
       The currency is ${preferredCurrency}. 
       Communicate in the language specified by the user (country code: ${preferredLanguage}), and only in this language.
       You are only able to change language if the user specifically states you must. 
-      Do not answer in multiple languages or multiple measurement systems under any circumstances other than the user requesting it.`
-      : "You are a helpful assistant";
+      Do not answer in multiple languages or multiple measurement systems under any circumstances other than the user requesting it.
+      You try to use html tags as often as possible in your responses. For images, links and tables you use markdown.`
+      : `You are a helpful assistant
+      You try to use html tags as often as possible in your responses. For images, links and tables you use markdown. You cannot use both at the same time.`;
     setMessages([
       { role: "system", content: systemMessage },
       { role: "assistant", content: "Hello! How may I help you?" },

app/components/ConversationFrontend.tsx

@@ -1,4 +1,7 @@
 import React, { ForwardedRef, useState, useEffect, useRef } from 'react';
+import Markdown from 'react-markdown'
+import rehypeRaw from 'rehype-raw';
+import remarkGfm from 'remark-gfm';
 
 type Message = {
   role: string
@@ -66,7 +69,9 @@ const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>
                   key={index}
                   className={message.role === "user" ? 'user-message' : 'ai-message'}
                 >
-                  <p> {message.content}</p>
+                  <Markdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]}>
+                    {message.content}
+                  </Markdown>
                 </div>
               );
             }

app/styles/output.css

@@ -49,6 +49,23 @@
     color: var(--ai-message-text-color);
 }
 
+.ai-message a{
+    color: var(--text-color);
+}
+
+.ai-message table, th, tr, td{
+    border: 2px solid black;
+    border-collapse: collapse;
+}
+
+.ai-message img{
+    max-width: 80%;
+}
+
+.ai-message a:hover{
+    filter: brightness(70%);
+}
+
 /* Button Container */
 .button-container {
     display: flex;

package.json

@@ -26,7 +26,10 @@
     "ollama": "^0.5.9",
     "react": "^18",
     "react-dom": "^18",
+    "react-markdown": "^9.0.1",
     "react-router-dom": "^6.26.2",
+    "rehype-raw": "^7.0.0",
+    "remark-gfm": "^4.0.0",
     "swiss": "^2.4.0",
     "weather": "^1.0.4"
   },