Merge pull request #76 from continuedev/superset-of-chat

Superset of chat

8 files changed, 309 insertions, 51 deletions

diff --git a/extension/react-app/src/components/CodeBlock.tsx b/extension/react-app/src/components/CodeBlock.tsx
index e0336554..eedae3fb 100644
--- a/extension/react-app/src/components/CodeBlock.tsx
+++ b/extension/react-app/src/components/CodeBlock.tsx
@@ -11,6 +11,7 @@ const StyledPre = styled.pre`
   border: 1px solid gray;
   border-radius: ${defaultBorderRadius};
   background-color: ${vscBackground};
+  padding: 8px;
 `;
 
 const StyledCode = styled.code`
diff --git a/extension/react-app/src/components/ComboBox.tsx b/extension/react-app/src/components/ComboBox.tsx
new file mode 100644
index 00000000..1b7c60e6
--- /dev/null
+++ b/extension/react-app/src/components/ComboBox.tsx
@@ -0,0 +1,146 @@
+import React, { useCallback } from "react";
+import { useCombobox } from "downshift";
+import styled from "styled-components";
+import {
+  buttonColor,
+  defaultBorderRadius,
+  secondaryDark,
+  vscBackground,
+} from ".";
+
+const mainInputFontSize = 16;
+const MainTextInput = styled.input`
+  padding: 8px;
+  font-size: ${mainInputFontSize}px;
+  border-radius: ${defaultBorderRadius};
+  border: 1px solid #ccc;
+  margin: 8px auto;
+  width: 100%;
+  background-color: ${vscBackground};
+  color: white;
+  outline: 1px solid orange;
+`;
+
+const UlMaxHeight = 200;
+const Ul = styled.ul<{
+  hidden: boolean;
+  showAbove: boolean;
+  ulHeightPixels: number;
+}>`
+  ${(props) =>
+    props.showAbove
+      ? `transform: translateY(-${props.ulHeightPixels + 8}px);`
+      : `transform: translateY(${2 * mainInputFontSize}px);`}
+  position: absolute;
+  background: ${vscBackground};
+  background-color: ${secondaryDark};
+  color: white;
+  font-family: "Fira Code", monospace;
+  max-height: ${UlMaxHeight}px;
+  overflow: scroll;
+  padding: 0;
+  ${({ hidden }) => hidden && "display: none;"}
+  border-radius: ${defaultBorderRadius};
+  overflow: hidden;
+  border: 0.5px solid gray;
+`;
+
+const Li = styled.li<{
+  highlighted: boolean;
+  selected: boolean;
+  isLastItem: boolean;
+}>`
+  ${({ highlighted }) => highlighted && "background: #aa0000;"}
+  ${({ selected }) => selected && "font-weight: bold;"}
+    padding: 0.5rem 0.75rem;
+  display: flex;
+  flex-direction: column;
+  ${({ isLastItem }) => isLastItem && "border-bottom: 1px solid gray;"}
+  border-top: 1px solid gray;
+  cursor: pointer;
+`;
+
+interface ComboBoxProps {
+  items: { name: string; description: string }[];
+  onInputValueChange: (inputValue: string) => void;
+  disabled?: boolean;
+  onEnter?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+}
+
+const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
+  const [items, setItems] = React.useState(props.items);
+  const {
+    isOpen,
+    getToggleButtonProps,
+    getLabelProps,
+    getMenuProps,
+    getInputProps,
+    highlightedIndex,
+    getItemProps,
+    selectedItem,
+    setInputValue,
+  } = useCombobox({
+    onInputValueChange({ inputValue }) {
+      if (!inputValue) return;
+      props.onInputValueChange(inputValue);
+      setItems(
+        props.items.filter((item) =>
+          item.name.toLowerCase().startsWith(inputValue.toLowerCase())
+        )
+      );
+    },
+    items,
+    itemToString(item) {
+      return item ? item.name : "";
+    },
+  });
+
+  const divRef = React.useRef<HTMLDivElement>(null);
+  const ulRef = React.useRef<HTMLUListElement>(null);
+  const showAbove = () => {
+    return (divRef.current?.getBoundingClientRect().top || 0) > UlMaxHeight;
+  };
+
+  return (
+    <div className="flex px-2" ref={divRef} hidden={!isOpen}>
+      <MainTextInput
+        disabled={props.disabled}
+        placeholder="Ask anything:"
+        {...getInputProps({
+          onKeyDown: (event) => {
+            if (event.key === "Enter" && (!isOpen || items.length === 0)) {
+              // Prevent Downshift's default 'Enter' behavior.
+              (event.nativeEvent as any).preventDownshiftDefault = true;
+              if (props.onEnter) props.onEnter(event);
+              setInputValue("");
+            }
+          },
+          ref: ref as any,
+        })}
+      />
+      <Ul
+        {...getMenuProps({
+          ref: ulRef,
+        })}
+        showAbove={showAbove()}
+        ulHeightPixels={ulRef.current?.getBoundingClientRect().height || 0}
+      >
+        {isOpen &&
+          items.map((item, index) => (
+            <Li
+              key={`${item.name}${index}`}
+              {...getItemProps({ item, index })}
+              highlighted={highlightedIndex === index}
+              selected={selectedItem === item}
+            >
+              <span>
+                {item.name}: {item.description}
+              </span>
+            </Li>
+          ))}
+      </Ul>
+    </div>
+  );
+});
+
+export default ComboBox;
diff --git a/extension/react-app/src/components/StepContainer.tsx b/extension/react-app/src/components/StepContainer.tsx
index 3408053b..ca142b06 100644
--- a/extension/react-app/src/components/StepContainer.tsx
+++ b/extension/react-app/src/components/StepContainer.tsx
@@ -7,6 +7,7 @@ import {
   vscBackground,
   GradientBorder,
   vscBackgroundTransparent,
+  HeaderButton,
 } from ".";
 import { RangeInFile, FileEdit } from "../../../src/client";
 import CodeBlock from "./CodeBlock";
@@ -15,7 +16,7 @@ import SubContainer from "./SubContainer";
 import {
   ChevronDown,
   ChevronRight,
-  Backward,
+  XMark,
   ArrowPath,
 } from "@styled-icons/heroicons-outline";
 import { HistoryNode } from "../../../schema/HistoryNode";
@@ -31,6 +32,7 @@ interface StepContainerProps {
   onRefinement: (input: string) => void;
   onUserInput: (input: string) => void;
   onRetry: () => void;
+  onDelete: () => void;
   open?: boolean;
 }
 
@@ -54,8 +56,10 @@ const HeaderDiv = styled.div<{ error: boolean }>`
   background-color: ${(props) =>
     props.error ? "#522" : vscBackgroundTransparent};
   display: grid;
