feedback dialog

2 files changed, 168 insertions, 82 deletions

diff --git a/extension/react-app/src/components/TextDialog.tsx b/extension/react-app/src/components/TextDialog.tsx
new file mode 100644
index 00000000..6b335e00
--- /dev/null
+++ b/extension/react-app/src/components/TextDialog.tsx
@@ -0,0 +1,56 @@
+// Write a component that displays a dialog box with a text field and a button.
+import React, { useState } from "react";
+import styled from "styled-components";
+import { Button, buttonColor, secondaryDark, vscBackground } from ".";
+
+const DialogContainer = styled.div`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+`;
+
+const Dialog = styled.div`
+  background-color: white;
+  border-radius: 8px;
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  /* box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.5); */
+  border: 2px solid ${buttonColor};
+  width: fit-content;
+  margin: auto;
+`;
+
+const TextArea = styled.textarea`
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  padding: 8px;
+  outline: 1px solid black;
+  font-family: Arial, Helvetica, sans-serif;
+`;
+
+const P = styled.p`
+  color: black;
+  margin: 8px auto;
+`;
+
+const TextDialog = (props: {
+  showDialog: boolean;
+  onEnter: (text: string) => void;
+}) => {
+  const [text, setText] = useState("");
+  const textAreaRef = React.createRef<HTMLTextAreaElement>();
+
+  return (
+    <DialogContainer hidden={!props.showDialog}>
+      <Dialog>
+        <P>Thanks for your feedback. We'll get back to you soon!</P>
+        <TextArea cols={50} rows={10} ref={textAreaRef}></TextArea>
+        <Button onClick={() => props.onEnter(text)}>Enter</Button>
+      </Dialog>
+    </DialogContainer>
+  );
+};
+
+export default TextDialog;
diff --git a/extension/react-app/src/tabs/gui.tsx b/extension/react-app/src/tabs/gui.tsx
index bf6a9401..55c2b763 100644
--- a/extension/react-app/src/tabs/gui.tsx
+++ b/extension/react-app/src/tabs/gui.tsx
@@ -12,8 +12,15 @@ 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 {
+  BookOpen,
+  ChatBubbleOvalLeft,
+  ChatBubbleOvalLeftEllipsis,
+  Trash,
+} from "@styled-icons/heroicons-outline";
 import ComboBox from "../components/ComboBox";
