File size: 1,469 Bytes
93dd66e
 
3ba9c0c
c69ef3e
052672d
38448fc
a86b547
3ba9c0c
 
f80b091
 
 
 
 
 
a86b547
38448fc
3ba9c0c
 
 
f80b091
 
 
 
 
 
 
 
 
38448fc
3ba9c0c
f80b091
 
 
 
 
38448fc
f80b091
 
 
 
 
 
 
 
 
 
8e3dbd3
 
f80b091
 
 
 
 
3ba9c0c
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
import * as React from 'react';
import { type UseChatHelpers } from 'ai/react';

import { Button } from '@/components/ui/Button';
import { PromptForm } from '@/components/chat/PromptForm';
import { IconRefresh, IconStop } from '@/components/ui/Icons';
import { MessageBase } from '../../lib/types';

export interface ChatPanelProps
  extends Pick<
    UseChatHelpers,
    'append' | 'isLoading' | 'reload' | 'stop' | 'input' | 'setInput'
  > {
  id?: string;
  title?: string;
  messages: MessageBase[];
  url?: string;
}

export function ChatPanel({
  id,
  title,
  isLoading,
  stop,
  append,
  reload,
  input,
  setInput,
  messages,
  url,
}: ChatPanelProps) {
  return (
    <div className="fixed inset-x-0 bottom-0 w-full animate-in duration-300 ease-in-out peer-[[data-state=open]]:group-[]:lg:pl-[250px] peer-[[data-state=open]]:group-[]:xl:pl-[300px]">
      <div className="mx-auto sm:max-w-3xl sm:px-4">
        <div className="px-4 py-2 space-y-4 border-t shadow-lg bg-background sm:rounded-t-xl sm:border md:py-4">
          <PromptForm
            url={url}
            onSubmit={async value => {
              await append({
                id,
                content: value,
                role: 'user',
              });
            }}
            input={input}
            setInput={setInput}
            isLoading={isLoading}
            messages={messages}
            reload={reload}
          />
        </div>
      </div>
    </div>
  );
}