create-manifest 1.3.4 → 2.0.1

package/starter/src/web/PokemonList.tsx

@@ -0,0 +1,126 @@
+import { useEffect, useState } from 'react'
+import { BlogPostList } from '@/components/blog-post-list'
+import type { BlogPost } from '@/components/blog-post-card'
+import { PaymentMethods } from './components/payment-methods'
+
+interface Pokemon {
+  id: number
+  name: string
+  image: string
+  types: string[]
+  height: number
+  weight: number
+}
+
+interface StructuredContent {
+  pokemons: Pokemon[]
+}
+
+function pokemonToBlogPost(pokemon: Pokemon): BlogPost {
+  const capitalizedName =
+    pokemon.name.charAt(0).toUpperCase() + pokemon.name.slice(1)
+
+  return {
+    id: String(pokemon.id),
+    title: capitalizedName,
+    excerpt: `Height: ${pokemon.height / 10}m | Weight: ${pokemon.weight / 10}kg`,
+    coverImage: pokemon.image,
+    author: {
+      name: `#${String(pokemon.id).padStart(3, '0')}`,
+      avatar: pokemon.image
+    },
+    publishedAt: new Date().toISOString(),
+    readTime: pokemon.types.join(', '),
+    tags: pokemon.types.map((t) => t.charAt(0).toUpperCase() + t.slice(1)),
+    category: pokemon.types[0]
+      ? pokemon.types[0].charAt(0).toUpperCase() + pokemon.types[0].slice(1)
+      : 'Normal'
+  }
+}
+
+export default function PokemonList() {
+  const [posts, setPosts] = useState<BlogPost[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    console.log('window.openai:', window.openai)
+    console.log('structuredContent:', window.openai?.content?.structuredContent)
+
+    // Get structured content from OpenAI
+    if (window.openai?.content?.structuredContent) {
+      const content = window.openai.content
+        .structuredContent as StructuredContent
+      console.log(
+        'Using structuredContent, pokemons count:',
+        content.pokemons?.length
+      )
+      if (content.pokemons) {
+        setPosts(content.pokemons.map(pokemonToBlogPost))
+      }
+      setLoading(false)
+    } else {
+      // Fallback: fetch directly if not in OpenAI context
+      console.log('No structuredContent, falling back to direct fetch')
+      fetchPokemons()
+    }
+  }, [])
+
+  async function fetchPokemons() {
+    try {
+      const response = await fetch('https://pokeapi.co/api/v2/pokemon?limit=12')
+      const data = await response.json()
+
+      const pokemons = await Promise.all(
+        data.results.map(async (pokemon: { name: string; url: string }) => {
+          const detailResponse = await fetch(pokemon.url)
+          const detail = await detailResponse.json()
+
+          return {
+            id: detail.id,
+            name: detail.name,
+            image:
+              detail.sprites.other['official-artwork'].front_default ||
+              detail.sprites.front_default,
+            types: detail.types.map(
+              (t: { type: { name: string } }) => t.type.name
+            ),
+            height: detail.height,
+            weight: detail.weight
+          }
+        })
+      )
+
+      setPosts(pokemons.map(pokemonToBlogPost))
+    } catch (error) {
+      console.error('Failed to fetch Pokemon:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleReadMore = (post: BlogPost) => {
+    const pokemonName = post.title.toLowerCase()
+    window.openai?.sendFollowUpMessage?.(`Tell me more about ${pokemonName}`)
+  }
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center p-8">
+        <div className="text-muted-foreground">Loading Pokemon...</div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="p-4">
+      <PaymentMethods />
+      <BlogPostList
+        posts={posts}
+        variant="carousel"
+        showAuthor={true}
+        showCategory={true}
+        onReadMore={handleReadMore}
+      />
+    </div>
+  )
+}

package/starter/src/web/components/blog-post-card.tsx

