1 files changed, 50 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;