Generative UI

// app/genui/tools.ts
import { tool } from 'ai';
import { z } from 'zod';
import { orderService } from './orders'; // sizin servis katmanınız

export const tools = {
  getOrderStatus: tool({
    description: 'Bir siparişin kargo durumunu kart olarak gösterir.',
    inputSchema: z.object({
      orderId: z.string().describe('Sipariş numarası, örn. TR-1042'),
    }),
    outputSchema: z.object({
      orderId: z.string(),
      status: z.enum(['hazirlaniyor', 'kargoda', 'teslim-edildi']),
      eta: z.string().nullable(),
    }),
    execute: ({ orderId }) => orderService.getStatus(orderId),
  }),
};

// app/genui/components.tsx
import { Component, type ReactNode } from 'react';
import type { Order } from './orders';

const STATUS: Record<Order['status'], string> = {
  hazirlaniyor: 'Hazırlanıyor',
  kargoda: 'Kargoda',
  'teslim-edildi': 'Teslim edildi',
};

export function OrderCard({ orderId, status, eta }: Order) {
  return (
    <div data-ui="order-card">
      <strong>{orderId}</strong> · {STATUS[status].toUpperCase()}
      {eta && <span> · tahmini teslimat {eta}</span>}
    </div>
  );
}

export function OrderCardSkeleton({ orderId }: { orderId?: string }) {
  return (
    <div data-ui="skeleton" aria-busy="true">
      {orderId ? `${orderId} sorgulanıyor…` : 'Sipariş sorgulanıyor…'}
    </div>
  );
}

export function ToolError({ children }: { children: ReactNode }) {
  return (
    <div data-ui="tool-error" role="alert">
      {children}
    </div>
  );
}

// Bileşen beklenmedik bir çıktıyla çökerse yalnızca o kart düşer, sohbet çalışmaya devam eder.
export class ToolBoundary extends Component<{ children: ReactNode }, { failed: boolean }> {
  state = { failed: false };
  static getDerivedStateFromError() {
    return { failed: true };
  }
  componentDidCatch(error: unknown) {
    console.error('[ToolBoundary]', error);
  }
  render() {
    return this.state.failed ? <ToolError>Bu sonuç gösterilemiyor.</ToolError> : this.props.children;
  }
}

// app/genui/types.ts
import type { InferUITools, UIMessage } from 'ai';
import type { tools } from './tools';

export type GenMessage = UIMessage<never, never, InferUITools<typeof tools>>;

// app/genui/message-parts.tsx
import { getToolName, isToolUIPart } from 'ai';
import { OrderCard, OrderCardSkeleton, ToolBoundary, ToolError } from './components';
import type { GenMessage } from './types';

export function MessageParts({ message, live }: { message: GenMessage; live: boolean }) {
  return (
    <>
      {message.parts.map((part, i) => {
        switch (part.type) {
          case 'text':
            return <p key={i}>{part.text}</p>;

          case 'tool-getOrderStatus':
            switch (part.state) {
              case 'input-streaming':
              case 'input-available':
                // Akış kesilirse (ör. stop) bu durumlar sonsuza dek kalır.
                return live ? (
                  <OrderCardSkeleton key={i} orderId={part.input?.orderId} />
                ) : (
                  <ToolError key={i}>Sorgu tamamlanamadı.</ToolError>
                );
              case 'output-available':
                return (
                  <ToolBoundary key={i}>
                    <OrderCard {...part.output} />
                  </ToolBoundary>
                );
              case 'output-error':
                return <ToolError key={i}>Sipariş bilgisi alınamadı.</ToolError>;
              default:
                return null;
            }

          default:
            // Bu istemcinin tanımadığı araçlar sessizce kaybolmasın.
            return isToolUIPart(part) ? (
              <pre key={i} data-ui="unknown-tool">
                {getToolName(part)}
              </pre>
            ) : null;
        }
      })}
    </>
  );
}

trackShipment: tool({
  description: 'Kargo hareketlerini adım adım getirir.',
  inputSchema: z.object({ orderId: z.string() }),
  outputSchema: z.object({ stage: z.enum(['carrier', 'done']), message: z.string() }),
  async *execute({ orderId }) {
    yield { stage: 'carrier' as const, message: 'Kargo firması sorgulanıyor…' };
    const order = await orderService.getStatus(orderId);
    yield { stage: 'done' as const, message: `${order.orderId}: ${order.status}` };
  },
}),

case 'tool-trackShipment':
  if (part.state === 'output-available') {
    return (
      <p key={i} data-preliminary={String(part.preliminary === true)}>
        {part.output.message}
      </p>
    );
  }
  return part.state === 'output-error' ? (
    <ToolError key={i}>Kargo hareketleri alınamadı.</ToolError>
  ) : live ? (
    <OrderCardSkeleton key={i} />
  ) : (
    <ToolError key={i}>Sorgu tamamlanamadı.</ToolError>
  );

// app/genui/chat.tsx (form önceki rehberdeki gibi)
const { messages, sendMessage, status } = useChat<GenMessage>({
  id,
  messages: initialMessages,
  transport: new DefaultChatTransport({ api: '/api/genui' }),
});
const live = status === 'submitted' || status === 'streaming';

return messages.map((message, index) => (
  <MessageParts key={message.id} message={message} live={live && index === messages.length - 1} />
));

// app/genui/load-chat.ts
import { TypeValidationError, validateUIMessages } from 'ai';
import { tools } from './tools';
import type { GenMessage } from './types';

export async function loadValidated(stored: unknown[]): Promise<GenMessage[]> {
  try {
    return await validateUIMessages<GenMessage>({ messages: stored, tools });
  } catch (error) {
    if (TypeValidationError.isInstance(error)) {
      console.error('Kayıtlı mesajlar güncel şemalarla uyuşmuyor', error);
      return []; // ya da mesajları taşıyın veya süzün
    }
    throw error;
  }
}