@bluefly/openstandardagents 0.1.9 → 0.2.5-RC

package/website/components/docs/DocsSearch.tsx

@@ -0,0 +1,104 @@
+'use client';
+
+import { useState, useMemo } from 'react';
+import Link from 'next/link';
+
+interface SearchResult {
+  title: string;
+  href: string;
+  category: string;
+}
+
+const allDocs: SearchResult[] = [
+  { title: '5-Minute Overview', href: '/docs/getting-started/5-minute-overview', category: 'Getting Started' },
+  { title: 'Installation', href: '/docs/getting-started/installation', category: 'Getting Started' },
+  { title: 'Hello World', href: '/docs/getting-started/hello-world', category: 'Getting Started' },
+  { title: 'First Agent', href: '/docs/getting-started/first-agent', category: 'Getting Started' },
+  { title: 'For Developers', href: '/docs/for-audiences/developers', category: 'For Audiences' },
+  { title: 'For Architects', href: '/docs/for-audiences/architects', category: 'For Audiences' },
+  { title: 'For Enterprises', href: '/docs/for-audiences/enterprises', category: 'For Audiences' },
+  { title: 'For Students & Researchers', href: '/docs/for-audiences/students-researchers', category: 'For Audiences' },
+  { title: 'Migration Guides', href: '/docs/examples/migration-guides', category: 'Examples' },
+];
+
+export function DocsSearch() {
+  const [query, setQuery] = useState('');
+  const [isOpen, setIsOpen] = useState(false);
+
+  const results = useMemo(() => {
+    if (!query.trim()) {
+      return [];
+    }
+
+    const lowerQuery = query.toLowerCase();
+    return allDocs.filter(
+      (doc) =>
+        doc.title.toLowerCase().includes(lowerQuery) ||
+        doc.category.toLowerCase().includes(lowerQuery)
+    );
+  }, [query]);
+
+  return (
+    <div className="relative">
+      <div className="relative">
+        <input
+          type="search"
+          placeholder="Search documentation..."
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          onFocus={() => setIsOpen(true)}
+          onBlur={() => setTimeout(() => setIsOpen(false), 200)}
+          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
+          aria-label="Search documentation"
+          aria-describedby="search-description"
+          role="searchbox"
+        />
+        <svg
+          className="absolute right-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+          />
+        </svg>
+      </div>
+
+      {isOpen && results.length > 0 && (
+        <div
+          className="absolute z-50 w-full mt-2 bg-white border border-gray-300 rounded-lg shadow-lg max-h-96 overflow-y-auto"
+          role="listbox"
+          aria-label="Search results"
+        >
+          {results.map((result) => (
+            <Link
+              key={result.href}
+              href={result.href}
+              className="block px-4 py-3 hover:bg-gray-100 transition-colors focus:outline-none focus:ring-2 focus:ring-primary"
+              onClick={() => {
+                setQuery('');
+                setIsOpen(false);
+              }}
+              role="option"
+              aria-label={`${result.title} in ${result.category}`}
+            >
+              <div className="font-semibold text-gray-900">{result.title}</div>
+              <div className="text-sm text-gray-500">{result.category}</div>
+            </Link>
+          ))}
+        </div>
+      )}
+
+      {isOpen && query.trim() && results.length === 0 && (
+        <div className="absolute z-50 w-full mt-2 bg-white border border-gray-300 rounded-lg shadow-lg p-4">
+          <p className="text-gray-500">No results found</p>
+        </div>
+      )}
+    </div>
+  );
+}
+

package/website/components/docs/DocsSidebar.tsx

