From fcf33dc07fb099e8a6f5b8f446c6b31c4a510bfe Mon Sep 17 00:00:00 2001 From: Alex Whiteside Date: Tue, 24 Sep 2024 18:23:04 -0400 Subject: [PATCH] Some Made the things play nice --- packages/chat-ui/src/elements/Page/index.tsx | 17 ++++++ packages/chat-ui/src/elements/index.ts | 2 + packages/chat-ui/src/index.ts | 1 + packages/chat-ui/src/narrative/index.ts | 11 +++- .../narrative/panes/history/ChatHistory.tsx | 49 ++++++++++++++++ .../src/narrative/panes/history/List.tsx | 18 ++++++ .../src/narrative/panes/history/index.ts | 1 + .../chat/src/payload/getChatIdFromParams.ts | 2 +- .../chat/src/ui/hooks/queryConversations.ts | 42 ++++++++++---- packages/chat/src/ui/page/ChatsList.tsx | 17 ------ .../chat/src/ui/page/ConversationsList.tsx | 57 ++++++++++--------- .../src/app/(payload)/admin/importMap.js | 20 ++++--- .../src/components/AfterNavLinks/index.tsx | 16 ++++++ playground/src/components/Char/History.tsx | 24 ++++++++ playground/src/payload.config.ts | 11 +++- 15 files changed, 219 insertions(+), 69 deletions(-) create mode 100644 packages/chat-ui/src/elements/Page/index.tsx create mode 100644 packages/chat-ui/src/elements/index.ts create mode 100644 packages/chat-ui/src/narrative/panes/history/ChatHistory.tsx create mode 100644 packages/chat-ui/src/narrative/panes/history/List.tsx delete mode 100644 packages/chat/src/ui/page/ChatsList.tsx create mode 100644 playground/src/components/AfterNavLinks/index.tsx create mode 100644 playground/src/components/Char/History.tsx diff --git a/packages/chat-ui/src/elements/Page/index.tsx b/packages/chat-ui/src/elements/Page/index.tsx new file mode 100644 index 0000000..7e7d9a2 --- /dev/null +++ b/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) => { + return ( + + + {title} + {children} + + + ); +}; diff --git a/packages/chat-ui/src/elements/index.ts b/packages/chat-ui/src/elements/index.ts new file mode 100644 index 0000000..b998744 --- /dev/null +++ b/packages/chat-ui/src/elements/index.ts @@ -0,0 +1,2 @@ +export {Text, View, Avatar} from 'reshaped' +export {Page} from './Page' \ No newline at end of file diff --git a/packages/chat-ui/src/index.ts b/packages/chat-ui/src/index.ts index b52d111..0df814b 100644 --- a/packages/chat-ui/src/index.ts +++ b/packages/chat-ui/src/index.ts @@ -1,2 +1,3 @@ export * from './base' export * from "./narrative"; +export * from './elements' \ No newline at end of file diff --git a/packages/chat-ui/src/narrative/index.ts b/packages/chat-ui/src/narrative/index.ts index 348af37..a23a654 100644 --- a/packages/chat-ui/src/narrative/index.ts +++ b/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' \ No newline at end of file +export { + Icebreaker, + WithMessages, + IceBreakers, + ChatPane, + MessageInput, +} from "./panes/chat"; +export { Message } from "./messages/plain"; +export { ChatHistory } from "./panes/history"; diff --git a/packages/chat-ui/src/narrative/panes/history/ChatHistory.tsx b/packages/chat-ui/src/narrative/panes/history/ChatHistory.tsx new file mode 100644 index 0000000..a0b8f7a --- /dev/null +++ b/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 ( + + + {description} + + + ); +}; + +interface WrapperProps { + layout?: ViewProps; +} + +export const ListWrapper = ({ + children, + layout, +}: PropsWithChildren) => { + return ( + + {children} + + ); +}; + +interface ListProps { + convos: Props[]; +} + +export const ChatHistory = ({ convos }: ListProps) => { + return ( + + + + ); +}; +ChatHistory.ListWrapper = ListWrapper; +ChatHistory.Entry = Entry; diff --git a/packages/chat-ui/src/narrative/panes/history/List.tsx b/packages/chat-ui/src/narrative/panes/history/List.tsx new file mode 100644 index 0000000..36522fa --- /dev/null +++ b/packages/chat-ui/src/narrative/panes/history/List.tsx @@ -0,0 +1,18 @@ +import React from "react"; + +interface ListProps { + items: T[]; + component: React.ComponentType; +} + + +export function List({ items, component: Component }: ListProps) { + return ( + <> + {items.map((item, index) => ( + + ))} + + ); +} + diff --git a/packages/chat-ui/src/narrative/panes/history/index.ts b/packages/chat-ui/src/narrative/panes/history/index.ts index e69de29..ef737bc 100644 --- a/packages/chat-ui/src/narrative/panes/history/index.ts +++ b/packages/chat-ui/src/narrative/panes/history/index.ts @@ -0,0 +1 @@ +export { ChatHistory } from "./ChatHistory"; diff --git a/packages/chat/src/payload/getChatIdFromParams.ts b/packages/chat/src/payload/getChatIdFromParams.ts index cac0313..31fcabe 100644 --- a/packages/chat/src/payload/getChatIdFromParams.ts +++ b/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(params, "segments[1]", undefined) } \ No newline at end of file diff --git a/packages/chat/src/ui/hooks/queryConversations.ts b/packages/chat/src/ui/hooks/queryConversations.ts index 9c71b6c..704ef38 100644 --- a/packages/chat/src/ui/hooks/queryConversations.ts +++ b/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 => { - 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 => { + 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, + })), + }; +}; diff --git a/packages/chat/src/ui/page/ChatsList.tsx b/packages/chat/src/ui/page/ChatsList.tsx deleted file mode 100644 index ee23ada..0000000 --- a/packages/chat/src/ui/page/ChatsList.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { Suspense } from "react"; -import { ConversationsList } from "./ConversationsList"; -import * as React from "react"; -import type { AdminViewProps } from "payload"; -import { getChatIdFromParams } from "../../payload/getChatIdFromParams"; - -export const ConversationList = ({ - initPageResult, - params, -}: Pick) => { - const chatId = getChatIdFromParams(params); - return ( - Loading

}> - - - ); -}; diff --git a/packages/chat/src/ui/page/ConversationsList.tsx b/packages/chat/src/ui/page/ConversationsList.tsx index db0de24..1ab5dfd 100644 --- a/packages/chat/src/ui/page/ConversationsList.tsx +++ b/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 ( -
- {convos?.map((convo) => ( - -
-

{convo.description}

-
- - ))} -
- ) -} + const convos = use(conversations); + return ; +}; + +export const ConversationsList = ({ + initPageResult, + params, +}: Pick) => { + const chatId = getChatIdFromParams(params); + console.table({ chatId }); + const rest = shake({ chatId }); + return ( + + Loading

}> + + + + ); +}; diff --git a/playground/src/app/(payload)/admin/importMap.js b/playground/src/app/(payload)/admin/importMap.js index 737fe27..eda2b6c 100644 --- a/playground/src/app/(payload)/admin/importMap.js +++ b/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 } diff --git a/playground/src/components/AfterNavLinks/index.tsx b/playground/src/components/AfterNavLinks/index.tsx new file mode 100644 index 0000000..a287671 --- /dev/null +++ b/playground/src/components/AfterNavLinks/index.tsx @@ -0,0 +1,16 @@ +import { AdminViewProps } from "payload"; + +const AfterNavLinks = (props:AdminViewProps) => { + return ( + + ) +} + +export default AfterNavLinks diff --git a/playground/src/components/Char/History.tsx b/playground/src/components/Char/History.tsx new file mode 100644 index 0000000..0503765 --- /dev/null +++ b/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 = (props) => { + const { initPageResult, params, searchParams } = props + + return ( + + + + ) +} + +export default History diff --git a/playground/src/payload.config.ts b/playground/src/payload.config.ts index 0cdbe50..22efd7b 100644 --- a/playground/src/payload.config.ts +++ b/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 },