AI 어시스턴트

import { createGrid, type Row } from '@freegridjs/core';
import { button, separator, text, tr, type DemoContext } from '../ui';
import '../data'; // registers the grid's language packs

export default function mount(ctx: DemoContext) {
  const { lang } = ctx;
  const h = (en: string, ko: string) => tr(lang, { en, ko });
  const regions = lang === 'ko' ? ['서울', '부산', '대구', '광주'] : ['East', 'West', 'North', 'South'];
  const products = lang === 'ko' ? ['노트북', '모니터', '키보드', '마우스', '책상'] : ['Laptop', 'Monitor', 'Keyboard', 'Mouse', 'Desk'];
  const prices = [1290, 320, 59, 25, 410];
  const data: Row[] = Array.from({ length: 120 }, (_, i) => {
    const p = (i * 7) % 5;
    return {
      id: i + 1,
      date: `2026-${String(1 + (i % 12)).padStart(2, '0')}-${String(1 + ((i * 3) % 28)).padStart(2, '0')}`,
      region: regions[i % 4],
      product: products[p],
      qty: 1 + ((i * 13) % 17),
      price: prices[p],
    };
  });
  const suggestions = lang === 'ko'
    ? ['지역별로 묶어 줘', '수량 10 이상 강조', '수량 상위 5개', '금액 컬럼 추가', '지역별 차트', '초기화']
    : ['Group by region', 'Highlight qty above 10', 'Top 5 by qty', 'Add an amount column', 'Chart by region', 'Reset'];
  const grid = createGrid(ctx.host, {
    columns: [
      { field: 'date', header: h('Date', '날짜'), type: 'date', width: 110 },
      { field: 'region', header: h('Region', '지역'), width: 100 },
      { field: 'product', header: h('Product', '제품'), width: 120 },
      { field: 'qty', header: h('Qty', '수량'), type: 'number', width: 80 },
      { field: 'price', header: h('Price', '단가'), type: 'number', format: '#,##0', width: 100 },
    ],
    data, locale: lang, getRowId: r => String(r.id),
    // this demo's endpoint reads a few phrases; a real one asks a model (see "Server examples")
    assistant: { url: '/api/demo-assistant', sampleRows: 3, suggestions },
  });
  grid.on('assistantAnswer', e => ctx.log(`assistantAnswer → ${e.applied.map(a => a.type).join(', ') || '-'}${e.skipped.length ? ` (${h('skipped', '건너뜀')} ${e.skipped.length})` : ''}`));

  text(ctx, h('Open the assistant and ask in plain words. This demo server only knows a few phrases; your server asks a model and understands anything. Each answer has an Undo.',
    '어시스턴트를 열고 말로 요청해 보세요. 이 데모 서버는 몇 가지 표현만 알아듣지만, 실제 서버는 모델에게 물어 어떤 요청이든 처리합니다. 답마다 되돌리기가 있습니다.'));
  separator(ctx);
  button(ctx, h('Open AI assistant', 'AI 어시스턴트 열기'), () => grid.openAssistant());
  button(ctx, h('Ask: group by region', '요청: 지역별로 묶기'), async () => {
    const res = await grid.askAssistant(suggestions[0]);
    ctx.log(res.message);
  });
  return grid;
}