@@ -0,0 +1,155 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { useState, useEffect } from 'react';
+import { DocsSearch } from './DocsSearch';
+import { VersionSelector } from './VersionSelector';
+
+const navigation = [
+  {
+    title: 'Getting Started',
+    items: [
+      { href: '/docs/getting-started/5-minute-overview', label: '5-Minute Overview' },
+      { href: '/docs/getting-started/installation', label: 'Installation' },
+      { href: '/docs/getting-started/hello-world', label: 'Hello World' },
+      { href: '/docs/getting-started/first-agent', label: 'First Agent' },
+    ],
+  },
+  {
+    title: 'For Audiences',
+    items: [
+      { href: '/docs/for-audiences/developers', label: 'Developers' },
+      { href: '/docs/for-audiences/architects', label: 'Architects' },
+      { href: '/docs/for-audiences/enterprises', label: 'Enterprises' },
+      { href: '/docs/for-audiences/students-researchers', label: 'Students & Researchers' },
+    ],
+  },
+  {
+    title: 'Migration Guides',
+    items: [
+      { href: '/docs/migration-guides/anthropic-mcp-to-ossa', label: 'Anthropic MCP to OSSA' },
+      { href: '/docs/migration-guides/openai-to-ossa', label: 'OpenAI to OSSA' },
+      { href: '/docs/migration-guides/langchain-to-ossa', label: 'LangChain to OSSA' },
+      { href: '/docs/migration-guides/crewai-to-ossa', label: 'CrewAI to OSSA' },
+      { href: '/docs/migration-guides/langflow-to-ossa', label: 'Langflow to OSSA' },
+      { href: '/docs/migration-guides/drupal-eca-to-ossa', label: 'Drupal ECA to OSSA' },
+    ],
+  },
+  {
+    title: 'Ecosystem',
+    items: [
+      { href: '/docs/ecosystem/overview', label: 'Ecosystem Overview' },
+      { href: '/docs/ecosystem/framework-support', label: 'Framework Support' },
+    ],
+  },
+  {
+    title: 'Reference',
+    items: [
+      { href: '/docs/openapi-extensions', label: 'OpenAPI Extensions' },
+      { href: '/docs/quick-reference', label: 'Quick Reference' },
+      { href: '/docs/changelog', label: 'Changelog' },
+    ],
+  },
+  {
+    title: 'Contributing',
+    items: [
+      { href: '/docs/contributing', label: 'Contributing Guide' },
+      { href: '/docs/aiflow-framework-integration-with-ossa', label: 'AIFlow Framework Integration' },
+    ],
+  },
+];
+
+export function DocsSidebar() {
+  const pathname = usePathname();
+
+  // Calculate initial open sections based on pathname to avoid hydration mismatch
+  const getInitialOpenSections = (): string[] => {
+    const sections: string[] = ['Getting Started'];
+    const currentSection = navigation.find((section) =>
+      section.items.some((item) => item.href === pathname)
+    );
+    if (currentSection && !sections.includes(currentSection.title)) {
+      sections.push(currentSection.title);
+    }
+    return sections;
+  };
+
+  const [openSections, setOpenSections] = useState<string[]>(getInitialOpenSections);
+
+  // Update open sections when pathname changes (for client-side navigation)
+  useEffect(() => {
+    const currentSection = navigation.find((section) =>
+      section.items.some((item) => item.href === pathname)
+    );
+
+    if (currentSection) {
+      setOpenSections((prev) => {
+        // Only add if not already in the array
+        if (!prev.includes(currentSection.title)) {
+          return [...prev, currentSection.title];
+        }
+        return prev;
+      });
+    }
+  }, [pathname]);
+
+  const toggleSection = (title: string): void => {
+    setOpenSections((prev) =>
+      prev.includes(title)
+        ? prev.filter((t) => t !== title)
+        : [...prev, title]
+    );
+  };
+
+  return (
+    <aside className="w-64 bg-gray-100 border-r border-gray-300 p-4 overflow-y-auto h-screen sticky top-0">
+      <nav>
+        <Link href="/docs" className="block mb-6 font-semibold text-primary hover:text-accent">
+          Documentation
+        </Link>
+        <div className="mb-6">
+          <DocsSearch />
+        </div>
+        <div className="mb-6">
+          <VersionSelector />
+        </div>
+        {navigation.map((section) => (
+          <div key={section.title} className="mb-4">
+            <button
+              onClick={() => toggleSection(section.title)}
+              className="w-full text-left font-semibold text-gray-900 mb-2 flex items-center justify-between"
+            >
+              <span>{section.title}</span>
+              <span className="text-gray-500">
+                {openSections.includes(section.title) ? '−' : '+'}
+              </span>
+            </button>
+            {openSections.includes(section.title) && (
+              <ul className="space-y-1 ml-2">
+                {section.items.map((item) => {
+                  const isActive = pathname === item.href;
+                  return (
+                    <li key={item.href}>
+                      <Link
+                        href={item.href}
+                        className={`block px-2 py-1 rounded text-sm transition-colors ${
+                          isActive
+                            ? 'bg-primary text-white'
+                            : 'text-gray-700 hover:bg-gray-200'
+                        }`}
+                      >
+                        {item.label}
+                      </Link>
+                    </li>
+                  );
+                })}
+              </ul>
+            )}
+          </div>
+        ))}
+      </nav>
+    </aside>
+  );
+}
+

