test

.gitignore

@@ -2,26 +2,15 @@ keys.json
 */__pycache__
 codeinterface-85b5e-firebase-adminsdk-11q7e-837ba92a03.json
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-coderec/app
-coderec/.next
-coderec/.firebase
-coderec/functions_python
-coderec/functions/node_modules
-# dependencies
-coderec/node_modules
-coderec/.pnp
 analysis/figures/*
 node_modules
-app
-next
 data_processing
 temp
 data/all_participants.csv
 tasks_study/final_study_tasks.ipynb
 data/gpt4_all_participants.csv
 data/final_df.pkl
 analysis/.ipynb_checkpoints
-functions_python
 .firebase
 .next
 .pnp.js

interface/app/components/PromptModal.css

@@ -0,0 +1,106 @@
+  .modal-content h2 {
+    margin-top: 0;
+    margin-bottom: 10px;
+  }
+
+  .modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+  }
+
+  /* .modal-content {
+    background: white;
+    padding: 20px;
+    border-radius: 8px;
+    width: 400px;
+    max-width: 100%;
+  } */
+
+  .modal-content {
+    background: #2b2b2b;
+    padding: 20px;
+    border-radius: 8px;
+    width: 80%;
+    max-width: 600px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  }
+
+  .tabs {
+    display: flex;
+    justify-content: space-between;
+    /* margin-bottom: 10px; */
+    margin-bottom: 0;
+    border-bottom: 2px solid #007bff;
+    border-radius: 0;
+  }
+
+  .tab {
+    flex: 1;
+    padding: 10px;
+    text-align: center;
+    cursor: pointer;
+    background-color: rgba(226, 226, 226);
+    color: black;
+    border-radius: 8px 8px 0 0;
+    transition: background-color 0.3s ease;
+    margin-right: 5px;
+    border: 2px solid rgba(156, 156, 156, 0.725);
+    border-bottom: none;
+  }
+
+  .tab:last-child {
+    margin-right: 0;
+  }
+
+  .tab.active {
+    background-color: #007bff;
+    border: 2px solid #007bff;
+    color: white;
+  }
+
+  textarea.modal-textarea {
+    width: 100%;
+    height: 200px; 
+    padding: 5px; 
+    margin-top: 0px;
+    margin-bottom: 5px;
+    border: 2px solid #007bff;
+    border-top: none;
+    border-radius: 0 0 8px 8px;
+    outline: none;
+    resize: none;
+    box-sizing: border-box;
+  }
+
+  .modal-buttons {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .modal-buttons button {
+    margin-top: 10px;
+    margin-left: 10px;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+
+  /* .modal-buttons button:first-child {
+    background-color: gray;
+    color: white;
+  }
+  
+  .modal-buttons button:last-child {
+    background-color: #007bff;
+    color: white;
+  } */
+

interface/app/components/PromptModal.tsx

@@ -0,0 +1,84 @@
+import React, { useState , useEffect } from 'react';
+import './PromptModal.css';
+import { default_prompts } from "./settings";
+
+export interface PromptProp {
+    system_prompt: string;
+    chat_prompt: string;
+    debug_prompt: string;
+    integrate_prompt: string;
+}  
+
+const promptDisplayNames: { [key in keyof PromptProp]: string } = {
+    system_prompt: "System Prompt",
+    chat_prompt: "Regular Template",
+    debug_prompt: "Debug Template",
+    integrate_prompt: "Integrate Template",
+};
+
+const tabOrder: Array<keyof PromptProp> = ["system_prompt", "chat_prompt", "debug_prompt", "integrate_prompt"];
+
+interface PromptModalProps {
+    show: boolean;
+    onClose: () => void;
+    onSave: (prompts: PromptProp) => void;
+    promptProp: PromptProp;
+  }
+
+  const PromptModal: React.FC<PromptModalProps> = ({ show, onClose, onSave, promptProp }) => {
+    const [activePrompt, setActivePrompt] = useState<keyof PromptProp>("chat_prompt");
+    const [prompts, setPrompts] = useState<PromptProp>(promptProp);
+
+    useEffect(() => {
+        if (show) {
+          setPrompts(promptProp);
+        }
+      }, [show, promptProp]);
+
+    const handleSave = () => {
+      onSave(prompts);
+      onClose();
+    };
+
+    const handleChange = (promptType: keyof PromptProp, value: string) => {
+      setPrompts((prev) => ({ ...prev, [promptType]: value }));
+    };
+
+    const resetPrompts = () => {
+      setPrompts(default_prompts);
+    }
+
+    if (!show) {
+      return null;
+    }
+
+    return (
+      <div className="modal-overlay">
+        <div className="modal-content">
+          <h2>Edit Prompt</h2>
+          <div className="tabs">
+            {tabOrder.map((key) => (
+              <div
+                key={key}
+                className={`tab ${activePrompt === key ? "active" : ""}`}
+                onClick={() => setActivePrompt(key as keyof PromptProp)}
+              >
+                {promptDisplayNames[key as keyof PromptProp]}
+              </div>
+            ))}
+          </div>
+          <textarea className="modal-textarea"
+            value={prompts[activePrompt]}
+            onChange={(e) => handleChange(activePrompt, e.target.value)}
+          />
+          <div className="modal-buttons">
+            <button onClick={resetPrompts}>Reset</button>
+            <button onClick={onClose}>Cancel</button>
+            <button onClick={handleSave}>Save</button>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+export default PromptModal;