implement ui for publish system prompt to hub

frontend/src/index.css

@@ -17,6 +17,7 @@
   --theme-bg-chat-input: #27282a;
   --theme-text-primary: #ffffff;
   --theme-text-secondary: rgba(255, 255, 255, 0.6);
+  --theme-placeholder: #57585a;
   --theme-sidebar-item-default: rgba(255, 255, 255, 0.1);
   --theme-sidebar-item-selected: rgba(255, 255, 255, 0.3);
   --theme-sidebar-item-hover: #3f3f42;
@@ -116,6 +117,7 @@
   --theme-bg-chat-input: #eaeaea;
   --theme-text-primary: #0e0f0f;
   --theme-text-secondary: #7a7d7e;
+  --theme-placeholder: #9ca3af;
   --theme-sidebar-item-default: #ffffff;
   --theme-sidebar-item-selected: #ffffff;
   --theme-sidebar-item-hover: #c8efff;

frontend/src/pages/WorkspaceSettings/ChatSettings/ChatPromptSettings/PublishPromptModal/index.jsx

@@ -0,0 +1,169 @@
+import { useState } from "react";
+import { X } from "@phosphor-icons/react";
+
+export default function PublishPromptModal({ show, onClose, currentPrompt }) {
+  const [formData, setFormData] = useState({
+    name: "",
+    description: "",
+    prompt: currentPrompt || "",
+    tags: "",
+    visibility: "public",
+  });
+
+  if (!show) return null;
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    onClose();
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center z-50">
+      <div className="relative w-[900px] max-w-full bg-theme-bg-primary rounded-lg shadow border border-theme-modal-border">
+        <div className="relative p-6">
+          <div className="w-full flex gap-x-2 items-center">
+            <h3 className="text-xl font-semibold text-white">
+              Publish System Prompt
+            </h3>
+          </div>
+          <button
+            onClick={onClose}
+            type="button"
+            className="absolute top-4 right-4 transition-all duration-300 bg-transparent rounded-lg text-sm p-1 inline-flex items-center hover:bg-theme-modal-border hover:border-theme-modal-border hover:border-opacity-50 border-transparent border"
+          >
+            <X size={24} weight="bold" className="text-white" />
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit} className="flex">
+          <div className="w-1/2 p-6 pt-0 space-y-4">
+            <div>
+              <label className="block text-sm font-semibold text-white mb-1">
+                Name
+              </label>
+              <div className="text-xs text-white/60 mb-2">
+                This is the display name of your system prompt.
+              </div>
+              <input
+                type="text"
+                value={formData.name}
+                placeholder="My System Prompt"
+                onChange={(e) =>
+                  setFormData({ ...formData, name: e.target.value })
+                }
+                className="w-full bg-theme-bg-secondary rounded-lg p-2 text-white text-sm focus:outline-primary-button active:outline-primary-button outline-none placeholder:text-theme-text-placeholder"
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm font-semibold text-white mb-1">
+                Description
+              </label>
+              <div className="text-xs text-white/60 mb-2">
+                This is the description of your system prompt. Use this to
+                describe the purpose of your system prompt.
+              </div>
+              <textarea
+                value={formData.description}
+                placeholder="This is the description of your system prompt. Use this to describe the purpose of your system prompt."
+                onChange={(e) =>
+                  setFormData({ ...formData, description: e.target.value })
+                }
+                className="w-full bg-theme-bg-secondary rounded-lg p-2 text-white text-sm focus:outline-primary-button active:outline-primary-button outline-none min-h-[80px] placeholder:text-theme-text-placeholder"
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm font-semibold text-white mb-1">
+                Tags
+              </label>
+              <div className="text-xs text-white/60 mb-2">
+                Tags are used to label your system prompt for easier searching.
+                You can add multiple tags.
+              </div>
+              <input
+                type="text"
+                value={formData.tags}
+                placeholder="tag1, tag2, tag3"
+                onChange={(e) =>
+                  setFormData({ ...formData, tags: e.target.value })
+                }
+                className="w-full bg-theme-bg-secondary rounded-lg p-2 text-white text-sm focus:outline-primary-button active:outline-primary-button outline-none placeholder:text-theme-text-placeholder"
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm font-semibold text-white mb-1">
+                Visibility
+              </label>
+              <div className="text-xs text-white/60 mb-2">
+                Public system prompts are visible to everyone. Private system
+                prompts are only visible to you and your team.
+              </div>
+              <div className="flex items-center space-x-4">
+                <label className="flex items-center">
+                  <input
+                    type="radio"
+                    name="visibility"
+                    value="public"
+                    checked={formData.visibility === "public"}
+                    onChange={(e) =>
+                      setFormData({ ...formData, visibility: e.target.value })
+                    }
+                    className="mr-2"
+                  />
+                  <span className="text-white text-sm">Public</span>
+                </label>
+                <label className="flex items-center">
+                  <input
+                    type="radio"
+                    name="visibility"
+                    value="private"
+                    checked={formData.visibility === "private"}
+                    onChange={(e) =>
+                      setFormData({ ...formData, visibility: e.target.value })
+                    }
+                    className="mr-2"
+                  />
+                  <span className="text-white text-sm">Private</span>
+                </label>
+              </div>
+              <div className="text-xs text-white/60 mt-2">
+                Private system prompts are currently in early access - you can
+                apply via email to contacting support.
+              </div>
+            </div>
+          </div>
+
+          <div className="w-1/2 p-6 pt-0 space-y-4">
+            <div>
+              <label className="block text-sm font-semibold text-white mb-1">
+                Prompt
+              </label>
+              <div className="text-xs text-white/60 mb-2">
+                This is the actual slash command that will be used to guide the
+                LLM.
+              </div>
+              <textarea
+                value={formData.prompt}
+                placeholder="Enter your system prompt here..."
+                onChange={(e) =>
+                  setFormData({ ...formData, prompt: e.target.value })
+                }
+                className="w-full bg-theme-bg-secondary rounded-lg p-2 text-white text-sm focus:outline-primary-button active:outline-primary-button outline-none min-h-[300px] placeholder:text-theme-text-placeholder"
+              />
+            </div>
+
+            <button
+              type="submit"
+              form="publish-form"
+              className="w-full bg-cta-button hover:bg-opacity-80 text-theme-bg-primary font-medium py-2 px-4 rounded-lg transition-colors"
+            >
+              Create slash command
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/WorkspaceSettings/ChatSettings/ChatPromptSettings/index.jsx

