PromptDetail.tsx

import React from 'react';
import { ArrowLeft, Copy } from 'lucide-react';

interface Tool {
  id: string;
  name: string;
  icon: string;
}

interface PromptDetailProps {
  onBack: () => void;
  prompt: {
    id: string;
    title: string;
    description: string;
    promptText: string;
    department: string;
    category: string;
  };
}

const tools: Tool[] = [
  { id: 'airtable', name: 'Airtable', icon: '📊' },
  { id: 'browser', name: 'Browser Use', icon: '🌐' },
  { id: 'confluence', name: 'Confluence', icon: '📝' },
  { id: 'elevenlabs', name: 'ElevenLabs', icon: '🎧' },
  { id: 'evaluator', name: 'Evaluator', icon: '📊' },
  { id: 'exa', name: 'Exa', icon: '🔍' },
];

const PromptDetail: React.FC<PromptDetailProps> = ({ onBack, prompt }) => {
  const handleCopyPrompt = () => {
    navigator.clipboard.writeText(prompt.promptText);
  };

  return (
    <div className="min-h-screen bg-background">
      <div className="mx-auto max-w-6xl px-6 py-8">
        <button
          onClick={onBack}
          className="mb-8 flex items-center text-sm text-gray-600 hover:text-gray-900"
        >
          <ArrowLeft className="mr-2 h-4 w-4" />
          Back to prompt library
        </button>

        <div className="grid grid-cols-1 gap-12 lg:grid-cols-3">
          <div className="lg:col-span-2">
            <h1 className="mb-8 text-4xl font-bold text-gray-900">{prompt.title}</h1>

            <div className="mb-8">
              <h2 className="mb-4 text-lg font-semibold text-gray-900">Create landing page copy prompt</h2>
              <div className="relative rounded-lg bg-gray-50 p-6">
                <pre className="whitespace-pre-wrap text-sm text-gray-700">{prompt.promptText}</pre>
                <button
                  onClick={handleCopyPrompt}
                  className="absolute right-4 top-4 rounded-md p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-600"
                >
                  <Copy className="h-5 w-5" />
                </button>
              </div>
            </div>

            <div className="mb-8">
              <h2 className="mb-4 text-lg font-semibold text-gray-900">Description</h2>
              <p className="text-gray-600">{prompt.description}</p>
            </div>

            <div>
              <p className="mb-4 text-sm text-gray-600">
                Already a customer? Use this prompt now!{' '}
                <a href="#" className="text-primary hover:text-primary-dark">
                  Jump into Chat →
                </a>
              </p>
            </div>
          </div>

          <div>
            <div className="mb-8">
              <h2 className="mb-2 text-sm font-semibold text-gray-900">Suited for:</h2>
              <span className="inline-flex rounded-full bg-blue-100 px-3 py-1 text-xs font-medium text-blue-800">
                {prompt.department}
              </span>
            </div>

            <div className="mb-8">
              <h2 className="mb-2 text-sm font-semibold text-gray-900">Category:</h2>
              <p className="text-sm text-gray-600">{prompt.category}</p>
            </div>

            <div className="mb-8">
              <h2 className="mb-4 text-sm font-semibold text-gray-900">Tools:</h2>
              <div className="flex flex-wrap gap-2">
                {tools.map((tool) => (
                  <div
                    key={tool.id}
                    className="flex items-center rounded-full border border-gray-200 px-3 py-1 text-sm"
                  >
                    <span className="mr-1">{tool.icon}</span>
                    {tool.name}
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default PromptDetail;

Prompts.tsx

import React, { useState } from 'react';
import { Plus, Search } from 'lucide-react';
import Button from '../components/ui/Button';
import PromptDetail from './PromptDetail';
import RequestPromptModal from '../components/RequestPromptModal';

interface Prompt {
  id: string;
  title: string;
  description: string;
  department: string;
  category: string;
  promptText: string;
}

const mockPrompts: Prompt[] = [
  {
    id: '1',
    title: 'Customer Success Plan Review',
    description: 'Review customer success plan, ensure it is on track, and help make adjustments.',
    department: 'Support',
    category: 'Customer Success',
    promptText: 'Review the customer success plan and provide recommendations for improvement. Consider the following aspects: 1) Current goals and progress 2) Key challenges 3) Resource allocation'
  },
  {
    id: '2',
    title: 'Create landing page copy',
    description: 'Writing the landing page copy for an asset can be automated with AI assistance.',
    department: 'Marketing',
    category: 'Content',
    promptText: 'Use [[Brief/transcript/draft doc URL]] to write a title, description of the asset, and three bullet points summarizing the most important learnings from the marketing asset for landing page copy.'
  },
  {
    id: '3',
    title: 'Create an outline for a presentation',
    description: 'Develop an outline for a slide presentation based on a document.',
    department: 'All teams',
    category: 'Documentation',
    promptText: 'Create a detailed presentation outline based on the provided document. Include key sections, main points, and supporting details.'
  },
  {
    id: '4',
    title: 'Integration Pathways',
    description: 'For quickly understanding integration options during customer calls.',
    department: 'Support',
    category: 'Technical',
    promptText: 'Analyze integration requirements and provide a clear pathway for implementation, including necessary steps and potential challenges.'
  },
  {
    id: '5',
    title: 'Generate feature enhancements',
    description: 'Review feature documentation and compile a list of potential improvements.',
    department: 'Engineering',
    category: 'Product',
    promptText: 'Review the feature documentation and suggest potential improvements focusing on user experience, performance, and functionality.'
  },
  {
    id: '6',
    title: 'Determine if request complies with company policy',
    description: 'Verify if a request aligns with company policies and requirements.',
    department: 'IT Operations',
    category: 'Compliance',
    promptText: 'Evaluate the request against company policies and compliance requirements. Provide a detailed analysis of compliance status.'
  }
];

const Prompts: React.FC = () => {
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedDepartment, setSelectedDepartment] = useState<string>('');
  const [selectedCategory, setSelectedCategory] = useState<string>('');
  const [selectedPrompt, setSelectedPrompt] = useState<Prompt | null>(null);
  const [isRequestModalOpen, setIsRequestModalOpen] = useState(false);

  const departments = Array.from(new Set(mockPrompts.map(p => p.department)));
  const categories = Array.from(new Set(mockPrompts.map(p => p.category)));

  const filteredPrompts = mockPrompts.filter(prompt => {
    const matchesSearch = prompt.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
                         prompt.description.toLowerCase().includes(searchQuery.toLowerCase());
    const matchesDepartment = !selectedDepartment || prompt.department === selectedDepartment;
    const matchesCategory = !selectedCategory || prompt.category === selectedCategory;
    return matchesSearch && matchesDepartment && matchesCategory;
  });

  if (selectedPrompt) {
    return (
      <PromptDetail
        prompt={selectedPrompt}
        onBack={() => setSelectedPrompt(null)}
      />
    );
  }

  return (
    <div className="flex h-full flex-col bg-background">
      <div className="bg-blue-50 px-6 py-12">
        <div className="mx-auto max-w-6xl">
          <h1 className="mb-4 text-4xl font-bold text-gray-900">Prompt Library</h1>
          <p className="mb-8 text-lg text-gray-600">
            Create and discover prompts that unlock more powerful ways to use Chat.
          </p>
          <Button
            variant="primary"
            icon={<Plus className="h-4 w-4" />}
            onClick={() => setIsRequestModalOpen(true)}
          >
            Request a prompt
          </Button>
        </div>
      </div>

      <div className="flex-1 px-6 py-8">
        <div className="mx-auto max-w-6xl">
          <div className="mb-8 flex items-center space-x-4">
            <div className="relative">
              <select
                value={selectedDepartment}
                onChange={(e) => setSelectedDepartment(e.target.value)}
                className="rounded-md border border-gray-300 bg-white px-4 py-2 pr-8 text-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
              >
                <option value="">Department</option>
                {departments.map(dept => (
                  <option key={dept} value={dept}>{dept}</option>
                ))}
              </select>
            </div>

            <div className="relative">
              <select
                value={selectedCategory}
                onChange={(e) => setSelectedCategory(e.target.value)}
                className="rounded-md border border-gray-300 bg-white px-4 py-2 pr-8 text-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
              >
                <option value="">Category</option>
                {categories.map(cat => (
                  <option key={cat} value={cat}>{cat}</option>
                ))}
              </select>
            </div>

            <div className="relative flex-1">
              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
              <input
                type="text"
                placeholder="Search prompts"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="w-full rounded-md border border-gray-300 bg-white pl-10 pr-4 py-2 text-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
              />
            </div>
          </div>

          <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-2">
            {filteredPrompts.map((prompt) => (
              <button
                key={prompt.id}
                onClick={() => setSelectedPrompt(prompt)}
                className="rounded-lg border border-gray-200 bg-white p-6 text-left transition-shadow hover:shadow-md"
              >
                <h3 className="mb-2 text-lg font-semibold text-gray-900">{prompt.title}</h3>
                <p className="mb-4 text-sm text-gray-600">{prompt.description}</p>
                <span className="inline-flex rounded-full bg-gray-100 px-3 py-1 text-xs font-medium text-gray-800">
                  {prompt.department}
                </span>
              </button>
            ))}
          </div>
        </div>
      </div>

      <RequestPromptModal
        isOpen={isRequestModalOpen}
        onClose={() => setIsRequestModalOpen(false)}
      />
    </div>
  );
};

export default Prompts;

RequestPromptModal.tsx

import React, { useState } from 'react';
import { X } from 'lucide-react';
import Button from './ui/Button';

interface RequestPromptModalProps {
  isOpen: boolean;
  onClose: () => void;
}

const RequestPromptModal: React.FC<RequestPromptModalProps> = ({ isOpen, onClose }) => {
  const [formData, setFormData] = useState({
    firstName: '',
    lastName: '',
    jobTitle: '',
    promptRequest: '',
    useCase: '',
  });

  if (!isOpen) return null;

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // Handle form submission
    console.log('Form submitted:', formData);
    onClose();
  };

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
      <div className="w-[90vw] max-w-lg rounded-xl bg-white p-6">
        <div className="mb-6 flex items-center justify-between">
          <h2 className="text-2xl font-semibold text-gray-900">Request a prompt</h2>
          <button
            onClick={onClose}
            className="rounded-md p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-600"
          >
            <X className="h-5 w-5" />
          </button>
        </div>

        <form onSubmit={handleSubmit} className="space-y-6">
          <div>
            <label className="mb-1 block text-sm font-medium text-gray-700">
              First Name
            </label>
            <input
              type="text"
              name="firstName"
              value={formData.firstName}
              onChange={handleChange}
              className="w-full rounded-md border border-gray-300 px-4 py-2 text-gray-900 focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
              required
            />
          </div>

          <div>
            <label className="mb-1 block text-sm font-medium text-gray-700">
              Last Name
            </label>
            <input
              type="text"
              name="lastName"
              value={formData.lastName}
              onChange={handleChange}
              className="w-full rounded-md border border-gray-300 px-4 py-2 text-gray-900 focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
              required
            />
          </div>

          <div>
            <label className="mb-1 block text-sm font-medium text-gray-700">
              Job Title
            </label>
            <input
              type="text"
              name="jobTitle"
              value={formData.jobTitle}
              onChange={handleChange}
              className="w-full rounded-md border border-gray-300 px-4 py-2 text-gray-900 focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
              required
            />
          </div>

          <div>
            <label className="mb-1 block text-sm font-medium text-gray-700">
              Prompt Request
            </label>
            <textarea
              name="promptRequest"
              value={formData.promptRequest}
              onChange={handleChange}
              rows={3}
              className="w-full rounded-md border border-gray-300 px-4 py-2 text-gray-900 focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
              required
            />
          </div>

          <div>
            <label className="mb-1 block text-sm font-medium text-gray-700">
              Use Case
            </label>
            <textarea
              name="useCase"
              value={formData.useCase}
              onChange={handleChange}
              rows={3}
              className="w-full rounded-md border border-gray-300 px-4 py-2 text-gray-900 focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
              required
            />
          </div>

          <div className="flex justify-end space-x-3">
            <Button variant="outline" onClick={onClose}>
              Cancel
            </Button>
            <Button variant="primary" type="submit">
              Submit
            </Button>
          </div>
        </form>
      </div>
    </div>
  );
};

export default RequestPromptModal;