mirror of
https://github.com/aljazceru/goose.git
synced 2025-12-28 03:24:21 +01:00
Prompt Library (#1906)
This commit is contained in:
Rizel Scarlett
141
documentation/src/components/prompt-card.tsx
Normal file
141
documentation/src/components/prompt-card.tsx
Normal file
@@ -0,0 +1,141 @@
|
||||
import { Download, Terminal, Info } from "lucide-react";
|
||||
import Link from "@docusaurus/Link";
|
||||
import { useState } from "react";
|
||||
import CodeBlock from '@theme/CodeBlock';
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { getGooseInstallLink } from "@site/src/utils/install-links";
|
||||
import type { MCPServer } from "@site/src/types/server";
|
||||
import type { Prompt, Extension } from "@site/src/types/prompt";
|
||||
|
||||
function extensionToMCPServer(extension: Extension): MCPServer {
|
||||
return {
|
||||
id: extension.command,
|
||||
name: extension.name,
|
||||
command: extension.command,
|
||||
description: extension.name,
|
||||
is_builtin: extension.is_builtin,
|
||||
link: extension.link || '',
|
||||
installation_notes: extension.installation_notes || '',
|
||||
endorsed: false,
|
||||
environmentVariables: extension.environmentVariables || [],
|
||||
githubStars: 0
|
||||
};
|
||||
}
|
||||
|
||||
export function PromptCard({ prompt }: { prompt: Prompt }) {
|
||||
const [expandedExtension, setExpandedExtension] = useState<string | null>(null);
|
||||
|
||||
return (
|
||||
<Link
|
||||
to={`/prompt-library/detail?id=${prompt.id}`}
|
||||
className="block no-underline hover:no-underline"
|
||||
>
|
||||
<div className="extension-title h-full">
|
||||
<div className="server-card interactive w-full h-full">
|
||||
<div className="card-glow"></div>
|
||||
<div className="prompt-card">
|
||||
<div className="card-header">
|
||||
<div className="card-header-content">
|
||||
<span className="home-page-server-name">
|
||||
{prompt.title}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="prompt-card-content">
|
||||
<div>
|
||||
<div>
|
||||
<p className="card-description">{prompt.description}</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<div className="border-t border-borderSubtle pt-4">
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{prompt.extensions.map((extension, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex flex-col"
|
||||
>
|
||||
<div
|
||||
className={`
|
||||
inline-flex items-center h-9 px-4 rounded-full
|
||||
bg-background-subtle border border-borderSubtle
|
||||
transition-all duration-150 ease-in-out
|
||||
hover:bg-background-standard hover:border-borderStandard
|
||||
group ${extension.is_builtin ? 'cursor-help' : 'cursor-pointer'}
|
||||
${expandedExtension === extension.command ? 'bg-background-standard border-borderStandard' : ''}
|
||||
`}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (!extension.is_builtin) {
|
||||
setExpandedExtension(expandedExtension === extension.command ? null : extension.command);
|
||||
}
|
||||
}}
|
||||
title={extension.is_builtin ? "Built-in extension - can be enabled in settings" : "Click to see installation options"}
|
||||
>
|
||||
<span className="text-sm text-textStandard group-hover:text-textProminent">
|
||||
{extension.name}
|
||||
</span>
|
||||
{extension.is_builtin ? (
|
||||
<div className="inline-flex items-center ml-2">
|
||||
<span className="text-sm text-textSubtle">
|
||||
Built-in
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<span className="ml-2 text-textSubtle">
|
||||
<Download className="h-4 w-4" />
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Inline Expansion */}
|
||||
<AnimatePresence>
|
||||
{!extension.is_builtin && expandedExtension === extension.command && (
|
||||
<motion.div
|
||||
initial={{ height: 0, opacity: 0 }}
|
||||
animate={{ height: "auto", opacity: 1 }}
|
||||
exit={{ height: 0, opacity: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="overflow-hidden"
|
||||
>
|
||||
<div className="mt-2 bg-background-subtle rounded-md p-3 border border-borderSubtle space-y-3">
|
||||
<a
|
||||
href={getGooseInstallLink(extensionToMCPServer(extension))}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-2 text-textStandard hover:text-textProminent"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<Download className="h-4 w-4" />
|
||||
<span className="text-sm">Install via Desktop</span>
|
||||
</a>
|
||||
|
||||
<div className="border-t border-borderSubtle" />
|
||||
|
||||
<button
|
||||
className="command-toggle"
|
||||
>
|
||||
<Terminal className="h-4 w-4" />
|
||||
<h4 className="mx-2">Command</h4>
|
||||
</button>
|
||||
<CodeBlock language="bash">
|
||||
goose session --with-extension "{extension.command}"
|
||||
</CodeBlock>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
34
documentation/src/components/ui/pill-filter.tsx
Normal file
34
documentation/src/components/ui/pill-filter.tsx
Normal file
@@ -0,0 +1,34 @@
|
||||
import { cn } from "@site/src/utils/cn";
|
||||
|
||||
export type PillFilterOption = {
|
||||
label: string;
|
||||
value: string;
|
||||
};
|
||||
|
||||
interface PillFilterProps {
|
||||
options: PillFilterOption[];
|
||||
selectedValue: string;
|
||||
onChange: (value: string) => void;
|
||||
}
|
||||
|
||||
export function PillFilter({ options, selectedValue, onChange }: PillFilterProps) {
|
||||
return (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{options.map((option) => (
|
||||
<button
|
||||
key={option.value}
|
||||
onClick={() => onChange(option.value)}
|
||||
className={cn(
|
||||
"px-4 py-2 rounded-full text-sm font-medium transition-colors",
|
||||
"border border-borderSubtle",
|
||||
selectedValue === option.value
|
||||
? "dark:bg-white dark:text-black bg-black text-white border-borderProminent"
|
||||
: "bg-bgApp text-textStandard"
|
||||
)}
|
||||
>
|
||||
{option.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
65
documentation/src/components/ui/sidebar-filter.tsx
Normal file
65
documentation/src/components/ui/sidebar-filter.tsx
Normal file
@@ -0,0 +1,65 @@
|
||||
import { cn } from "@site/src/utils/cn";
|
||||
|
||||
export type SidebarFilterOption = {
|
||||
label: string;
|
||||
value: string;
|
||||
count?: number;
|
||||
};
|
||||
|
||||
export type SidebarFilterGroup = {
|
||||
title: string;
|
||||
options: SidebarFilterOption[];
|
||||
};
|
||||
|
||||
interface SidebarFilterProps {
|
||||
groups: SidebarFilterGroup[];
|
||||
selectedValues: Record<string, string[]>;
|
||||
onChange: (groupTitle: string, values: string[]) => void;
|
||||
}
|
||||
|
||||
export function SidebarFilter({ groups, selectedValues, onChange }: SidebarFilterProps) {
|
||||
const toggleValue = (groupTitle: string, value: string) => {
|
||||
const currentValues = selectedValues[groupTitle] || [];
|
||||
const newValues = currentValues.includes(value)
|
||||
? currentValues.filter((v) => v !== value)
|
||||
: [...currentValues, value];
|
||||
onChange(groupTitle, newValues);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-64 pr-8">
|
||||
{groups.map((group) => (
|
||||
<div key={group.title} className="mb-8">
|
||||
<h3 className="text-lg font-medium mb-4 text-textProminent">
|
||||
{group.title}
|
||||
</h3>
|
||||
<div className="space-y-2">
|
||||
{group.options.map((option) => (
|
||||
<label
|
||||
key={option.value}
|
||||
className="flex items-center justify-between group cursor-pointer"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={(selectedValues[group.title] || []).includes(option.value)}
|
||||
onChange={() => toggleValue(group.title, option.value)}
|
||||
className="form-checkbox h-4 w-4 text-purple-600 transition duration-150 ease-in-out"
|
||||
/>
|
||||
<span className="ml-2 text-sm text-textStandard group-hover:text-textProminent">
|
||||
{option.label}
|
||||
</span>
|
||||
</div>
|
||||
{option.count !== undefined && (
|
||||
<span className="text-sm text-textSubtle">
|
||||
{option.count}
|
||||
</span>
|
||||
)}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user