package/website/components/docs/MarkdownContent.tsx

@@ -0,0 +1,401 @@
+'use client';
+
+import React, { useEffect } from 'react';
+import ReactMarkdown from 'react-markdown';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+import remarkGfm from 'remark-gfm';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+interface MarkdownContentProps {
+  content: string;
+  currentPath?: string; // Current pathname for resolving relative links
+}
+
+// Helper function to generate ID from heading text
+function generateId(text: string): string {
+  // Extract ID from {#id} syntax if present
+  const idMatch = text.match(/\{#([^}]+)\}/);
+  if (idMatch) {
+    return idMatch[1];
+  }
+  // Otherwise generate from text
+  return text
+    .toString()
+    .toLowerCase()
+    .replace(/[^\w\s-]/g, '')
+    .replace(/\s+/g, '-')
+    .replace(/-+/g, '-')
+    .trim();
+}
+
+// Helper function to clean heading text (remove {#id} syntax)
+function cleanHeadingText(text: string): string {
+  return text.replace(/\s*\{#[^}]+\}\s*$/, '').trim();
+}
+
+// Helper function to fix markdown bold syntax with spaces
+function fixMarkdownBold(content: string): string {
+  // Fix patterns like "** text**" or "**text **" to "**text**"
+  // Also handle cases where ** is at the start of a line or after a heading
+  return content
+    // Fix "** text" patterns (space after opening **)
+    .replace(/\*\* +([^*]+?)\*\*/g, '**$1**')
+    // Fix "text **" patterns (space before closing **)
+    .replace(/\*\*([^*]+?) +\*\*/g, '**$1**')
+    // Fix "** text **" patterns (spaces on both sides)
+    .replace(/\*\* +([^*]+?) +\*\*/g, '**$1**');
+}
+
+// Helper function to resolve relative markdown links to Next.js routes
+function resolveMarkdownLink(href: string, currentPath: string): string {
+  // Already absolute or external
+  if (href.startsWith('/') || href.startsWith('http') || href.startsWith('#')) {
+    return href;
+  }
+
+  // Split anchor from path
+  const [pathPart, anchor] = href.split('#');
+  const anchorPart = anchor ? `#${anchor}` : '';
+
+  // Remove .md extension
+  let normalized = pathPart.replace(/\.md$/, '');
+
+  // Handle relative paths starting with ./
+  if (normalized.startsWith('./')) {
+    normalized = normalized.slice(2);
+  }
+
+  // Convert PascalCase/CamelCase to kebab-case
+  normalized = normalized
+    .replace(/([a-z])([A-Z])/g, '$1-$2') // Insert dash before capital letters
+    .toLowerCase()
+    .replace(/[^a-z0-9/-]/g, '-') // Replace non-alphanumeric with dash
+    .replace(/-+/g, '-') // Collapse multiple dashes
+    .replace(/^-|-$/g, ''); // Remove leading/trailing dashes
+
+  // If currentPath is provided, resolve relative to it
+  if (currentPath && !normalized.startsWith('/')) {
+    // Get the directory of the current page
+    const pathParts = currentPath.split('/').filter(Boolean);
+    // Remove the last part (current file) to get directory
+    const currentDir = pathParts.slice(0, -1);
+
+    // Handle parent directory references (../)
+    if (normalized.startsWith('../')) {
+      const upLevels = (normalized.match(/\.\.\//g) || []).length;
+      normalized = normalized.replace(/\.\.\//g, '');
+      const newDir = currentDir.slice(0, -upLevels);
+      return `/docs/${newDir.join('/')}/${normalized}${anchorPart}`;
+    }
+
+    // Same directory or subdirectory
+    if (currentDir.length > 0) {
+      return `/docs/${currentDir.join('/')}/${normalized}${anchorPart}`;
+    }
+    return `/docs/${normalized}${anchorPart}`;
+  }
+
+  // Default to /docs/ prefix if no current path
+  return `/docs/${normalized}${anchorPart}`;
+}
+
+export function MarkdownContent({ content, currentPath }: MarkdownContentProps) {
+  const pathname = usePathname();
+  const basePath = currentPath || pathname;
+
+  // Handle anchor link scrolling on mount and hash changes
+  useEffect(() => {
+    const handleHashChange = () => {
+      const hash = window.location.hash.slice(1);
+      if (hash) {
+        setTimeout(() => {
+          const element = document.getElementById(hash);
+          if (element) {
+            element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+            // Offset for sticky header
+            window.scrollBy(0, -80);
+          }
+        }, 100);
+      }
+    };
+
+    handleHashChange();
+    window.addEventListener('hashchange', handleHashChange);
+    return () => window.removeEventListener('hashchange', handleHashChange);
+  }, [pathname]);
+
+  // Fix markdown bold syntax issues
+  const fixedContent = fixMarkdownBold(content);
+
+  return (
+    <div className="markdown-content [&_pre_code]:bg-transparent [&_pre_code]:text-code-text">
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        components={{
+          // Headings with IDs
+          h1: ({ children }) => {
+            const text = React.Children.toArray(children).join('');
+            const id = generateId(text);
+            const cleanText = cleanHeadingText(text);
+            return (
+              <h1
+                id={id}
+                className="text-3xl md:text-4xl font-bold text-gray-900 mt-8 mb-4 pb-2 border-b border-gray-200 scroll-mt-20"
+              >
+                {cleanText}
+              </h1>
+            );
+          },
+          h2: ({ children }) => {
+            const text = React.Children.toArray(children).join('');
+            const id = generateId(text);
+            const cleanText = cleanHeadingText(text);
+            return (
+              <h2
+                id={id}
+                className="text-2xl md:text-3xl font-semibold text-gray-900 mt-8 mb-4 scroll-mt-20"
+              >
+                {cleanText}
+              </h2>
+            );
+          },
+          h3: ({ children }) => {
+            const text = React.Children.toArray(children).join('');
+            const id = generateId(text);
+            const cleanText = cleanHeadingText(text);
+            return (
+              <h3
+                id={id}
+                className="text-xl md:text-2xl font-semibold text-gray-900 mt-6 mb-3 scroll-mt-20"
+              >
+                {cleanText}
+              </h3>
+            );
+          },
+          h4: ({ children }) => {
+            const text = React.Children.toArray(children).join('');
+            const id = generateId(text);
+            const cleanText = cleanHeadingText(text);
+            return (
+              <h4
+                id={id}
+                className="text-lg md:text-xl font-semibold text-gray-900 mt-4 mb-2 scroll-mt-20"
+              >
+                {cleanText}
+              </h4>
+            );
+          },
+
+          // Paragraphs
+          p: ({ children }) => (
+            <p className="text-gray-700 leading-7 mb-4">
+              {children}
+            </p>
+          ),
+
+          // Links - handle anchor links and internal/external links
+          a: ({ href, children }) => {
+            if (!href) return <>{children}</>;
+
+            // Handle anchor links (starting with #)
+            if (href.startsWith('#')) {
+              return (
+                <a
+                  href={href}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    const id = href.slice(1);
+                    const element = document.getElementById(id);
+                    if (element) {
+                      element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                      // Offset for sticky header
+                      window.scrollBy(0, -80);
+                      // Update URL without scrolling
+                      window.history.pushState(null, '', `${pathname}${href}`);
+                    }
+                  }}
+                  className="text-primary hover:text-accent underline"
+                >
+                  {children}
+                </a>
+              );
+            }
+
+            // Handle external links
+            if (href.startsWith('http')) {
+              return (
+                <a
+                  href={href}
+                  className="text-primary hover:text-accent underline"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {children}
+                </a>
+              );
+            }
+
+            // Resolve relative markdown links to Next.js routes
+            const resolvedHref = resolveMarkdownLink(href, basePath);
+
+            // Handle internal links
+            return (
+              <Link
+                href={resolvedHref}
+                className="text-primary hover:text-primary-dark underline"
+              >
+                {children}
+              </Link>
+            );
+          },
+
+          // Lists - Tighter spacing for technical documentation
+          ul: ({ children }) => (
+            <ul className="list-disc list-outside mb-3 ml-5 space-y-1 text-gray-700 text-base">
+              {children}
+            </ul>
+          ),
+          ol: ({ children }) => (
+            <ol className="list-decimal list-outside mb-3 ml-5 space-y-1 text-gray-700 text-base">
+              {children}
+            </ol>
+          ),
+          li: ({ children }) => (
+            <li className="leading-relaxed pl-1">
+              {children}
+            </li>
+          ),
+
+          // Blockquotes
+          blockquote: ({ children }) => (
+            <blockquote className="border-l-4 border-blue-500 pl-4 py-2 my-4 bg-blue-50 text-gray-700 italic">
+              {children}
+            </blockquote>
+          ),
+
+          // Tables
+          table: ({ children }) => (
+            <div className="overflow-x-auto my-6">
+              <table className="min-w-full divide-y divide-gray-200 border border-gray-200 rounded-lg">
+                {children}
+              </table>
+            </div>
+          ),
+          thead: ({ children }) => (
+            <thead className="bg-gray-50">
+              {children}
+            </thead>
+          ),
+          th: ({ children }) => (
+            <th className="px-4 py-3 text-left text-sm font-semibold text-gray-900 border-b">
+              {children}
+            </th>
+          ),
+          td: ({ children }) => (
+            <td className="px-4 py-3 text-sm text-gray-700 border-b border-gray-100">
+              {children}
+            </td>
+          ),
+          tr: ({ children }) => (
+            <tr className="hover:bg-gray-50">
+              {children}
+            </tr>
+          ),
+
+          // Code
+          code({ className, children, ...props }: any) {
+            const match = /language-(\w+)/.exec(className || '');
+            const isInline = !match;
+
+            // Check if this code is inside a pre tag (block code)
+            const isBlockCode = (props.node?.parent as any)?.tagName === 'pre';
+
+            if (match) {
+              return (
+                <div className="my-4 rounded-lg overflow-hidden overflow-x-auto">
+                  <SyntaxHighlighter
+                    style={vscDarkPlus as any}
+                    language={match[1]}
+                    PreTag="div"
+                    customStyle={{
+                      margin: 0,
+                      borderRadius: '0.5rem',
+                      fontSize: '0.875rem',
+                      backgroundColor: '#1e1e1e',
+                      color: '#d4d4d4',
+                    }}
+                  >
+                    {String(children).replace(/\n$/, '')}
+                  </SyntaxHighlighter>
+                </div>
+              );
+            }
+
+            // If it's a block code (inside pre), use dark background - no light background
+            if (isBlockCode) {
+              return (
+                <code className="bg-transparent text-code-text text-sm font-mono whitespace-pre">
+                  {children}
+                </code>
+              );
+            }
+
+            // Inline code
+            return (
+              <code className="bg-gray-100 text-primary px-1.5 py-0.5 rounded text-sm font-mono">
+                {children}
+              </code>
+            );
+          },
+
+          // Pre (for code blocks without language)
+          pre: ({ children }) => {
+            // Check if children contain a code element
+            const hasCode = React.Children.toArray(children).some(
+              (child: any) => child?.type === 'code' || child?.props?.node?.tagName === 'code'
+            );
+
+            return (
+              <pre className="bg-code-bg text-code-text p-4 rounded-lg overflow-x-auto my-4 text-sm font-mono">
+                {children}
+              </pre>
+            );
+          },
+
+          // Horizontal rule
+          hr: () => (
+            <hr className="my-8 border-t border-gray-200" />
+          ),
+
+          // Strong/Bold
+          strong: ({ children }) => (
+            <strong className="font-semibold text-gray-900">
+              {children}
+            </strong>
+          ),
+
+          // Emphasis/Italic
+          em: ({ children }) => (
+            <em className="italic">
+              {children}
+            </em>
+          ),
+
+          // Images
+          img: ({ src, alt }) => (
+            <img
+              src={src}
+              alt={alt || ''}
+              className="max-w-full h-auto rounded-lg my-4 shadow-sm"
+            />
+          ),
+        }}
+      >
+        {content}
+      </ReactMarkdown>
+    </div>
+  );
+}
+