Add user and bot icons and styling

esbuild.config.mjs

@@ -1,6 +1,7 @@
 import esbuild from "esbuild";
 import process from "process";
 import builtins from "builtin-modules";
+import svgPlugin from "esbuild-plugin-svg";
 
 const banner =
 `/*
@@ -38,6 +39,7 @@ const context = await esbuild.context({
   sourcemap: prod ? false : "inline",
   treeShaking: true,
   outfile: "main.js",
+  plugins: [svgPlugin()],
 });
 
 if (prod) {

package.json

@@ -25,6 +25,7 @@
   },
   "dependencies": {
     "axios": "^1.3.4",
+    "esbuild-plugin-svg": "^0.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   }

src/components/Chat.tsx

@@ -1,5 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import { ChatMessage, SharedState } from 'src/sharedState';
+import { USER_SENDER } from 'src/constants';
+import { UserIcon, BotIcon } from 'src/components/Icons';
+import { createSvgUrl } from 'src/utils';
 import axios from 'axios';
 
 
@@ -27,7 +30,7 @@ const Chat: React.FC<ChatProps> = ({ sharedState, apiKey, model }) => {
 
     const userMessage: ChatMessage = {
       message: inputMessage,
-      sender: 'User',
+      sender: USER_SENDER,
     };
 
     // Add user message to chat history
@@ -58,9 +61,16 @@ const Chat: React.FC<ChatProps> = ({ sharedState, apiKey, model }) => {
     <div className="chat-container">
       <div className="chat-messages">
         {chatHistory.map((message, index) => (
-          <div key={index}>
-            <strong>{message.sender}: </strong>
-            <span>{message.message}</span>
+          <div
+            key={index}
+            className={`message ${message.sender === USER_SENDER ? 'user-message' : 'bot-message'}`}
+          >
+            <div className="message-icon">
+              {message.sender === USER_SENDER ? <UserIcon /> : <BotIcon />}
+            </div>
+            <div className="message-content">
+              <span>{message.message}</span>
+            </div>
           </div>
         ))}
       </div>

src/components/Icons.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+export const UserIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+    stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path>
+    <circle cx="12" cy="7" r="4"></circle>
+  </svg>
+);
+
+export const BotIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+    stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <rect x="3" y="11" width="18" height="10" rx="2"></rect>
+    <circle cx="12" cy="5" r="2"></circle>
+    <path d="M12 7v4"></path>
+    <line x1="8" y1="16" x2="8" y2="16"></line>
+    <line x1="16" y1="16" x2="16" y2="16"></line>
+  </svg>
+);

src/constants.ts

@@ -1 +1,2 @@
 export const CHAT_VIEWTYPE = 'copilot-chat-view';
+export const USER_SENDER = 'user';

styles.css

@@ -74,4 +74,34 @@ If your plugin does not need CSS, delete this file.
   box-sizing: border-box;
   scroll-behavior: smooth;
   margin-top: auto;
-}
+}
+
+.message {
+  display: flex;
+  align-items: flex-start;
+  padding: 4px;
+  margin-bottom: 4px;
+  border-radius: 4px;
+  max-width: 90%;
+}
+
+.message-icon {
+  width: 24px;
+  margin-right: 8px;
+  color: var(--inline-title-color);
+}
+
+.message-content {
+  flex-grow: 1;
+}
+
+.user-message {
+  align-self: flex-start;
+  width: 90%;
+}
+
+.bot-message {
+  align-self: flex-start;
+  width: 90%;
+}
+