-  grid-template-columns: 1fr auto;
+  grid-template-columns: 1fr auto auto;
+  grid-gap: 8px;
   align-items: center;
+  padding-right: 8px;
 `;
 
 const ContentDiv = styled.div`
@@ -64,26 +68,21 @@ const ContentDiv = styled.div`
   background-color: ${vscBackground};
 `;
 
-const HeaderButton = styled.button`
-  background-color: transparent;
-  border: 1px solid white;
-  border-radius: ${defaultBorderRadius};
-  padding: 2px;
-  cursor: pointer;
-  color: white;
-
-  &:hover {
-    background-color: white;
-    color: black;
-  }
-`;
-
 const OnHoverDiv = styled.div`
   text-align: center;
   padding: 10px;
   animation: ${appear} 0.3s ease-in-out;
 `;
 
+const MarkdownPre = styled.pre`
+  background-color: ${secondaryDark};
+  padding: 10px;
+  border-radius: ${defaultBorderRadius};
+  border: 0.5px solid white;
+`;
+
+const MarkdownCode = styled.code``;
+
 function StepContainer(props: StepContainerProps) {
   const [open, setOpen] = useState(
     typeof props.open === "undefined" ? true : props.open
@@ -152,18 +151,28 @@ function StepContainer(props: StepContainerProps) {
               <Backward size="1.6em" onClick={props.onReverse}></Backward>
             </HeaderButton> */}
 
-            {props.historyNode.observation?.error ? (
+            <>
               <HeaderButton
                 onClick={(e) => {
                   e.stopPropagation();
-                  props.onRetry();
+                  props.onDelete();
                 }}
               >
-                <ArrowPath size="1.6em" onClick={props.onRetry}></ArrowPath>
+                <XMark size="1.6em" onClick={props.onDelete} />
               </HeaderButton>
-            ) : (
-              <></>
-            )}
+              {props.historyNode.observation?.error ? (
+                <HeaderButton
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    props.onRetry();
+                  }}
+                >
+                  <ArrowPath size="1.6em" onClick={props.onRetry} />
+                </HeaderButton>
+              ) : (
+                <></>
+              )}
+            </>
           </HeaderDiv>
         </GradientBorder>
         <ContentDiv hidden={!open}>
