AI Models, Prompts, Agents, Avatars

import { useState } from 'react';
import { AiWidget, AiInput, AiTextarea, CardIcon } from '@cleen/cleen-components';
import { useAgentChain, usePrompts } from '@/hooks/useAi';

export function AIPromptStudio({ agentChainId }) {
  const { chain, steps, runStep } = useAgentChain(agentChainId);
  const { prompts } = usePrompts();
  const [input, setInput] = useState('');

  return (
    <div className="ai-studio">
      <h1>{chain?.name}</h1>
      <div className="ai-prompt-grid">
        {prompts.map((p) => (
          <CardIcon key={p.id} icon={p.icon} title={p.name} description={p.summary} />
        ))}
      </div>
      <AiWidget chain={chain} steps={steps} />
      <AiTextarea
        value={input}
        onChange={setInput}
        onSubmit={() => runStep({ stepId: chain.firstStepId, payload: input })}
      />
    </div>
  );
}