@@ -0,0 +1,288 @@
+'use client'
+
+import { Button } from '@/components/ui/button'
+import { ArrowRight } from 'lucide-react'
+
+export interface BlogPost {
+  id: string
+  title: string
+  excerpt: string
+  coverImage?: string
+  author: {
+    name: string
+    avatar?: string
+  }
+  publishedAt: string
+  readTime?: string
+  tags?: string[]
+  category?: string
+}
+
+const defaultPost: BlogPost = {
+  id: '1',
+  title: 'Getting Started with Agentic UI Components',
+  excerpt:
+    'Learn how to build conversational interfaces with our comprehensive component library designed for AI-powered applications.',
+  coverImage:
+    'https://images.unsplash.com/photo-1633356122544-f134324a6cee?w=800',
+  author: {
+    name: 'Sarah Chen',
+    avatar: 'https://i.pravatar.cc/150?u=sarah'
+  },
+  publishedAt: '2024-01-15',
+  readTime: '5 min read',
+  tags: ['Tutorial', 'Components'],
+  category: 'Tutorial'
+}
+
+export interface BlogPostCardProps {
+  post?: BlogPost
+  variant?: 'default' | 'compact' | 'horizontal' | 'covered'
+  showImage?: boolean
+  showAuthor?: boolean
+  showCategory?: boolean
+  onReadMore?: (post: BlogPost) => void
+}
+
+export function BlogPostCard({
+  post = defaultPost,
+  variant = 'default',
+  showImage = true,
+  showAuthor = true,
+  showCategory = true,
+  onReadMore
+}: BlogPostCardProps) {
+  const formatDate = (dateStr: string) => {
+    return new Date(dateStr).toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric'
+    })
+  }
+
+  if (variant === 'covered') {
+    return (
+      <div className="relative overflow-hidden rounded-lg">
+        <div className="min-h-[320px] sm:aspect-[16/9] sm:min-h-0 w-full">
+          {post.coverImage ? (
+            <img
+              src={post.coverImage}
+              alt={post.title}
+              className="absolute inset-0 h-full w-full object-cover"
+            />
+          ) : (
+            <div className="absolute inset-0 h-full w-full bg-muted" />
+          )}
+        </div>
+        <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-black/20" />
+        <div className="absolute inset-0 flex flex-col justify-between p-4 text-white">
+          <div className="flex gap-1">
+            {showCategory && post.category && (
+              <span className="rounded-full bg-white/20 px-2 py-0.5 text-xs backdrop-blur-sm">
+                {post.category}
+              </span>
+            )}
+            {post.tags &&
+              post.tags.slice(0, 1).map((tag) => (
+                <span
+                  key={tag}
+                  className="rounded-full bg-white/20 px-2 py-0.5 text-xs backdrop-blur-sm"
+                >
+                  {tag}
+                </span>
+              ))}
+          </div>
+          <div>
+            <h2 className="text-lg font-bold leading-tight">{post.title}</h2>
+            <p className="mt-1 line-clamp-2 text-sm text-white/80">
+              {post.excerpt}
+            </p>
+            <div className="mt-3 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+              {showAuthor && (
+                <div className="flex items-center gap-2">
+                  {post.author.avatar && (
+                    <img
+                      src={post.author.avatar}
+                      alt={post.author.name}
+                      className="h-6 w-6 rounded-full ring-2 ring-white/30"
+                    />
+                  )}
+                  <div className="text-xs">
+                    <p className="font-medium">{post.author.name}</p>
+                    <p className="text-white/60">
+                      {formatDate(post.publishedAt)}
+                    </p>
+                  </div>
+                </div>
+              )}
+              <Button
+                size="sm"
+                variant="secondary"
+                className="w-full sm:w-auto"
+                onClick={() => onReadMore?.(post)}
+              >
+                Read article
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  if (variant === 'horizontal') {
+    return (
+      <div className="test flex flex-col sm:flex-row gap-4 rounded-lg border bg-card p-3 transition-colors hover:bg-muted/50">
+        {showImage && post.coverImage && (
+          <div className="aspect-video sm:aspect-square sm:h-24 sm:w-24 shrink-0 overflow-hidden rounded-md">
+            <img
+              src={post.coverImage}
+              alt={post.title}
+              className="h-full w-full object-cover"
+            />
+          </div>
+        )}
+        <div className="flex flex-1 flex-col justify-between">
+          <div>
+            {showCategory && post.category && (
+              <span className="mb-1 inline-block rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
+                {post.category}
+              </span>
+            )}
+            <h3 className="line-clamp-2 text-sm font-medium leading-tight">
+              {post.title}
+            </h3>
+            <p className="mt-1 line-clamp-2 text-xs text-muted-foreground">
+              {post.excerpt}
+            </p>
+          </div>
+          <div className="mt-3 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+            <div className="flex items-center gap-2 text-xs text-muted-foreground">
+              {showAuthor && post.author.avatar && (
+                <img
+                  src={post.author.avatar}
+                  alt={post.author.name}
+                  className="h-4 w-4 rounded-full"
+                />
+              )}
+              <span>{formatDate(post.publishedAt)}</span>
+              {post.readTime && (
+                <>
+                  <span>·</span>
+                  <span>{post.readTime}</span>
+                </>
+              )}
+            </div>
+            <Button
+              size="sm"
+              className="w-full sm:w-auto"
+              onClick={() => onReadMore?.(post)}
+            >
+              Read
+              <ArrowRight className="ml-1 h-3 w-3" />
+            </Button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  if (variant === 'compact') {
+    return (
+      <div className="flex h-full flex-col justify-between rounded-lg border bg-card p-3 transition-colors hover:bg-muted/50">
+        <div>
+          {showCategory && post.category && (
+            <span className="mb-2 inline-block rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
+              {post.category}
+            </span>
+          )}
+          <h3 className="line-clamp-2 text-sm font-medium">{post.title}</h3>
+          <p className="mt-1 line-clamp-2 text-xs text-muted-foreground">
+            {post.excerpt}
+          </p>
+        </div>
+        <div className="mt-3 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+          <div className="flex items-center gap-2">
+            {showAuthor && post.author.avatar && (
+              <img
+                src={post.author.avatar}
+                alt={post.author.name}
+                className="h-5 w-5 rounded-full"
+              />
+            )}
+            <span className="text-xs text-muted-foreground">
+              {formatDate(post.publishedAt)}
+            </span>
+          </div>
+          <Button size="sm" onClick={() => onReadMore?.(post)}>
+            Read more
+            <ArrowRight className="ml-1 h-3 w-3" />
+          </Button>
+        </div>
+      </div>
+    )
+  }
+
+  // Default variant
+  return (
+    <div className="flex h-full flex-col overflow-hidden rounded-lg border bg-card transition-colors hover:bg-muted/50">
+      {showImage && post.coverImage && (
+        <div className="aspect-video overflow-hidden">
+          <img
+            src={post.coverImage}
+            alt={post.title}
+            className="h-full w-full object-cover transition-transform hover:scale-105"
+          />
+        </div>
+      )}
+      <div className="flex flex-1 flex-col justify-between p-4">
+        <div>
+          <div className="mb-2 flex flex-wrap items-center gap-2">
+            {showCategory && post.category && (
+              <span className="rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
+                {post.category}
+              </span>
+            )}
+            {post.tags &&
+              post.tags.length > 0 &&
+              post.tags.slice(0, 2).map((tag) => (
+                <span
+                  key={tag}
+                  className="rounded-full bg-muted px-2 py-0.5 text-xs text-muted-foreground"
+                >
+                  {tag}
+                </span>
+              ))}
+          </div>
+          <h3 className="line-clamp-2 font-medium">{post.title}</h3>
+          <p className="mt-2 line-clamp-2 text-sm text-muted-foreground">
+            {post.excerpt}
+          </p>
+        </div>
+        <div className="mt-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+          {showAuthor && (
+            <div className="flex items-center gap-2">
+              {post.author.avatar && (
+                <img
+                  src={post.author.avatar}
+                  alt={post.author.name}
+                  className="h-6 w-6 rounded-full"
+                />
+              )}
+              <div className="text-xs">
+                <p className="font-medium">{post.author.name}</p>
+                <p className="text-muted-foreground">
+                  {formatDate(post.publishedAt)}
+                </p>
+              </div>
+            </div>
+          )}
+          <Button size="sm" onClick={() => onReadMore?.(post)}>
+            Read
+            <ArrowRight className="ml-1 h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/starter/src/web/components/blog-post-list.tsx

@@ -0,0 +1,291 @@
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+import { useState } from 'react'
+import { BlogPost, BlogPostCard } from './blog-post-card'
+
+const defaultPosts: BlogPost[] = [
+  {
+    id: '1',
+    title: 'Getting Started with Agentic UI Components',
+    excerpt:
+      'Learn how to build conversational interfaces with our comprehensive component library designed for AI-powered applications.',
+    coverImage:
+      'https://images.unsplash.com/photo-1633356122544-f134324a6cee?w=800',
+    author: {
+      name: 'Sarah Chen',
+      avatar: 'https://i.pravatar.cc/150?u=sarah'
+    },
+    publishedAt: '2024-01-15',
+    readTime: '5 min read',
+    tags: ['Tutorial', 'Components', 'AI'],
+    category: 'Tutorial'
+  },
+  {
+    id: '2',
+    title: 'Designing for Conversational Interfaces',
+    excerpt:
+      'Best practices for creating intuitive UI components that work within chat environments.',
+    coverImage:
+      'https://images.unsplash.com/photo-1559028012-481c04fa702d?w=800',
+    author: {
+      name: 'Alex Rivera',
+      avatar: 'https://i.pravatar.cc/150?u=alex'
+    },
+    publishedAt: '2024-01-12',
+    readTime: '8 min read',
+    tags: ['Design', 'UX'],
+    category: 'Design'
+  },
+  {
+    id: '3',
+    title: 'MCP Integration Patterns',
+    excerpt:
+      'How to leverage Model Context Protocol for seamless backend communication in your agentic applications.',
+    coverImage:
+      'https://images.unsplash.com/photo-1558494949-ef010cbdcc31?w=800',
+    author: {
+      name: 'Jordan Kim',
+      avatar: 'https://i.pravatar.cc/150?u=jordan'
+    },
+    publishedAt: '2024-01-10',
+    readTime: '12 min read',
+    tags: ['MCP', 'Backend', 'Integration'],
+    category: 'Development'
+  },
+  {
+    id: '4',
+    title: 'Building Payment Flows in Chat',
+    excerpt:
+      'A complete guide to implementing secure, user-friendly payment experiences within conversational interfaces.',
+    coverImage:
+      'https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=800',
+    author: {
+      name: 'Morgan Lee',
+      avatar: 'https://i.pravatar.cc/150?u=morgan'
+    },
+    publishedAt: '2024-01-08',
+    readTime: '10 min read',
+    tags: ['Payments', 'Security'],
+    category: 'Tutorial'
+  }
+]
+
+export interface BlogPostListProps {
+  posts?: BlogPost[]
+  variant?: 'list' | 'grid' | 'carousel'
+  columns?: 2 | 3
+  showAuthor?: boolean
+  showCategory?: boolean
+  onReadMore?: (post: BlogPost) => void
+}
+
+export function BlogPostList({
+  posts = defaultPosts,
+  variant = 'list',
+  columns = 2,
+  showAuthor = true,
+  showCategory = true,
+  onReadMore
+}: BlogPostListProps) {
+  const [currentIndex, setCurrentIndex] = useState(0)
+
+  // List variant
+  if (variant === 'list') {
+    return (
+      <div className="space-y-3">
+        {posts.slice(0, 3).map((post) => (
+          <BlogPostCard
+            key={post.id}
+            post={post}
+            variant="horizontal"
+            showAuthor={showAuthor}
+            showCategory={showCategory}
+            onReadMore={onReadMore}
+          />
+        ))}
+      </div>
+    )
+  }
+
+  // Grid variant
+  if (variant === 'grid') {
+    return (
+      <div
+        className={cn(
+          'grid gap-4 grid-cols-1',
+          columns === 2 ? 'sm:grid-cols-2' : 'sm:grid-cols-3'
+        )}
+      >
+        {posts.map((post) => (
+          <BlogPostCard
+            key={post.id}
+            post={post}
+            variant="compact"
+            showImage={false}
+            showAuthor={showAuthor}
+            showCategory={showCategory}
+            onReadMore={onReadMore}
+          />
+        ))}
+      </div>
+    )
+  }
+
+  // Carousel variant
+  const maxIndexMobile = posts.length - 1
+  const maxIndexTablet = Math.max(0, posts.length - 2)
+  const maxIndexDesktop = Math.max(0, posts.length - 3)
+
+  const prev = () => {
+    setCurrentIndex((i) => Math.max(0, i - 1))
+  }
+
+  const next = () => {
+    setCurrentIndex((i) => i + 1)
+  }
+
+  const isAtStart = currentIndex === 0
+  const isAtEndMobile = currentIndex >= maxIndexMobile
+  const isAtEndTablet = currentIndex >= maxIndexTablet
+  const isAtEndDesktop = currentIndex >= maxIndexDesktop
+
+  return (
+    <div className="relative">
+      <div className="overflow-hidden rounded-lg">
+        {/* Mobile: 1 card, slides by 100% */}
+        <div
+          className="flex transition-transform duration-300 ease-out md:hidden"
+          style={{ transform: `translateX(-${currentIndex * 100}%)` }}
+        >
+          {posts.map((post) => (
+            <div key={post.id} className="w-full shrink-0 px-0.5">
+              <BlogPostCard
+                post={post}
+                variant="compact"
+                showAuthor={showAuthor}
+                showCategory={showCategory}
+                onReadMore={onReadMore}
+              />
+            </div>
+          ))}
+        </div>
+
+        {/* Tablet: 2 cards visible, slides by 50% */}
+        <div
+          className="hidden md:flex lg:hidden transition-transform duration-300 ease-out"
+          style={{ transform: `translateX(-${currentIndex * 50}%)` }}
+        >
+          {posts.map((post) => (
+            <div key={post.id} className="w-1/2 shrink-0 px-1.5">
+              <BlogPostCard
+                post={post}
+                variant="compact"
+                showAuthor={showAuthor}
+                showCategory={showCategory}
+                onReadMore={onReadMore}
+              />
+            </div>
+          ))}
+        </div>
+
+        {/* Desktop: 3 cards visible, slides by 33.333% */}
+        <div
+          className="hidden lg:flex transition-transform duration-300 ease-out"
+          style={{ transform: `translateX(-${currentIndex * (100 / 3)}%)` }}
+        >
+          {posts.map((post) => (
+            <div key={post.id} className="w-1/3 shrink-0 px-1.5">
+              <BlogPostCard
+                post={post}
+                variant="compact"
+                showAuthor={showAuthor}
+                showCategory={showCategory}
+                onReadMore={onReadMore}
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+      <div className="mt-3 flex items-center justify-between px-2">
+        <div className="flex gap-1">
+          {posts.map((_, i) => (
+            <button
+              key={i}
+              onClick={() => setCurrentIndex(i)}
+              className={cn(
+                'h-1.5 rounded-full transition-all',
+                i === currentIndex
+                  ? 'w-4 bg-foreground'
+                  : 'w-1.5 bg-muted-foreground/30'
+              )}
+            />
+          ))}
+        </div>
+        {/* Mobile navigation */}
+        <div className="flex gap-1 md:hidden">
+          <Button
+            variant="outline"
+            size="icon"
+            className="h-8 w-8"
+            onClick={prev}
+            disabled={isAtStart}
+          >
+            <ChevronLeft className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            className="h-8 w-8"
+            onClick={next}
+            disabled={isAtEndMobile}
+          >
+            <ChevronRight className="h-4 w-4" />
+          </Button>
+        </div>
+        {/* Tablet navigation */}
+        <div className="hidden md:flex lg:hidden gap-1">
+          <Button
+            variant="outline"
+            size="icon"
+            className="h-8 w-8"
+            onClick={prev}
+            disabled={isAtStart}
+          >
+            <ChevronLeft className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            className="h-8 w-8"
+            onClick={next}
+            disabled={isAtEndTablet}
+          >
+            <ChevronRight className="h-4 w-4" />
+          </Button>
+        </div>
+        {/* Desktop navigation */}
+        <div className="hidden lg:flex gap-1">
+          <Button
+            variant="outline"
+            size="icon"
+            className="h-8 w-8"
+            onClick={prev}
+            disabled={isAtStart}
+          >
+            <ChevronLeft className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            className="h-8 w-8"
+            onClick={next}
+            disabled={isAtEndDesktop}
+          >
+            <ChevronRight className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}