@@ -182,7 +191,19 @@ function StepContainer(props: StepContainerProps) {
               {props.historyNode.observation.error as string}
             </pre>
           ) : (
-            <ReactMarkdown key={1} className="overflow-scroll">
+            <ReactMarkdown
+              key={1}
+              className="overflow-scroll"
+              components={{
+                pre: ({ node, ...props }) => {
+                  return (
+                    <CodeBlock
+                      children={props.children[0] as string}
+                    ></CodeBlock>
+                  );
+                },
+              }}
+            >
               {props.historyNode.step.description as any}
             </ReactMarkdown>
           )}
diff --git a/extension/react-app/src/components/index.ts b/extension/react-app/src/components/index.ts
index 4966f3e8..525989af 100644
--- a/extension/react-app/src/components/index.ts
+++ b/extension/react-app/src/components/index.ts
@@ -143,3 +143,21 @@ export const appear = keyframes`
         transform: translateY(0px);
     }
 `;
+
+export const HeaderButton = styled.button`
+  background-color: transparent;
+  border: 1px solid white;
+  border-radius: ${defaultBorderRadius};
+  cursor: pointer;
+  color: white;
+
+  &:hover {
+    background-color: white;
+    color: black;
+  }
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding: 1px;
+`;
diff --git a/extension/react-app/src/hooks/ContinueGUIClientProtocol.ts b/extension/react-app/src/hooks/ContinueGUIClientProtocol.ts
index 18a91de7..824bb086 100644
--- a/extension/react-app/src/hooks/ContinueGUIClientProtocol.ts
+++ b/extension/react-app/src/hooks/ContinueGUIClientProtocol.ts
@@ -8,6 +8,16 @@ abstract class AbstractContinueGUIClientProtocol {
   abstract sendStepUserInput(input: string, index: number): void;
 
   abstract onStateUpdate(state: any): void;
+
+  abstract onAvailableSlashCommands(
+    callback: (commands: { name: string; description: string }[]) => void
+  ): void;
+
+  abstract sendClear(): void;
+
+  abstract retryAtIndex(index: number): void;
+
+  abstract deleteAtIndex(index: number): void;
 }
 
 export default AbstractContinueGUIClientProtocol;
diff --git a/extension/react-app/src/hooks/useContinueGUIProtocol.ts b/extension/react-app/src/hooks/useContinueGUIProtocol.ts
index f27895fb..59397742 100644
--- a/extension/react-app/src/hooks/useContinueGUIProtocol.ts
+++ b/extension/react-app/src/hooks/useContinueGUIProtocol.ts
@@ -45,9 +45,27 @@ class ContinueGUIClientProtocol extends AbstractContinueGUIClientProtocol {
     });
   }
 
+  onAvailableSlashCommands(
+    callback: (commands: { name: string; description: string }[]) => void
+  ) {
+    this.messenger.onMessageType("available_slash_commands", (data: any) => {
+      if (data.commands) {
+        callback(data.commands);
+      }
+    });
+  }
+
+  sendClear() {
+    this.messenger.send("clear_history", {});
+  }
+
   retryAtIndex(index: number) {
     this.messenger.send("retry_at_index", { index });
   }
+
+  deleteAtIndex(index: number) {
+    this.messenger.send("delete_at_index", { index });
+  }
 }
 
 export default ContinueGUIClientProtocol;
