mirror of
https://github.com/rowboatlabs/rowboat.git
synced 2026-05-31 19:15:17 +02:00
Merge pull request #269 from rowboatlabs/dev
Hide community cards behind feature flag
This commit is contained in:
arkml
GitHub
commit
109997ca2e
3 changed files with 219 additions and 204 deletions
|
|
@ -18,3 +18,6 @@ export const SHOW_COPILOT_MARQUEE = false;
|
||||||
export const SHOW_PROMPTS_SECTION = true;
|
export const SHOW_PROMPTS_SECTION = true;
|
||||||
export const SHOW_DARK_MODE_TOGGLE = false;
|
export const SHOW_DARK_MODE_TOGGLE = false;
|
||||||
export const SHOW_VISUALIZATION = false;
|
export const SHOW_VISUALIZATION = false;
|
||||||
|
|
||||||
|
// Client-safe flags
|
||||||
|
export const SHOW_COMMUNITY_PUBLISH = false;
|
||||||
|
|
|
||||||
|
|
@ -7,6 +7,7 @@ import { useParams, useRouter } from "next/navigation";
|
||||||
import { ProgressBar, ProgressStep } from "@/components/ui/progress-bar";
|
import { ProgressBar, ProgressStep } from "@/components/ui/progress-bar";
|
||||||
import { useUser } from '@auth0/nextjs-auth0';
|
import { useUser } from '@auth0/nextjs-auth0';
|
||||||
import { useState, useEffect } from "react";
|
import { useState, useEffect } from "react";
|
||||||
|
import { SHOW_COMMUNITY_PUBLISH } from "@/app/lib/feature_flags";
|
||||||
|
|
||||||
interface TopBarProps {
|
interface TopBarProps {
|
||||||
localProjectName: string;
|
localProjectName: string;
|
||||||
|
|
@ -708,126 +709,130 @@ export function TopBar({
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Divider */}
|
{/* Divider */}
|
||||||
<div className="relative">
|
{SHOW_COMMUNITY_PUBLISH && (
|
||||||
<div className="absolute inset-0 flex items-center">
|
<div className="relative">
|
||||||
<div className="w-full border-t border-gray-200 dark:border-gray-700"></div>
|
<div className="absolute inset-0 flex items-center">
|
||||||
|
<div className="w-full border-t border-gray-200 dark:border-gray-700"></div>
|
||||||
|
</div>
|
||||||
|
<div className="relative flex justify-center">
|
||||||
|
<span className="px-4 bg-white dark:bg-gray-900 text-xs font-medium text-gray-400 dark:text-gray-500 uppercase tracking-wider">or</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="relative flex justify-center">
|
)}
|
||||||
<span className="px-4 bg-white dark:bg-gray-900 text-xs font-medium text-gray-400 dark:text-gray-500 uppercase tracking-wider">or</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Community Publishing Section */}
|
{/* Community Publishing Section */}
|
||||||
<div className="space-y-6">
|
{SHOW_COMMUNITY_PUBLISH && (
|
||||||
<div className="flex items-center gap-3">
|
<div className="space-y-6">
|
||||||
<div className="w-8 h-8 rounded-lg bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center">
|
<div className="flex items-center gap-3">
|
||||||
<MessageCircleIcon size={16} className="text-purple-600 dark:text-purple-400" />
|
<div className="w-8 h-8 rounded-lg bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center">
|
||||||
</div>
|
<MessageCircleIcon size={16} className="text-purple-600 dark:text-purple-400" />
|
||||||
<div>
|
|
||||||
<h3 className="text-base font-medium text-gray-900 dark:text-gray-100">Publish to Community</h3>
|
|
||||||
<p className="text-sm text-gray-500 dark:text-gray-400">Make it discoverable by others</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-5">
|
|
||||||
{/* Assistant Name */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<label className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
|
||||||
Assistant Name <span className="text-red-500">*</span>
|
|
||||||
</label>
|
|
||||||
<Input
|
|
||||||
placeholder="Enter assistant name"
|
|
||||||
value={communityData.name}
|
|
||||||
onChange={(e) => setCommunityData({ ...communityData, name: e.target.value })}
|
|
||||||
classNames={{
|
|
||||||
input: "text-sm focus:outline-none !focus:ring-0 !focus:ring-offset-0 !ring-0 !ring-offset-0",
|
|
||||||
inputWrapper: "border-gray-200 dark:border-gray-600 hover:border-gray-300 dark:hover:border-gray-500 focus-within:border-gray-300 dark:focus-within:border-gray-500 !focus-within:ring-0 !focus-within:ring-offset-0 !ring-0 !ring-offset-0"
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Description */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<label className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
|
||||||
Description <span className="text-red-500">*</span>
|
|
||||||
</label>
|
|
||||||
<Textarea
|
|
||||||
placeholder="Describe what this assistant does..."
|
|
||||||
value={communityData.description}
|
|
||||||
onChange={(e) => setCommunityData({ ...communityData, description: e.target.value })}
|
|
||||||
minRows={3}
|
|
||||||
classNames={{
|
|
||||||
input: "text-sm focus:outline-none !focus:ring-0 !focus:ring-offset-0 !ring-0 !ring-offset-0",
|
|
||||||
inputWrapper: "border-gray-200 dark:border-gray-600 hover:border-gray-300 dark:hover:border-gray-500 focus-within:border-gray-300 dark:focus-within:border-gray-500 !focus-within:ring-0 !focus-within:ring-offset-0 !ring-0 !ring-offset-0"
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Category */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<label className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
|
||||||
Category <span className="text-red-500">*</span>
|
|
||||||
</label>
|
|
||||||
<Select
|
|
||||||
placeholder="Select a category"
|
|
||||||
selectedKeys={communityData.category ? [communityData.category] : []}
|
|
||||||
onSelectionChange={(keys) => {
|
|
||||||
const selected = Array.from(keys)[0] as string;
|
|
||||||
setCommunityData({ ...communityData, category: selected });
|
|
||||||
}}
|
|
||||||
classNames={{
|
|
||||||
trigger: "border-gray-200 dark:border-gray-600 hover:border-gray-300 dark:hover:border-gray-500 focus:outline-none !focus:ring-0 !focus:ring-offset-0 !ring-0 !ring-offset-0 focus-within:border-gray-300 dark:focus-within:border-gray-500 !focus-within:ring-0 !focus-within:ring-offset-0",
|
|
||||||
value: "text-sm"
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<SelectItem key="Work Productivity">Work Productivity</SelectItem>
|
|
||||||
<SelectItem key="Developer Productivity">Developer Productivity</SelectItem>
|
|
||||||
<SelectItem key="News & Social">News & Social</SelectItem>
|
|
||||||
<SelectItem key="Customer Support">Customer Support</SelectItem>
|
|
||||||
<SelectItem key="Education">Education</SelectItem>
|
|
||||||
<SelectItem key="Entertainment">Entertainment</SelectItem>
|
|
||||||
<SelectItem key="Other">Other</SelectItem>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Privacy Toggle */}
|
|
||||||
<div className="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-800/30 rounded-xl border border-gray-200 dark:border-gray-700">
|
|
||||||
<div className="flex-1">
|
|
||||||
<div className="text-sm font-medium text-gray-900 dark:text-gray-100 mb-1">
|
|
||||||
{communityData.isAnonymous ? 'Publish anonymously' : `Publish as ${getUserDisplayName()}`}
|
|
||||||
</div>
|
|
||||||
<div className="text-xs text-gray-500 dark:text-gray-400">
|
|
||||||
{communityData.isAnonymous ? 'Your name will be hidden from the community' : 'Your name will be visible to the community'}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<button
|
<div>
|
||||||
type="button"
|
<h3 className="text-base font-medium text-gray-900 dark:text-gray-100">Publish to Community</h3>
|
||||||
onClick={() => setCommunityData({ ...communityData, isAnonymous: !communityData.isAnonymous })}
|
<p className="text-sm text-gray-500 dark:text-gray-400">Make it discoverable by others</p>
|
||||||
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 ${
|
</div>
|
||||||
communityData.isAnonymous ? 'bg-gray-300 dark:bg-gray-600' : 'bg-blue-600'
|
</div>
|
||||||
}`}
|
|
||||||
>
|
<div className="space-y-5">
|
||||||
<span
|
{/* Assistant Name */}
|
||||||
className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
|
<div className="space-y-2">
|
||||||
communityData.isAnonymous ? 'translate-x-1' : 'translate-x-6'
|
<label className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||||
}`}
|
Assistant Name <span className="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<Input
|
||||||
|
placeholder="Enter assistant name"
|
||||||
|
value={communityData.name}
|
||||||
|
onChange={(e) => setCommunityData({ ...communityData, name: e.target.value })}
|
||||||
|
classNames={{
|
||||||
|
input: "text-sm focus:outline-none !focus:ring-0 !focus:ring-offset-0 !ring-0 !ring-offset-0",
|
||||||
|
inputWrapper: "border-gray-200 dark:border-gray-600 hover:border-gray-300 dark:hover:border-gray-500 focus-within:border-gray-300 dark:focus-within:border-gray-500 !focus-within:ring-0 !focus-within:ring-offset-0 !ring-0 !ring-offset-0"
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Success Message */}
|
|
||||||
{communityPublishSuccess && (
|
|
||||||
<div className="flex items-center gap-3 p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-xl">
|
|
||||||
<div className="w-5 h-5 rounded-full bg-green-100 dark:bg-green-900/40 flex items-center justify-center">
|
|
||||||
<span className="text-green-600 dark:text-green-400 text-xs">✓</span>
|
|
||||||
</div>
|
|
||||||
<p className="text-green-700 dark:text-green-300 text-sm font-medium">
|
|
||||||
Successfully published to community!
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
|
{/* Description */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||||
|
Description <span className="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<Textarea
|
||||||
|
placeholder="Describe what this assistant does..."
|
||||||
|
value={communityData.description}
|
||||||
|
onChange={(e) => setCommunityData({ ...communityData, description: e.target.value })}
|
||||||
|
minRows={3}
|
||||||
|
classNames={{
|
||||||
|
input: "text-sm focus:outline-none !focus:ring-0 !focus:ring-offset-0 !ring-0 !ring-offset-0",
|
||||||
|
inputWrapper: "border-gray-200 dark:border-gray-600 hover:border-gray-300 dark:hover:border-gray-500 focus-within:border-gray-300 dark:focus-within:border-gray-500 !focus-within:ring-0 !focus-within:ring-offset-0 !ring-0 !ring-offset-0"
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Category */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||||
|
Category <span className="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<Select
|
||||||
|
placeholder="Select a category"
|
||||||
|
selectedKeys={communityData.category ? [communityData.category] : []}
|
||||||
|
onSelectionChange={(keys) => {
|
||||||
|
const selected = Array.from(keys)[0] as string;
|
||||||
|
setCommunityData({ ...communityData, category: selected });
|
||||||
|
}}
|
||||||
|
classNames={{
|
||||||
|
trigger: "border-gray-200 dark:border-gray-600 hover:border-gray-300 dark:hover:border-gray-500 focus:outline-none !focus:ring-0 !focus:ring-offset-0 !ring-0 !ring-offset-0 focus-within:border-gray-300 dark:focus-within:border-gray-500 !focus-within:ring-0 !focus-within:ring-offset-0",
|
||||||
|
value: "text-sm"
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SelectItem key="Work Productivity">Work Productivity</SelectItem>
|
||||||
|
<SelectItem key="Developer Productivity">Developer Productivity</SelectItem>
|
||||||
|
<SelectItem key="News & Social">News & Social</SelectItem>
|
||||||
|
<SelectItem key="Customer Support">Customer Support</SelectItem>
|
||||||
|
<SelectItem key="Education">Education</SelectItem>
|
||||||
|
<SelectItem key="Entertainment">Entertainment</SelectItem>
|
||||||
|
<SelectItem key="Other">Other</SelectItem>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Privacy Toggle */}
|
||||||
|
<div className="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-800/30 rounded-xl border border-gray-200 dark:border-gray-700">
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="text-sm font-medium text-gray-900 dark:text-gray-100 mb-1">
|
||||||
|
{communityData.isAnonymous ? 'Publish anonymously' : `Publish as ${getUserDisplayName()}`}
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-gray-500 dark:text-gray-400">
|
||||||
|
{communityData.isAnonymous ? 'Your name will be hidden from the community' : 'Your name will be visible to the community'}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setCommunityData({ ...communityData, isAnonymous: !communityData.isAnonymous })}
|
||||||
|
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 ${
|
||||||
|
communityData.isAnonymous ? 'bg-gray-300 dark:bg-gray-600' : 'bg-blue-600'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
|
||||||
|
communityData.isAnonymous ? 'translate-x-1' : 'translate-x-6'
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Success Message */}
|
||||||
|
{communityPublishSuccess && (
|
||||||
|
<div className="flex items-center gap-3 p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-xl">
|
||||||
|
<div className="w-5 h-5 rounded-full bg-green-100 dark:bg-green-900/40 flex items-center justify-center">
|
||||||
|
<span className="text-green-600 dark:text-green-400 text-xs">✓</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-green-700 dark:text-green-300 text-sm font-medium">
|
||||||
|
Successfully published to community!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)}
|
||||||
</div>
|
</div>
|
||||||
</ModalBody>
|
</ModalBody>
|
||||||
<ModalFooter className="gap-3">
|
<ModalFooter className="gap-3">
|
||||||
|
|
@ -836,76 +841,80 @@ export function TopBar({
|
||||||
onPress={onShareModalClose}
|
onPress={onShareModalClose}
|
||||||
className="px-6 py-2 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200"
|
className="px-6 py-2 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200"
|
||||||
>
|
>
|
||||||
Cancel
|
Close
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
color={communityPublishSuccess ? "success" : "primary"}
|
|
||||||
onPress={() => {
|
|
||||||
// Open confirmation first
|
|
||||||
onConfirmOpen();
|
|
||||||
}}
|
|
||||||
isLoading={communityPublishing}
|
|
||||||
isDisabled={communityPublishSuccess || !communityData.name.trim() || !communityData.description.trim() || !communityData.category}
|
|
||||||
className={`${communityPublishSuccess ? 'bg-green-600 hover:bg-green-700' : 'bg-blue-600 hover:bg-blue-700'} px-6 py-2 text-white font-medium`}
|
|
||||||
>
|
|
||||||
{communityPublishSuccess ? 'Published' : (communityPublishing ? 'Publishing...' : 'Publish to Community')}
|
|
||||||
</Button>
|
</Button>
|
||||||
|
{SHOW_COMMUNITY_PUBLISH && (
|
||||||
|
<Button
|
||||||
|
color={communityPublishSuccess ? "success" : "primary"}
|
||||||
|
onPress={() => {
|
||||||
|
// Open confirmation first
|
||||||
|
onConfirmOpen();
|
||||||
|
}}
|
||||||
|
isLoading={communityPublishing}
|
||||||
|
isDisabled={communityPublishSuccess || !communityData.name.trim() || !communityData.description.trim() || !communityData.category}
|
||||||
|
className={`${communityPublishSuccess ? 'bg-green-600 hover:bg-green-700' : 'bg-blue-600 hover:bg-blue-700'} px-6 py-2 text-white font-medium`}
|
||||||
|
>
|
||||||
|
{communityPublishSuccess ? 'Published' : (communityPublishing ? 'Publishing...' : 'Publish to Community')}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
</ModalFooter>
|
</ModalFooter>
|
||||||
</ModalContent>
|
</ModalContent>
|
||||||
</Modal>
|
</Modal>
|
||||||
|
|
||||||
{/* Confirmation Modal for Community Publish */}
|
{/* Confirmation Modal for Community Publish */}
|
||||||
<Modal
|
{SHOW_COMMUNITY_PUBLISH && (
|
||||||
isOpen={isConfirmOpen}
|
<Modal
|
||||||
onClose={() => { setAcknowledged(false); onConfirmClose(); }}
|
isOpen={isConfirmOpen}
|
||||||
size="md"
|
onClose={() => { setAcknowledged(false); onConfirmClose(); }}
|
||||||
classNames={{
|
size="md"
|
||||||
base: "bg-white dark:bg-gray-900",
|
classNames={{
|
||||||
header: "border-b border-gray-200 dark:border-gray-700 pb-3",
|
base: "bg-white dark:bg-gray-900",
|
||||||
body: "py-5",
|
header: "border-b border-gray-200 dark:border-gray-700 pb-3",
|
||||||
footer: "border-t border-gray-200 dark:border-gray-700 pt-3"
|
body: "py-5",
|
||||||
}}
|
footer: "border-t border-gray-200 dark:border-gray-700 pt-3"
|
||||||
>
|
}}
|
||||||
<ModalContent>
|
>
|
||||||
<ModalHeader>
|
<ModalContent>
|
||||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">Confirm publish to community</h3>
|
<ModalHeader>
|
||||||
</ModalHeader>
|
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">Confirm publish to community</h3>
|
||||||
<ModalBody>
|
</ModalHeader>
|
||||||
<div className="space-y-3 text-sm text-gray-700 dark:text-gray-300">
|
<ModalBody>
|
||||||
<p>Publishing to community will make this assistant and its description publicly visible to other users.</p>
|
<div className="space-y-3 text-sm text-gray-700 dark:text-gray-300">
|
||||||
<ul className="list-disc pl-5 space-y-1">
|
<p>Publishing to community will make this assistant and its description publicly visible to other users.</p>
|
||||||
<li>Your assistant may appear in the community templates library.</li>
|
<ul className="list-disc pl-5 space-y-1">
|
||||||
<li>Others can import and use this assistant in their own projects.</li>
|
<li>Your assistant may appear in the community templates library.</li>
|
||||||
<li>Do not include secrets or private data in the description or workflow.</li>
|
<li>Others can import and use this assistant in their own projects.</li>
|
||||||
</ul>
|
<li>Do not include secrets or private data in the description or workflow.</li>
|
||||||
<div className="mt-3 flex items-start gap-2">
|
</ul>
|
||||||
<input
|
<div className="mt-3 flex items-start gap-2">
|
||||||
id="ack-publish"
|
<input
|
||||||
type="checkbox"
|
id="ack-publish"
|
||||||
checked={acknowledged}
|
type="checkbox"
|
||||||
onChange={(e) => setAcknowledged(e.target.checked)}
|
checked={acknowledged}
|
||||||
className="mt-1 h-4 w-4"
|
onChange={(e) => setAcknowledged(e.target.checked)}
|
||||||
/>
|
className="mt-1 h-4 w-4"
|
||||||
<label htmlFor="ack-publish" className="text-sm">I understand this will be publicly available.</label>
|
/>
|
||||||
|
<label htmlFor="ack-publish" className="text-sm">I understand this will be publicly available.</label>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</ModalBody>
|
||||||
</ModalBody>
|
<ModalFooter>
|
||||||
<ModalFooter>
|
<Button variant="light" onPress={() => { setAcknowledged(false); onConfirmClose(); }}>Cancel</Button>
|
||||||
<Button variant="light" onPress={() => { setAcknowledged(false); onConfirmClose(); }}>Cancel</Button>
|
<Button
|
||||||
<Button
|
color="primary"
|
||||||
color="primary"
|
isDisabled={!acknowledged}
|
||||||
isDisabled={!acknowledged}
|
onPress={() => {
|
||||||
onPress={() => {
|
onConfirmClose();
|
||||||
onConfirmClose();
|
setAcknowledged(false);
|
||||||
setAcknowledged(false);
|
onCommunityPublish();
|
||||||
onCommunityPublish();
|
}}
|
||||||
}}
|
>
|
||||||
>
|
Confirm & Publish
|
||||||
Confirm & Publish
|
</Button>
|
||||||
</Button>
|
</ModalFooter>
|
||||||
</ModalFooter>
|
</ModalContent>
|
||||||
</ModalContent>
|
</Modal>
|
||||||
</Modal>
|
)}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,6 +6,7 @@ import { Search, Filter } from 'lucide-react';
|
||||||
import { AssistantCard } from './AssistantCard';
|
import { AssistantCard } from './AssistantCard';
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import { getCurrentUser } from '@/app/actions/assistant-templates.actions';
|
import { getCurrentUser } from '@/app/actions/assistant-templates.actions';
|
||||||
|
import { SHOW_COMMUNITY_PUBLISH } from '@/app/lib/feature_flags';
|
||||||
|
|
||||||
interface TemplateItem {
|
interface TemplateItem {
|
||||||
id: string;
|
id: string;
|
||||||
|
|
@ -60,7 +61,7 @@ export function UnifiedTemplatesSection({
|
||||||
onTypeChange,
|
onTypeChange,
|
||||||
}: UnifiedTemplatesSectionProps) {
|
}: UnifiedTemplatesSectionProps) {
|
||||||
const [searchQuery, setSearchQuery] = useState('');
|
const [searchQuery, setSearchQuery] = useState('');
|
||||||
const [selectedType, setSelectedType] = useState<'prebuilt' | 'community'>('prebuilt');
|
const [selectedType, setSelectedType] = useState<'prebuilt' | 'community'>(SHOW_COMMUNITY_PUBLISH ? 'prebuilt' : 'prebuilt');
|
||||||
const [selectedCategories, setSelectedCategories] = useState<Set<string>>(new Set());
|
const [selectedCategories, setSelectedCategories] = useState<Set<string>>(new Set());
|
||||||
const [sortBy, setSortBy] = useState<'popular' | 'newest' | 'alphabetical'>('alphabetical');
|
const [sortBy, setSortBy] = useState<'popular' | 'newest' | 'alphabetical'>('alphabetical');
|
||||||
const [currentUserId, setCurrentUserId] = useState<string | null>(null);
|
const [currentUserId, setCurrentUserId] = useState<string | null>(null);
|
||||||
|
|
@ -105,7 +106,7 @@ export function UnifiedTemplatesSection({
|
||||||
const allTemplates = useMemo(() => {
|
const allTemplates = useMemo(() => {
|
||||||
const combined = [
|
const combined = [
|
||||||
...prebuiltTemplates.map(t => ({ ...t, type: 'prebuilt' as const })),
|
...prebuiltTemplates.map(t => ({ ...t, type: 'prebuilt' as const })),
|
||||||
...communityTemplates.map(t => ({ ...t, type: 'community' as const }))
|
...(SHOW_COMMUNITY_PUBLISH ? communityTemplates.map(t => ({ ...t, type: 'community' as const })) : [])
|
||||||
];
|
];
|
||||||
return combined;
|
return combined;
|
||||||
}, [prebuiltTemplates, communityTemplates]);
|
}, [prebuiltTemplates, communityTemplates]);
|
||||||
|
|
@ -300,32 +301,34 @@ export function UnifiedTemplatesSection({
|
||||||
|
|
||||||
<div className="flex gap-2">
|
<div className="flex gap-2">
|
||||||
{/* Type Filter Segmented Control (Library | Community) */}
|
{/* Type Filter Segmented Control (Library | Community) */}
|
||||||
<div className="flex gap-0.5 items-center h-8 rounded-full border border-gray-200 dark:border-gray-700 p-0 bg-white dark:bg-gray-800 shadow-sm overflow-hidden">
|
{SHOW_COMMUNITY_PUBLISH && (
|
||||||
{[
|
<div className="flex gap-0.5 items-center h-8 rounded-full border border-gray-200 dark:border-gray-700 p-0 bg-white dark:bg-gray-800 shadow-sm overflow-hidden">
|
||||||
{ key: 'prebuilt', label: 'Library' },
|
{[
|
||||||
{ key: 'community', label: 'Community' }
|
{ key: 'prebuilt', label: 'Library' },
|
||||||
].map(({ key, label }) => (
|
{ key: 'community', label: 'Community' }
|
||||||
<button
|
].map(({ key, label }) => (
|
||||||
key={key}
|
<button
|
||||||
onClick={async () => {
|
key={key}
|
||||||
const newType = key as 'prebuilt' | 'community';
|
onClick={async () => {
|
||||||
const target = rowsShown * itemsPerRow;
|
const newType = key as 'prebuilt' | 'community';
|
||||||
if (onTypeChange) {
|
const target = rowsShown * itemsPerRow;
|
||||||
await onTypeChange(newType, target);
|
if (onTypeChange) {
|
||||||
}
|
await onTypeChange(newType, target);
|
||||||
setSelectedType(newType);
|
}
|
||||||
}}
|
setSelectedType(newType);
|
||||||
aria-pressed={selectedType === key}
|
}}
|
||||||
className={`inline-flex items-center h-8 px-2.5 rounded-full text-[13px] font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400 ${
|
aria-pressed={selectedType === key}
|
||||||
selectedType === key
|
className={`inline-flex items-center h-8 px-2.5 rounded-full text-[13px] font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400 ${
|
||||||
? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300'
|
selectedType === key
|
||||||
: 'bg-transparent text-gray-700 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-700'
|
? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300'
|
||||||
}`}
|
: 'bg-transparent text-gray-700 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-700'
|
||||||
>
|
}`}
|
||||||
{label}
|
>
|
||||||
</button>
|
{label}
|
||||||
))}
|
</button>
|
||||||
</div>
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* Sort Dropdown (Popularity only for Community) */}
|
{/* Sort Dropdown (Popularity only for Community) */}
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue