Refactor layout and scrolling for chat and welcome screens
This commit is contained in:
@@ -154,12 +154,7 @@ export default function App() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex h-screen bg-neutral-800 text-neutral-100 font-sans antialiased">
|
<div className="flex h-screen bg-neutral-800 text-neutral-100 font-sans antialiased">
|
||||||
<main className="flex-1 flex flex-col overflow-hidden max-w-4xl mx-auto w-full">
|
<main className="h-full w-full max-w-4xl mx-auto">
|
||||||
<div
|
|
||||||
className={`flex-1 overflow-y-auto ${
|
|
||||||
thread.messages.length === 0 ? "flex" : ""
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{thread.messages.length === 0 ? (
|
{thread.messages.length === 0 ? (
|
||||||
<WelcomeScreen
|
<WelcomeScreen
|
||||||
handleSubmit={handleSubmit}
|
handleSubmit={handleSubmit}
|
||||||
@@ -177,7 +172,6 @@ export default function App() {
|
|||||||
historicalActivities={historicalActivities}
|
historicalActivities={historicalActivities}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</div>
|
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -253,7 +253,7 @@ export function ChatMessagesView({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col h-full">
|
<div className="flex flex-col h-full">
|
||||||
<ScrollArea className="flex-grow" ref={scrollAreaRef}>
|
<ScrollArea className="flex-1 overflow-y-auto" ref={scrollAreaRef}>
|
||||||
<div className="p-4 md:p-6 space-y-2 max-w-4xl mx-auto pt-16">
|
<div className="p-4 md:p-6 space-y-2 max-w-4xl mx-auto pt-16">
|
||||||
{messages.map((message, index) => {
|
{messages.map((message, index) => {
|
||||||
const isLast = index === messages.length - 1;
|
const isLast = index === messages.length - 1;
|
||||||
|
|||||||
@@ -15,7 +15,7 @@ export const WelcomeScreen: React.FC<WelcomeScreenProps> = ({
|
|||||||
onCancel,
|
onCancel,
|
||||||
isLoading,
|
isLoading,
|
||||||
}) => (
|
}) => (
|
||||||
<div className="flex flex-col items-center justify-center text-center px-4 flex-1 w-full max-w-3xl mx-auto gap-4">
|
<div className="h-full flex flex-col items-center justify-center text-center px-4 flex-1 w-full max-w-3xl mx-auto gap-4">
|
||||||
<div>
|
<div>
|
||||||
<h1 className="text-5xl md:text-6xl font-semibold text-neutral-100 mb-3">
|
<h1 className="text-5xl md:text-6xl font-semibold text-neutral-100 mb-3">
|
||||||
Welcome.
|
Welcome.
|
||||||
|
|||||||
Reference in New Issue
Block a user