add page to pdf element (#606)

backend/chainlit/data/__init__.py

@@ -128,6 +128,7 @@ def attachment_to_element_dict(self, attachment: Attachment) -> "ElementDict":
             "chainlitKey": None,
             "display": metadata.get("display", "side"),
             "language": metadata.get("language"),
+            "page": metadata.get("page"),
             "size": metadata.get("size"),
             "type": metadata.get("type", "file"),
             "forId": attachment.step_id,
@@ -230,6 +231,7 @@ async def create_element(self, element: "Element"):
             "language": element.language,
             "display": element.display,
             "type": element.type,
+            "page": getattr(element, "page", None),
         }
 
         await self.client.api.create_attachment(

backend/chainlit/element.py

@@ -37,6 +37,7 @@ class ElementDict(TypedDict):
     display: ElementDisplay
     size: Optional[ElementSize]
     language: Optional[str]
+    page: Optional[int]
     forId: Optional[str]
     mime: Optional[str]
 
@@ -46,7 +47,7 @@ class Element:
     # The type of the element. This will be used to determine how to display the element in the UI.
     type: ClassVar[ElementType]
     # Name of the element, this will be used to reference the element in the UI.
-    name: str
+    name: str = ""
     # The ID of the element. This is set automatically when the element is sent to the UI.
     id: str = Field(default_factory=lambda: str(uuid.uuid4()))
     # The key of the element hosted on Chainlit.
@@ -91,6 +92,7 @@ def to_dict(self) -> ElementDict:
                 "display": self.display,
                 "objectKey": getattr(self, "object_key", None),
                 "size": getattr(self, "size", None),
+                "page": getattr(self, "page", None),
                 "language": getattr(self, "language", None),
                 "forId": getattr(self, "for_id", None),
                 "mime": getattr(self, "mime", None),
@@ -201,6 +203,7 @@ class Text(Element):
 class Pdf(Element):
     """Useful to send a pdf to the UI."""
 
+    page: Optional[int] = None
     type: ClassVar[ElementType] = "pdf"
 
 

libs/react-client/src/types/element.ts

@@ -48,7 +48,9 @@ export interface ITextElement extends TMessageElement<'text'> {
   language?: string;
 }
 
-export interface IPdfElement extends TMessageElement<'pdf'> {}
+export interface IPdfElement extends TMessageElement<'pdf'> {
+  page?: number;
+}
 
 export interface IAudioElement extends TMessageElement<'audio'> {}
 

libs/react-components/src/elements/PDF.tsx

@@ -8,11 +8,13 @@ const PDFElement = ({ element }: Props) => {
   if (!element.url) {
     return null;
   }
-
+  const url = element.page
+    ? `${element.url}#page=${element.page}`
+    : element.url;
   return (
     <iframe
       className={`${element.display}-pdf`}
-      src={element.url}
+      src={url}
       style={{ border: 'none' }}
       width="100%"
       height="100%"