From d05a9815233e26dc3aac35e3491c0f6bbe725022 Mon Sep 17 00:00:00 2001
From: Nate Sesti <sestinj@gmail.com>
Date: Wed, 14 Jun 2023 14:34:42 -0700
Subject: feedback with unique id, patch

---
 extension/react-app/src/tabs/gui.tsx | 194 ++++++++++++++++++-----------------
 1 file changed, 101 insertions(+), 93 deletions(-)

(limited to 'extension/react-app')

diff --git a/extension/react-app/src/tabs/gui.tsx b/extension/react-app/src/tabs/gui.tsx
index 55c2b763..70bab352 100644
--- a/extension/react-app/src/tabs/gui.tsx
+++ b/extension/react-app/src/tabs/gui.tsx
@@ -21,6 +21,11 @@ import {
 import ComboBox from "../components/ComboBox";
 import TextDialog from "../components/TextDialog";
 
+const MainDiv = styled.div`
+  display: grid;
+  grid-template-rows: 1fr auto;
+`;
+
 let TopGUIDiv = styled.div`
   display: grid;
   grid-template-columns: 1fr;
@@ -39,10 +44,11 @@ const TopBar = styled.div`
   display: flex;
   flex-direction: row;
   gap: 8px;
-  justify-content: center;
+  justify-content: right;
   padding: 8px;
   align-items: center;
-  border-bottom: 0.1px solid gray;
+  margin-top: 8px;
+  border-top: 0.1px solid gray;
 `;
 
 interface GUIProps {
@@ -294,101 +300,103 @@ function GUI(props: GUIProps) {
           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);
-            }}
-          >
-            Feedback
-            <ChatBubbleOvalLeftEllipsis size="1.6em" />
-          </HeaderButton>
-          <HeaderButton
-            onClick={() => {
-              client?.sendClear();
+      <MainDiv>
+        <TopGUIDiv
+          ref={topGuiDivRef}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" && e.ctrlKey) {
+              onMainTextInput();
+            }
+          }}
+        >
+          {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);
+                }}
+              />
+            );
+          })}
+          {waitingForSteps && <Loader></Loader>}
+
+          <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();
             }}
-            style={{ padding: "3px" }}
-          >
-            Clear History
-            <Trash size="1.6em" />
-          </HeaderButton>
-        </TopBar>
+            onInputValueChange={() => {}}
+            items={availableSlashCommands}
+          />
+          <ContinueButton onClick={onMainTextInput} />
 
-        {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);
+          <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);
               }}
-              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);
+            >
+              Feedback
+              <ChatBubbleOvalLeftEllipsis size="1.6em" />
+            </HeaderButton>
+            <HeaderButton
+              onClick={() => {
+                client?.sendClear();
               }}
-            />
-          );
-        })}
-        {waitingForSteps && <Loader></Loader>}
-
-        <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>
+              style={{ padding: "3px" }}
+            >
+              Clear History
+              <Trash size="1.6em" />
+            </HeaderButton>
+          </TopBar>
+        </TopGUIDiv>
+      </MainDiv>
     </>
   );
 }
-- 
cgit v1.2.3-70-g09d2