+import TextDialog from "../components/TextDialog";
+
 let TopGUIDiv = styled.div`
   display: grid;
   grid-template-columns: 1fr;
@@ -31,9 +38,11 @@ let UserInputQueueItem = styled.div`
 const TopBar = styled.div`
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
+  gap: 8px;
+  justify-content: center;
   padding: 8px;
   align-items: center;
+  border-bottom: 0.1px solid gray;
 `;
 
 interface GUIProps {
@@ -170,6 +179,8 @@ function GUI(props: GUIProps) {
   //   current_index: 3,
   // } as any);
 
+  const [showFeedbackDialog, setShowFeedbackDialog] = useState(false);
+
   const topGuiDivRef = useRef<HTMLDivElement>(null);
   const client = useContinueGUIProtocol();
 
@@ -275,91 +286,110 @@ function GUI(props: GUIProps) {
 
   // const iterations = useSelector(selectIterations);
   return (
-    <TopGUIDiv
-      ref={topGuiDivRef}
-      onKeyDown={(e) => {
-        if (e.key === "Enter" && e.ctrlKey) {
-          onMainTextInput();
-        }
-      }}
-    >
-      <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>
-          <p style={{ textAlign: "center" }}>
-            Trying to reconnect with server...
-          </p>
-        </>
-      )}
-      {history?.timeline.map((node: HistoryNode, index: number) => {
-        return (
-          <StepContainer
-            key={index}
-            onUserInput={(input: string) => {
-              onStepUserInput(input, index);
-            }}
-            inFuture={index > history?.current_index}
-            historyNode={node}
-            onRefinement={(input: string) => {
-              client?.sendRefinementInput(input, index);
-            }}
-            onReverse={() => {
-              client?.reverseToIndex(index);
-            }}
-            onRetry={() => {
-              client?.retryAtIndex(index);
-              setWaitingForSteps(true);
+    <>
+      <TextDialog
+        showDialog={showFeedbackDialog}
+        onEnter={(text) => {
+          client?.sendMainInput(`/feedback ${text}`);
+          setShowFeedbackDialog(false);
+        }}
+      ></TextDialog>
+      <TopGUIDiv
+        ref={topGuiDivRef}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" && e.ctrlKey) {
+            onMainTextInput();
+          }
+        }}
+      >
+        <TopBar>
+          <a href="https://continue.dev/docs" className="no-underline">
+            <HeaderButton style={{ padding: "3px" }}>
+              Continue Docs
+              <BookOpen size="1.6em" />
+            </HeaderButton>
+          </a>
+          <HeaderButton
+            style={{ padding: "3px" }}
+            onClick={() => {
+              // Set dialog open
+              setShowFeedbackDialog(true);
             }}
-            onDelete={() => {
-              client?.deleteAtIndex(index);
+          >
+            Feedback
+            <ChatBubbleOvalLeftEllipsis size="1.6em" />
+          </HeaderButton>
+          <HeaderButton
+            onClick={() => {
+              client?.sendClear();
             }}
-          />
-        );
-      })}
-      {waitingForSteps && <Loader></Loader>}
+            style={{ padding: "3px" }}
+          >
+            Clear History
+            <Trash size="1.6em" />
+          </HeaderButton>
+        </TopBar>
 
-      <div>
-        {userInputQueue.map((input) => {
-          return <UserInputQueueItem>{input}</UserInputQueueItem>;
+        {typeof client === "undefined" && (
+          <>
+            <Loader></Loader>
+            <p style={{ textAlign: "center" }}>
+              Trying to reconnect with server...
+            </p>
+          </>
+        )}
+        {history?.timeline.map((node: HistoryNode, index: number) => {
+          return (
+            <StepContainer
+              key={index}
+              onUserInput={(input: string) => {
+                onStepUserInput(input, index);
+              }}
+              inFuture={index > history?.current_index}
+              historyNode={node}
+              onRefinement={(input: string) => {
+                client?.sendRefinementInput(input, index);
+              }}
+              onReverse={() => {
+                client?.reverseToIndex(index);
+              }}
+              onRetry={() => {
+                client?.retryAtIndex(index);
+                setWaitingForSteps(true);
+              }}
+              onDelete={() => {
+                client?.deleteAtIndex(index);
+              }}
+            />
+          );
         })}
-      </div>
+        {waitingForSteps && <Loader></Loader>}
 
-      <ComboBox
-        disabled={
-          history?.timeline.length
-            ? history.timeline[history.current_index].step.name ===
-              "Waiting for user confirmation"
-            : false
-        }
-        ref={mainTextInputRef}
-        onEnter={(e) => {
-          onMainTextInput();
-          e.stopPropagation();
-          e.preventDefault();
-        }}
-        onInputValueChange={() => {}}
-        items={availableSlashCommands}
-      />
-      <ContinueButton onClick={onMainTextInput} />
-    </TopGUIDiv>
+        <div>
+          {userInputQueue.map((input) => {
+            return <UserInputQueueItem>{input}</UserInputQueueItem>;
+          })}
+        </div>
+
+        <ComboBox
+          disabled={
+            history?.timeline.length
+              ? history.timeline[history.current_index].step.name ===
+                "Waiting for user confirmation"
+              : false
+          }
+          ref={mainTextInputRef}
+          onEnter={(e) => {
+            onMainTextInput();
+            e.stopPropagation();
+            e.preventDefault();
+          }}
+          onInputValueChange={() => {}}
+          items={availableSlashCommands}
+        />
+        <ContinueButton onClick={onMainTextInput} />
+      </TopGUIDiv>
+    </>
   );
 }