components/ChatInterface.tsx

'use client';

import { ChatWithMessages } from '@/lib/types';
import React from 'react';
import ChatList from './chat/ChatList';
import { Card } from './ui/Card';
import { useAtom, useAtomValue } from 'jotai';
import { selectedMessageId } from '@/state/chat';
import CodeResultDisplay from './CodeResultDisplay';

export interface ChatInterfaceProps {
  chat: ChatWithMessages;
}

const ChatInterface: React.FC<ChatInterfaceProps> = ({ chat }) => {
  const messageId = useAtomValue(selectedMessageId);
  const messageCodeResult = chat.messages.find(
    message => message.id === messageId,
  )?.result;
  return (
    <div className="relative flex overflow-hidden space-x-4 size-full">
      <div
        data-state={messageCodeResult?.payload ? 'open' : 'closed'}
        className="pl-4 peer absolute right-0 inset-y-0 hidden translate-x-full data-[state=open]:translate-x-0 z-30 duration-300 ease-in-out xl:flex flex-col items-start xl:w-1/2 h-full dark:bg-zinc-950 overflow-auto"
      >
        {messageCodeResult?.payload && (
          <Card className="w-full">
            <CodeResultDisplay codeResult={messageCodeResult.payload} />
          </Card>
        )}
      </div>
      <div className="w-full flex justify-center overflow-auto pr-0 animate-in duration-300 ease-in-out peer-[[data-state=open]]:xl:pr-[50%]">
        <ChatList chat={chat} />
      </div>
    </div>
  );
};

export default ChatInterface;