e2db2d5027
Dynamically import ChatDetail, NewChatForm, and ProductSelector components with skeleton loading states for improved performance. Refine product selection logic in promotion forms to show blacklist selector only for 'all' mode and clarify labels and descriptions for better user understanding.
45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
import React from "react";
|
|
import { Metadata, Viewport } from "next";
|
|
import dynamic from "next/dynamic";
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
import Dashboard from "@/components/dashboard/dashboard";
|
|
|
|
export const metadata: Metadata = {
|
|
title: "Start New Chat",
|
|
description: "Begin a new conversation with a customer",
|
|
};
|
|
|
|
export const viewport: Viewport = {
|
|
width: "device-width",
|
|
initialScale: 1,
|
|
themeColor: [
|
|
{ media: "(prefers-color-scheme: dark)", color: "#000000" },
|
|
{ media: "(prefers-color-scheme: light)", color: "#D53F8C" },
|
|
],
|
|
};
|
|
|
|
export default function NewChatPage() {
|
|
const NewChatForm = dynamic(() => import("@/components/dashboard/NewChatForm"), {
|
|
loading: () => (
|
|
<div className="space-y-4">
|
|
<Skeleton className="h-6 w-48" />
|
|
<Skeleton className="h-10 w-full" />
|
|
<Skeleton className="h-10 w-full" />
|
|
<Skeleton className="h-32 w-full" />
|
|
<div className="flex gap-2">
|
|
<Skeleton className="h-9 w-24" />
|
|
<Skeleton className="h-9 w-24" />
|
|
</div>
|
|
</div>
|
|
)
|
|
});
|
|
return (
|
|
<Dashboard>
|
|
<div className="container mx-auto py-6 space-y-6">
|
|
<div className="grid grid-cols-1 gap-6">
|
|
<NewChatForm />
|
|
</div>
|
|
</div>
|
|
</Dashboard>
|
|
);
|
|
}
|