@@ -6,6 +6,7 @@ import Highlighter from "react-highlight-words";
 import { Link, useSearchParams } from "react-router-dom";
 import paths from "@/utils/paths";
 import ChatPromptHistory from "./ChatPromptHistory";
+import PublishPromptModal from "./PublishPromptModal";
 
 // TODO: Move to backend and have user-language sensitive default prompt
 const DEFAULT_PROMPT =
@@ -21,6 +22,7 @@ export default function ChatPromptSettings({ workspace, setHasChanges }) {
   const promptHistoryRef = useRef(null);
   const historyButtonRef = useRef(null);
   const [searchParams] = useSearchParams();
+  const [showPublishModal, setShowPublishModal] = useState(false);
 
   const handleRestore = (prompt) => {
     setPrompt(prompt);
@@ -77,6 +79,11 @@ export default function ChatPromptSettings({ workspace, setHasChanges }) {
           setShowPromptHistory(false);
         }}
       />
+      <PublishPromptModal
+        show={showPublishModal}
+        onClose={() => setShowPublishModal(false)}
+        currentPrompt={prompt}
+      />
       <div>
         <div className="flex flex-col">
           <div className="flex items-center justify-between">
@@ -120,7 +127,7 @@ export default function ChatPromptSettings({ workspace, setHasChanges }) {
           <button
             ref={historyButtonRef}
             type="button"
-            className="text-theme-text-secondary hover:text-white light:hover:text-black text-sm font-medium"
+            className="text-theme-text-secondary hover:text-white light:hover:text-black text-xs font-medium"
             onClick={(e) => {
               e.preventDefault();
               setShowPromptHistory(!showPromptHistory);
@@ -186,13 +193,22 @@ export default function ChatPromptSettings({ workspace, setHasChanges }) {
           </div>
           <div className="w-full flex flex-row items-center justify-between pt-2">
             {prompt !== DEFAULT_PROMPT && (
-              <button
-                type="button"
-                onClick={() => handleRestore(DEFAULT_PROMPT)}
-                className="text-theme-text-primary hover:text-white light:hover:text-black text-sm font-medium"
-              >
-                Clear
-              </button>
+              <>
+                <button
+                  type="button"
+                  onClick={() => handleRestore(DEFAULT_PROMPT)}
+                  className="text-theme-text-primary hover:text-white light:hover:text-black text-xs font-medium"
+                >
+                  Clear
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setShowPublishModal(true)}
+                  className="text-primary-button hover:text-white light:hover:text-black text-xs font-medium"
+                >
+                  Publish to Community Hub
+                </button>
+              </>
             )}
           </div>
         </div>

frontend/tailwind.config.js

@@ -61,6 +61,7 @@ export default {
           text: {
             primary: 'var(--theme-text-primary)',
             secondary: 'var(--theme-text-secondary)',
+            placeholder: 'var(--theme-placeholder)',
           },
           sidebar: {
             item: {