Some Made the things play nice

packages/chat-ui/src/elements/Page/index.tsx

@@ -0,0 +1,17 @@
+import { Container, View, Text } from "reshaped";
+import { PropsWithChildren } from "react";
+
+interface PageProps {
+  title: string;
+}
+
+export const Page = ({ children, title }: PropsWithChildren<PageProps>) => {
+  return (
+    <Container>
+      <View gap={4} padding={4}>
+        <Text variant="title-4">{title}</Text>
+        {children}
+      </View>
+    </Container>
+  );
+};

packages/chat-ui/src/elements/index.ts

@@ -0,0 +1,2 @@
+export {Text, View, Avatar} from 'reshaped'
+export {Page} from './Page'

packages/chat-ui/src/index.ts

@@ -1,2 +1,3 @@
 export * from './base'
 export * from "./narrative";
+export * from './elements'

packages/chat-ui/src/narrative/index.ts

@@ -1,2 +1,9 @@
-export {Icebreaker, WithMessages, IceBreakers, ChatPane, MessageInput} from './panes/chat'
-export {Message} from './messages/plain'
+export {
+  Icebreaker,
+  WithMessages,
+  IceBreakers,
+  ChatPane,
+  MessageInput,
+} from "./panes/chat";
+export { Message } from "./messages/plain";
+export { ChatHistory } from "./panes/history";

packages/chat-ui/src/narrative/panes/history/ChatHistory.tsx

@@ -0,0 +1,49 @@
+import { PropsWithChildren } from "react";
+import * as React from "react";
+import { Card, Text, View, ViewProps } from "reshaped";
+import { List } from "./List";
+
+interface Props {
+  href: string;
+  selected: boolean;
+  description: string;
+}
+
+const Entry = ({ selected = false, description, href }: Props) => {
+  return (
+    <Card selected={selected} href={href}>
+      <View padding={2}>
+        <Text variant="body-3">{description}</Text>
+      </View>
+    </Card>
+  );
+};
+
+interface WrapperProps {
+  layout?: ViewProps;
+}
+
+export const ListWrapper = ({
+  children,
+  layout,
+}: PropsWithChildren<WrapperProps>) => {
+  return (
+    <View gap={2} {...layout}>
+      {children}
+    </View>
+  );
+};
+
+interface ListProps {
+  convos: Props[];
+}
+
+export const ChatHistory = ({ convos }: ListProps) => {
+  return (
+    <ListWrapper>
+      <List items={convos} component={Entry} />
+    </ListWrapper>
+  );
+};
+ChatHistory.ListWrapper = ListWrapper;
+ChatHistory.Entry = Entry;

packages/chat-ui/src/narrative/panes/history/List.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+interface ListProps<T> {
+  items: T[];
+  component: React.ComponentType<T>;
+}
+
+
+export function List<T>({ items, component: Component }: ListProps<T>) {
+  return (
+    <>
+      {items.map((item, index) => (
+        <Component key={index} {...item} />
+      ))}
+    </>
+  );
+}
+

packages/chat-ui/src/narrative/panes/history/index.ts

@@ -0,0 +1 @@
+export { ChatHistory } from "./ChatHistory";

packages/chat/src/payload/getChatIdFromParams.ts

@@ -2,6 +2,6 @@ import { get } from "radash";
 import { AdminViewProps } from "payload";
 
 export const getChatIdFromParams=(params: AdminViewProps['params'])=>{
-  return  get(params, "segments[1]", undefined);
+  return  get<string>(params, "segments[1]", undefined)
 
 }

packages/chat/src/ui/hooks/queryConversations.ts

@@ -1,14 +1,32 @@
-import type {PayloadRequest} from 'payload'
-import type {Chat} from "../../payload-types";
+import type { PayloadRequest } from "payload";
+import type { Chat } from "../../payload-types";
+import { get } from "radash";
 