diff --git a/extension/react-app/src/tabs/chat/MessageDiv.tsx b/extension/react-app/src/tabs/chat/MessageDiv.tsx
index 1d7bb5f5..3543dd93 100644
--- a/extension/react-app/src/tabs/chat/MessageDiv.tsx
+++ b/extension/react-app/src/tabs/chat/MessageDiv.tsx
@@ -58,7 +58,9 @@ function MessageDiv(props: ChatMessage) {
   }, [richContent, isStreaming]);
 
   useEffect(() => {
-    setRichContent([<ReactMarkdown key={1}>{props.content}</ReactMarkdown>]);
+    setRichContent([
+      <ReactMarkdown key={1} children={props.content}></ReactMarkdown>,
+    ]);
   }, [props.content]);
 
   return (
diff --git a/extension/react-app/src/tabs/gui.tsx b/extension/react-app/src/tabs/gui.tsx
index 5c75579b..a3a48410 100644
--- a/extension/react-app/src/tabs/gui.tsx
+++ b/extension/react-app/src/tabs/gui.tsx
@@ -4,6 +4,7 @@ import {
   vscBackground,
   Loader,
   MainTextInput,
+  HeaderButton,
 } from "../components";
 import ContinueButton from "../components/ContinueButton";
 import { useCallback, useEffect, useRef, useState } from "react";
@@ -11,7 +12,8 @@ import { History } from "../../../schema/History";
 import { HistoryNode } from "../../../schema/HistoryNode";
 import StepContainer from "../components/StepContainer";
 import useContinueGUIProtocol from "../hooks/useWebsocket";
-
+import { BookOpen, Trash } from "@styled-icons/heroicons-outline";
+import ComboBox from "../components/ComboBox";
 let TopGUIDiv = styled.div`
   display: grid;
   grid-template-columns: 1fr;
@@ -26,6 +28,14 @@ let UserInputQueueItem = styled.div`
   text-align: center;
 `;
 
+const TopBar = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 8px;
+  align-items: center;
+`;
+
 interface GUIProps {
   firstObservation?: any;
 }
@@ -33,15 +43,18 @@ interface GUIProps {
 function GUI(props: GUIProps) {
   const [waitingForSteps, setWaitingForSteps] = useState(false);
   const [userInputQueue, setUserInputQueue] = useState<string[]>([]);
+  const [availableSlashCommands, setAvailableSlashCommands] = useState<
+    { name: string; description: string }[]
+  >([]);
   const [history, setHistory] = useState<History | undefined>();
-  //   {
+  // {
   //   timeline: [
   //     {
   //       step: {
   //         name: "Waiting for user input",
   //         cmd: "python3 /Users/natesesti/Desktop/continue/extension/examples/python/main.py",
   //         description:
-  //           "Run `python3 /Users/natesesti/Desktop/continue/extension/examples/python/main.py`",
+  //           "Run `python3 /Users/natesesti/Desktop/continue/extension/examples/python/main.py` and ```\nprint(sum(first, second))\n```\n- Testing\n- Testing 2\n- Testing 3",
   //       },
   //       observation: {
   //         title: "ERROR FOUND",
@@ -92,7 +105,7 @@ function GUI(props: GUIProps) {
   //         prompt:
   //           "I ran into this problem with my Python code:\n\n                Traceback (most recent call last):\n  File \"/Users/natesesti/Desktop/continue/extension/examples/python/main.py\", line 7, in <module>\n    print(sum(first, second))\n          ^^^^^^^^^^^^^^^^^^\n  File \"/Users/natesesti/Desktop/continue/extension/examples/python/sum.py\", line 2, in sum\n    return a + b\n           ~~^~~\nTypeError: unsupported operand type(s) for +: 'int' and 'str'\n\n                Below are the files that might need to be fixed:\n\n                {code}\n\n                This is what the code should be in order to avoid the problem:\n",
   //         description:
-  //           "Editing files: /Users/natesesti/Desktop/continue/extension/examples/python/main.py",
+  //           "Run `python3 /Users/natesesti/Desktop/continue/extension/examples/python/main.py` and\n```python\nprint(sum(first, second))\n```\n- Testing\n- Testing 2\n- Testing 3",
   //       },
   //       output: [
   //         null,
@@ -154,22 +167,30 @@ function GUI(props: GUIProps) {
   //       output: [null, null],
   //     },
   //   ],
-  //   current_index: 0,
+  //   current_index: 3,
   // } as any);
 
   const topGuiDivRef = useRef<HTMLDivElement>(null);
   const client = useContinueGUIProtocol();
 
+  const [scrollTimeout, setScrollTimeout] = useState<NodeJS.Timeout | null>(
+    null
+  );
   const scrollToBottom = useCallback(() => {
+    if (scrollTimeout) {
+      clearTimeout(scrollTimeout);
+    }
+    // Debounced smooth scroll to bottom of screen
     if (topGuiDivRef.current) {
-      setTimeout(() => {
+      const timeout = setTimeout(() => {
         window.scrollTo({
           top: window.outerHeight,
           behavior: "smooth",
         });
-      }, 100);
+      }, 200);
+      setScrollTimeout(timeout);
     }
-  }, [topGuiDivRef.current]);
+  }, [topGuiDivRef.current, scrollTimeout]);
 
   useEffect(() => {
     console.log("CLIENT ON STATE UPDATE: ", client, client?.onStateUpdate);
@@ -181,13 +202,24 @@ function GUI(props: GUIProps) {
 
       scrollToBottom();
     });
+    client?.onAvailableSlashCommands((commands) => {
+      console.log("Received available slash commands: ", commands);
+      setAvailableSlashCommands(
+        commands.map((c) => {
+          return {
+            name: "/" + c.name,
+            description: c.description,
+          };
+        })
+      );
+    });
   }, [client]);
 
   useEffect(() => {
     scrollToBottom();
   }, [waitingForSteps]);
 
-  const mainTextInputRef = useRef<HTMLTextAreaElement>(null);
+  const mainTextInputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
     if (mainTextInputRef.current) {
@@ -230,8 +262,6 @@ function GUI(props: GUIProps) {
           return [...queue, input];
         });
       }
-      mainTextInputRef.current.value = "";
-      mainTextInputRef.current.style.height = "";
     }
 
     setWaitingForSteps(true);
