2 files changed, 161 insertions, 0 deletions
diff --git a/extension/react-app/src/components/dialogs/AddContextGroupDialog.tsx b/extension/react-app/src/components/dialogs/AddContextGroupDialog.tsx
new file mode 100644
index 00000000..f6c7c626
--- /dev/null
+++ b/extension/react-app/src/components/dialogs/AddContextGroupDialog.tsx
@@ -0,0 +1,50 @@
+import { useContext } from "react";
+import { Button, TextInput } from "..";
+import { GUIClientContext } from "../../App";
+import { useDispatch } from "react-redux";
+import {
+  setDialogMessage,
+  setShowDialog,
+} from "../../redux/slices/uiStateSlice";
+import { ContextItem } from "../../../../schema/FullState";
+
+function AddContextGroupDialog({
+  selectedContextItems,
+}: {
+  selectedContextItems: ContextItem[];
+}) {
+  const dispatch = useDispatch();
+  const client = useContext(GUIClientContext);
+
+  let inputElement: HTMLInputElement | null = null;
+
+  const handleCreate = () => {
+    dispatch(setDialogMessage(undefined));
+    dispatch(setShowDialog(false));
+    const title = inputElement ? inputElement.value : "My Context Group";
+    client?.saveContextGroup(title, selectedContextItems);
+  };
+
+  return (
+    <div>
+      <TextInput
+        defaultValue="My Context Group"
+        type="text"
+        ref={(input) => {
+          inputElement = input;
+        }}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") {
+            handleCreate();
+          }
+        }}
+      />
+      <br />
+      <Button className="ml-auto" onClick={handleCreate}>
+        Create
+      </Button>
+    </div>
+  );
+}
+
+export default AddContextGroupDialog;
diff --git a/extension/react-app/src/components/dialogs/SelectContextGroupDialog.tsx b/extension/react-app/src/components/dialogs/SelectContextGroupDialog.tsx
new file mode 100644
index 00000000..b8fc2bb7
--- /dev/null
+++ b/extension/react-app/src/components/dialogs/SelectContextGroupDialog.tsx
@@ -0,0 +1,111 @@
+import { useDispatch, useSelector } from "react-redux";
+import { RootStore } from "../../redux/store";
+import { useContext } from "react";
+import { GUIClientContext } from "../../App";
+import { TrashIcon } from "@heroicons/react/24/outline";
+import HeaderButtonWithText from "../HeaderButtonWithText";
+import {
+  setDialogMessage,
+  setShowDialog,
+} from "../../redux/slices/uiStateSlice";
+import {
+  Button,
+  defaultBorderRadius,
+  secondaryDark,
+  vscBackground,
+  vscForeground,
+} from "..";
+import styled from "styled-components";
+
+const MiniPillSpan = styled.span`
+  padding: 3px;
+  padding-left: 6px;
+  padding-right: 6px;
+  border-radius: ${defaultBorderRadius};
+  color: ${vscForeground};
+  background-color: #fff3;
+  overflow: hidden;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  justify-content: center;
+`;
+
+const ContextGroupSelectDiv = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px;
+  border-radius: ${defaultBorderRadius};
+  background-color: ${secondaryDark};
+  color: ${vscForeground};
+  margin-top: 8px;
+  cursor: pointer;
+
+  &:hover {
+    background-color: ${vscBackground};
+    color: ${vscForeground};
+  }
+`;
+
+function SelectContextGroupDialog() {
+  const dispatch = useDispatch();
+  const savedContextGroups = useSelector(
+    (state: RootStore) => state.serverState.saved_context_groups
+  );
+  const client = useContext(GUIClientContext);
+
+  return (
+    <div className="px-4">
+      <h2>Saved Context Groups</h2>
+
+      {savedContextGroups && Object.keys(savedContextGroups).length > 0 ? (
+        <div className="overflow-scroll">
+          {Object.keys(savedContextGroups).map((key: string) => {
+            const contextGroup = savedContextGroups[key];
+            return (
+              <ContextGroupSelectDiv
+                onClick={() => {
+                  dispatch(setDialogMessage(undefined));
+                  dispatch(setShowDialog(false));
+                  client?.selectContextGroup(key);
+                }}
+              >
+                <b>{key}: </b>
+
+                {contextGroup.map((contextItem) => {
+                  return (
+                    <MiniPillSpan>{contextItem.description.name}</MiniPillSpan>
+                  );
+                })}
+                <HeaderButtonWithText
+                  text="Delete"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    client?.deleteContextGroup(key);
+                  }}
+                >
+                  <TrashIcon width="1.4em" height="1.4em" />
+                </HeaderButtonWithText>
+              </ContextGroupSelectDiv>
+            );
+          })}
+        </div>
+      ) : (
+        <div>No saved context groups</div>
+      )}
+      <Button
+        className="ml-auto"
+        onClick={() => {
+          dispatch(setDialogMessage(undefined));
+          dispatch(setShowDialog(false));
+        }}
+      >
+        Cancel
+      </Button>
+    </div>
+  );
+}
+
+export default SelectContextGroupDialog;