-export const queryChats = async (req: PayloadRequest):Promise<Chat[]> => {
-	const records = await req.payload.find({
-		overrideAccess: false,
-		user: req.user,
-		collection: 'chats',
-		where: { "user.email": { equals: req.user?.email } },
-		sort: '-sent',
-	})
-
-	return records.docs
+interface QueryResult {
+  chats: Chat[];
+  transform: (chatId?: string) => Array<{
+    description: string;
+    href: string;
+    selected: boolean;
+  }>;
 }
+
+export const queryChats = async (req: PayloadRequest): Promise<QueryResult> => {
+  const records = await req.payload.find({
+    overrideAccess: false,
+    user: req.user,
+    collection: "chats",
+    where: { "user.email": { equals: req.user?.email } },
+    sort: "-sent",
+  });
+
+  return {
+    chats: records.docs,
+    transform: (chatId) =>
+      records.docs.map((c) => ({
+        description: c.description ?? "",
+        href: `/admin/chat/${get(c, "id")}`,
+        selected: String(get(c, "id")) === chatId,
+      })),
+  };
+};

packages/chat/src/ui/page/ConversationsList.tsx

@@ -1,32 +1,35 @@
-import * as React from 'react'
-import {use} from 'react'
-import {get} from 'radash'
-import type {PayloadRequest} from 'payload'
-import {queryChats} from '../hooks/queryConversations'
+import * as React from "react";
+import { Suspense, use } from "react";
+import type { AdminViewProps, PayloadRequest } from "payload";
+import { queryChats } from "../hooks/queryConversations";
+import { ChatHistory, Page } from "@payload-llm-plugins/chat-ui";
+import { getChatIdFromParams } from "../../payload/getChatIdFromParams";
+import { shake } from "radash";
 
 interface ConversationsListProps {
-	req: PayloadRequest
-	chatId: undefined | string | number
+  req: PayloadRequest;
+  chatId?: string;
 }
 
-export const ConversationsList = ({ req, chatId }: ConversationsListProps) => {
-	const conversations = queryChats(req)
+const UnsafeConvoList = ({ req, chatId }: ConversationsListProps) => {
+  const conversations = queryChats(req);
 
-	const convos = use(conversations)
-	return (
-		<div className="conversations-list space-y-2">
-			{convos?.map((convo) => (
-				<a
-					key={get(convo, 'id')}
-					href={`./${get(convo, 'id')}`}
-					data-selected={String(get(convo, 'id')) === String(chatId)}
-					className="block p-2 bg-white rounded shadow hover:bg-gray-200 "
-				>
-					<div className="conversation">
-						<p className="text-gray-800">{convo.description}</p>
-					</div>
-				</a>
-			))}
-		</div>
-	)
-}
+  const convos = use(conversations);
+  return <ChatHistory convos={convos.transform(chatId)} />;
+};
+
+export const ConversationsList = ({
+  initPageResult,
+  params,
+}: Pick<AdminViewProps, "params" | "initPageResult">) => {
+  const chatId = getChatIdFromParams(params);
+  console.table({ chatId });
+  const rest = shake({ chatId });
+  return (
+    <Page title="Chat History">
+      <Suspense fallback={<p>Loading</p>}>
+        <UnsafeConvoList req={initPageResult.req} {...rest} />
+      </Suspense>
+    </Page>
+  );
+};

playground/src/app/(payload)/admin/importMap.js

@@ -16,10 +16,12 @@ import { PreviewComponent as PreviewComponent_14 } from '@payloadcms/plugin-seo/
 import { SlugComponent as SlugComponent_15 } from '@/fields/slug/SlugComponent'
 import { HorizontalRuleFeatureClient as HorizontalRuleFeatureClient_16 } from '@payloadcms/richtext-lexical/client'
 import { BlocksFeatureClient as BlocksFeatureClient_17 } from '@payloadcms/richtext-lexical/client'
-import { default as default_18 } from '@/components/BeforeDashboard'
-import { default as default_19 } from '@/components/BeforeLogin'
-import { Provider as Provider_20 } from '@payload-llm-plugins/chat-ui'
-import { default as default_21 } from '@/components/Char'
+import { default as default_18 } from '@/components/AfterNavLinks'
+import { default as default_19 } from '@/components/BeforeDashboard'
+import { default as default_20 } from '@/components/BeforeLogin'
+import { Provider as Provider_21 } from '@payload-llm-plugins/chat-ui'
+import { default as default_22 } from '@/components/Char'
+import { default as default_23 } from '@/components/Char/History'
 
 export const importMap = {
   "@payloadcms/richtext-lexical/client#RichTextCell": RichTextCell_0,
@@ -40,8 +42,10 @@ export const importMap = {
   "@/fields/slug/SlugComponent#SlugComponent": SlugComponent_15,
   "@payloadcms/richtext-lexical/client#HorizontalRuleFeatureClient": HorizontalRuleFeatureClient_16,
   "@payloadcms/richtext-lexical/client#BlocksFeatureClient": BlocksFeatureClient_17,
-  "@/components/BeforeDashboard#default": default_18,
-  "@/components/BeforeLogin#default": default_19,
-  "@payload-llm-plugins/chat-ui#Provider": Provider_20,
-  "@/components/Char#default": default_21
+  "@/components/AfterNavLinks#default": default_18,
+  "@/components/BeforeDashboard#default": default_19,
+  "@/components/BeforeLogin#default": default_20,
+  "@payload-llm-plugins/chat-ui#Provider": Provider_21,
+  "@/components/Char#default": default_22,
+  "@/components/Char/History#default": default_23
 }

playground/src/components/AfterNavLinks/index.tsx

@@ -0,0 +1,16 @@
+import { AdminViewProps } from "payload";
+
+const AfterNavLinks = (props:AdminViewProps) => {
+  return (
+    <ul>
+      <li>
+        <a href="/admin/chat/">Chat</a>
+      </li>
+      <li>
+        <a href="/admin/history">History</a>
+      </li>
+    </ul>
+  )
+}
+
+export default AfterNavLinks

playground/src/components/Char/History.tsx

@@ -0,0 +1,24 @@
+import { ConversationsList } from '@payload-llm-plugins/chat/ChatView'
+import { DefaultTemplate } from '@payloadcms/next/templates'
+import { AdminViewProps } from 'payload'
+
+const History: React.FC<AdminViewProps> = (props) => {
+  const { initPageResult, params, searchParams } = props
+
+  return (
+    <DefaultTemplate
+      i18n={initPageResult.req.i18n}
+      locale={initPageResult.locale}
+      params={params}
+      payload={initPageResult.req.payload}
+      permissions={initPageResult.permissions}
+      searchParams={searchParams}
+      user={initPageResult.req.user || undefined}
+      visibleEntities={initPageResult.visibleEntities}
+    >
+      <ConversationsList {...props} />
+    </DefaultTemplate>
+  )
+}
+
+export default History

playground/src/payload.config.ts

@@ -57,10 +57,17 @@ export default buildConfig({
       // The `BeforeDashboard` component renders the 'welcome' block that you see after logging into your admin panel.
       // Feel free to delete this at any time. Simply remove the line below and the import `BeforeDashboard` statement on line 15.
       beforeDashboard: ['@/components/BeforeDashboard'],
+      afterNavLinks:['@/components/AfterNavLinks'],
       views: {
-        ui: {
+        chat: {
           Component: '@/components/Char',
-          path: '/ui/:id',
+          path: '/chat/:id',
+          exact: false,
+          strict:false
+        },
+        history: {
+          Component: '@/components/Char/History',
+          path: '/history',
           exact: false,
           strict:false
         },