@@ -253,6 +283,24 @@ function GUI(props: GUIProps) {
         }
       }}
     >
+      <TopBar>
+        <a href="https://continue.dev/docs" className="no-underline">
+          <HeaderButton style={{ padding: "3px" }}>
+            Continue Docs
+            <BookOpen size="1.6em" />
+          </HeaderButton>
+        </a>
+        <HeaderButton
+          onClick={() => {
+            client?.sendClear();
+          }}
+          style={{ padding: "3px" }}
+        >
+          Clear History
+          <Trash size="1.6em" />
+        </HeaderButton>
+      </TopBar>
+
       {typeof client === "undefined" && (
         <>
           <Loader></Loader>
@@ -280,6 +328,9 @@ function GUI(props: GUIProps) {
               client?.retryAtIndex(index);
               setWaitingForSteps(true);
             }}
+            onDelete={() => {
+              client?.deleteAtIndex(index);
+            }}
           />
         );
       })}
@@ -291,7 +342,7 @@ function GUI(props: GUIProps) {
         })}
       </div>
 
-      <MainTextInput
+      <ComboBox
         disabled={
           history
             ? history.timeline[history.current_index].step.name ===
@@ -299,22 +350,13 @@ function GUI(props: GUIProps) {
             : false
         }
         ref={mainTextInputRef}
-        onKeyDown={(e) => {
-          if (e.key === "Enter") {
-            onMainTextInput();
-            e.stopPropagation();
-            e.preventDefault();
-          }
-        }}
-        rows={1}
-        onChange={() => {
-          const textarea = mainTextInputRef.current!;
-          textarea.style.height = ""; /* Reset the height*/
-          textarea.style.height = `${Math.min(
-            textarea.scrollHeight - 15,
-            500
-          )}px`;
+        onEnter={(e) => {
+          onMainTextInput();
+          e.stopPropagation();
+          e.preventDefault();
         }}
+        onInputValueChange={() => {}}
+        items={availableSlashCommands}
       />
       <ContinueButton onClick={onMainTextInput} />
     </TopGUIDiv>