Bump

Author: Nick Tchayka

.npmrc

@@ -1 +1 @@
-enable-pre-post-scripts = true
+# enable-pre-post-scripts = true

apps/extension/media/styles.css

@@ -4,6 +4,10 @@ body {
   padding: 0;
 }
 
+code {
+  background-color: transparent !important;
+}
+
 #chat-container {
   display: flex;
   flex-direction: column;

apps/extension/package.json

@@ -2,7 +2,7 @@
   "name": "monkey-studio-code",
   "private": true,
   "displayName": "monkey-studio-code",
-  "description": "Monkey Studio Code",
+  "description": "Booster Tutor",
   "version": "0.0.1",
   "engines": {
     "vscode": "^1.74.0"
@@ -19,7 +19,7 @@
       "activitybar": [
         {
           "id": "chatSidebar",
-          "title": "Monkey Studio Code",
+          "title": "Booster Tutor",
           "icon": "media/monkey.png"
         }
       ]
@@ -29,9 +29,9 @@
         {
           "type": "webview",
           "id": "chatSidebar",
-          "name": "Monkey Studio Code",
+          "name": "Booster Tutor",
           "icon": "media/monkey.png",
-          "contextualTitle": "Monkey Studio Code"
+          "contextualTitle": "Booster Tutor"
         }
       ]
     },
@@ -65,6 +65,7 @@
     "@types/node": "^16.11.7",
     "@types/react": "^18.0.37",
     "@types/react-dom": "^18.0.11",
+    "@types/react-scroll": "^1.8.10",
     "@types/vscode": "^1.77.0",
     "@typescript-eslint/eslint-plugin": "^5.54.0",
     "@typescript-eslint/parser": "^5.54.0",
@@ -95,10 +96,15 @@
     "@vscode/codicons": "^0.0.32",
     "@vscode/webview-ui-toolkit": "^1.2.2",
     "cross-fetch": "^3.1.5",
+    "highlight.js": "^11.9.0",
     "langchain": "0.0.63",
+    "marked": "^12.0.0",
+    "marked-react": "^2.0.0",
     "path-browserify": "^1.0.1",
     "process": "^0.11.10",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-scroll": "^1.9.0",
+    "react-syntax-highlighter": "^15.5.0"
   }
 }

apps/extension/src/extension.ts

@@ -1,6 +1,5 @@
 import * as vscode from "vscode";
 import * as process from "node:process";
-import monkeyAgent from "./agent/monkey-agent";
 import * as cp from "node:child_process";
 import "./fetch-polyfill";
 
@@ -38,7 +37,7 @@ export async function activate(context: vscode.ExtensionContext) {
     return;
   }
 
-  const outputChannel = vscode.window.createOutputChannel("Monkey Studio Code");
+  const outputChannel = vscode.window.createOutputChannel("Booster Tutor");
   context.subscriptions.push(outputChannel);
 
   const myCustomConsole = {
@@ -109,7 +108,6 @@ class ChatSidebarViewProvider implements vscode.WebviewViewProvider {
           let response: string;
           try {
             setLoading(true);
-            // Perform a call like { "question": "How can I create a command that represents the level up of a player?"} to https://asktoai.boosterframework.com/api/answer using cross-fetch
             response = await fetch(
               "https://asktoai.boosterframework.com/api/answer",
               {

apps/extension/src/webview.tsx

@@ -1,6 +1,10 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import typingSource from "./assets/typing.gif";
+import Markdown from "marked-react";
+import "../media/styles.css";
+import { Element, scroller } from "react-scroll";
+import SyntaxHighlighter from "react-syntax-highlighter";
 
 const {
   VSCodeButton,
@@ -11,6 +15,14 @@ declare var acquireVsCodeApi: any;
 
 const vscode = acquireVsCodeApi();
 
+const renderer = {
+  code(snippet: string) {
+    return (
+      <SyntaxHighlighter language="typescript">{snippet}</SyntaxHighlighter>
+    );
+  },
+};
+
 const sendMessageToExtension = (message: string) => {
   vscode.postMessage(
     {
@@ -24,7 +36,10 @@ const sendMessageToExtension = (message: string) => {
 type From = "user" | "bot";
 
 class ChatMessage {
-  constructor(readonly from: From, readonly contents: string) {}
+  constructor(
+    readonly from: From,
+    readonly contents: string
+  ) {}
 }
 
 type ChatBubbleProperties = { message: ChatMessage };
@@ -43,38 +58,53 @@ const ChatBubble: React.FC<ChatBubbleProperties> = ({ message }) => {
   };
   const alignStyle =
     message.from === "bot"
-      ? { backgroundColor: "var(--vscode-button-secondaryBackground)" }
-      : { backgroundColor: "var(--vscode-button-background)" };
+      ? {
+          backgroundColor: "var(--vscode-button-secondaryBackground)",
+          color: "var(--vscode-button-secondaryForeground)",
+        }
+      : {
+          backgroundColor: "var(--vscode-button-background)",
+          color: "var(--vscode-button-foreground)",
+        };
   const containerStyle = {
     display: "flex",
     justifyContent: message.from === "bot" ? "flex-start" : "flex-end",
   };
   return (
     <div style={containerStyle}>
       <div style={{ ...bubbleStyle, ...alignStyle }}>
-        <div style={{ whiteSpace: "pre-wrap" }}>{message.contents}</div>
+        <div style={{ whiteSpace: "pre-wrap" }}>
+          <Markdown value={message.contents} renderer={renderer} />
+        </div>
       </div>
     </div>
   );
 };
 
 export const App: React.FC = () => {
   const [userMessage, setUserMessage] = React.useState("");
-  const [chatMessages, setChatMessages] = React.useState<Array<ChatMessage>>(
-    []
-  );
+  const [chatMessages, setChatMessages] = React.useState<Array<ChatMessage>>([
+    new ChatMessage(
+      "user",
+      "**Lorem ipsum** dolor sit amet, consectetur adipiscing elit. Nulla nec odio nec nunc"
+    ),
+  ]);
   const [loading, setLoading] = React.useState(false);
-  const appendChatMessage = (message: ChatMessage) =>
+  const appendChatMessage = async (message: ChatMessage) => {
     setChatMessages((previousChatMessages) => [
       ...previousChatMessages,
       message,
     ]);
+    scroller.scrollTo("lastMessage", {
+      containerId: "messages-root",
+    });
+  };
 
   React.useEffect(() => {
     const sendInitialMessage = () => {
       setTimeout(() => {
         sendMessageToExtension(
-          "Hello, what's your name and how can you help me?"
+          "Greet me and give me a one paragraph detailed description of how can you help me with my Booster project. Use markdown to highlight the important parts."
         );
       }, 500);
     };
@@ -119,9 +149,14 @@ export const App: React.FC = () => {
           display: "flex",
           flexDirection: "column",
         }}
+        id="messages-root"
       >
-        {chatMessages.map((message) => (
-          <ChatBubble key={message.contents} message={message} />
+        {chatMessages.map((message, index) => (
+          <Element
+            name={index === chatMessages.length - 1 ? "lastMessage" : ""}
+          >
+            <ChatBubble key={message.contents} message={message} />
+          </Element>
         ))}
         <img
           style={{

apps/extension/webpack.webview.config.js

@@ -28,6 +28,10 @@ const webviewConfig = {
           },
         ],
       },
+      {
+        test: /\.css$/i,
+        use: ["style-loader", "css-loader"],
+      },
       {
         test: /\.(ts|tsx)$/,
         exclude: /node_modules/,