Spaces:
Runtime error
Runtime error
File size: 2,155 Bytes
0971cc4 |
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 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
"use client";
import React, { useEffect, useState } from "react";
import { Sidebar } from "../sidebar";
import Chat, { ChatProps, ChatTopbarProps } from "./chat";
interface ChatLayoutProps {
defaultLayout: number[] | undefined;
defaultCollapsed?: boolean;
navCollapsedSize: number;
chatId: string;
}
type MergedProps = ChatLayoutProps & ChatProps & ChatTopbarProps;
export function ChatLayout({
defaultLayout = [30, 160],
defaultCollapsed = false,
navCollapsedSize = 768,
messages,
input,
handleInputChange,
handleSubmit,
isLoading,
error,
stop,
chatId,
setChatId,
chatOptions,
setChatOptions,
}: MergedProps) {
const [isCollapsed, setIsCollapsed] = React.useState(false);
const [isMobile, setIsMobile] = useState(false);
useEffect(() => {
const checkScreenWidth = () => {
setIsMobile(window.innerWidth <= 768);
setIsCollapsed(window.innerWidth <= 768);
};
// Initial check
checkScreenWidth();
// Event listener for screen width changes
window.addEventListener("resize", checkScreenWidth);
// Cleanup the event listener on component unmount
return () => {
window.removeEventListener("resize", checkScreenWidth);
};
}, []);
return (
<div className="relative z-0 flex h-full w-full overflow-hidden">
<div className="flex-shrink-0 overflow-x-hidden bg-token-sidebar-surface-primary md:w-[260px]">
<Sidebar
isCollapsed={isCollapsed}
isMobile={isMobile}
chatId={chatId}
setChatId={setChatId}
chatOptions={chatOptions}
setChatOptions={setChatOptions}
/>
</div>
<div className="relative flex h-full max-w-full flex-1 flex-col overflow-hidden">
<Chat
chatId={chatId}
setChatId={setChatId}
chatOptions={chatOptions}
setChatOptions={setChatOptions}
messages={messages}
input={input}
handleInputChange={handleInputChange}
handleSubmit={handleSubmit}
isLoading={isLoading}
error={error}
stop={stop}
/>
</div>
</div>
);
}
|