|
| 1 | +import React, { ReactNode } from 'react'; |
| 2 | +import { |
| 3 | + Document, |
| 4 | + Page, |
| 5 | + Text, |
| 6 | + View, |
| 7 | + StyleSheet, |
| 8 | + pdf, |
| 9 | +} from '@react-pdf/renderer'; |
| 10 | +import { Message } from '@openassistantgpt/react'; |
| 11 | +import { ChatbotConfig } from '@/src/chatbot'; |
| 12 | + |
| 13 | +const styles = StyleSheet.create({ |
| 14 | + page: { |
| 15 | + flexDirection: 'column', |
| 16 | + backgroundColor: '#ffffff', |
| 17 | + padding: 40, |
| 18 | + fontFamily: 'Helvetica', |
| 19 | + }, |
| 20 | + header: { |
| 21 | + marginBottom: 30, |
| 22 | + paddingBottom: 20, |
| 23 | + borderBottom: '2 solid #e5e7eb', |
| 24 | + }, |
| 25 | + title: { |
| 26 | + fontSize: 24, |
| 27 | + fontWeight: 'bold', |
| 28 | + color: '#1f2937', |
| 29 | + marginBottom: 5, |
| 30 | + fontFamily: 'Helvetica-Bold', |
| 31 | + }, |
| 32 | + subtitle: { |
| 33 | + fontSize: 12, |
| 34 | + color: '#6b7280', |
| 35 | + marginBottom: 10, |
| 36 | + fontFamily: 'Helvetica', |
| 37 | + }, |
| 38 | + chatContainer: { |
| 39 | + flexDirection: 'column', |
| 40 | + gap: 16, |
| 41 | + }, |
| 42 | + messageContainer: { |
| 43 | + flexDirection: 'column', |
| 44 | + marginBottom: 16, |
| 45 | + break: false, // Prevent breaking this container across pages |
| 46 | + }, |
| 47 | + userMessage: { |
| 48 | + alignSelf: 'flex-end', |
| 49 | + maxWidth: '75%', |
| 50 | + wrap: false, // Keep the entire message together |
| 51 | + alignItems: 'flex-end', // Align all content to the right within the container |
| 52 | + }, |
| 53 | + assistantMessage: { |
| 54 | + alignSelf: 'flex-start', |
| 55 | + maxWidth: '85%', |
| 56 | + wrap: false, // Keep the entire message together |
| 57 | + alignItems: 'flex-start', // Align all content to the left within the container |
| 58 | + }, |
| 59 | + messageHeader: { |
| 60 | + flexDirection: 'row', |
| 61 | + alignItems: 'center', |
| 62 | + marginBottom: 6, |
| 63 | + }, |
| 64 | + userBubble: { |
| 65 | + backgroundColor: '#3b82f6', |
| 66 | + color: '#ffffff', |
| 67 | + padding: 12, |
| 68 | + borderRadius: 18, |
| 69 | + borderBottomRightRadius: 4, |
| 70 | + break: false, // Prevent breaking the bubble across pages |
| 71 | + }, |
| 72 | + assistantBubble: { |
| 73 | + backgroundColor: '#f3f4f6', |
| 74 | + color: '#1f2937', |
| 75 | + padding: 12, |
| 76 | + borderRadius: 18, |
| 77 | + borderBottomLeftRadius: 4, |
| 78 | + break: false, // Prevent breaking the bubble across pages |
| 79 | + }, |
| 80 | + messageText: { |
| 81 | + fontSize: 11, |
| 82 | + lineHeight: 1.5, |
| 83 | + fontFamily: 'Helvetica', |
| 84 | + }, |
| 85 | + roleLabel: { |
| 86 | + fontSize: 9, |
| 87 | + fontWeight: 'bold', |
| 88 | + color: '#6b7280', |
| 89 | + marginBottom: 4, |
| 90 | + textTransform: 'uppercase', |
| 91 | + letterSpacing: 0.5, |
| 92 | + fontFamily: 'Helvetica-Bold', |
| 93 | + }, |
| 94 | + timestamp: { |
| 95 | + fontSize: 8, |
| 96 | + color: '#9ca3af', |
| 97 | + marginTop: 4, |
| 98 | + textAlign: 'right', |
| 99 | + fontFamily: 'Helvetica', |
| 100 | + }, |
| 101 | + footer: { |
| 102 | + position: 'absolute', |
| 103 | + bottom: 30, |
| 104 | + left: 40, |
| 105 | + right: 40, |
| 106 | + textAlign: 'center', |
| 107 | + color: '#9ca3af', |
| 108 | + fontSize: 8, |
| 109 | + borderTop: '1 solid #e5e7eb', |
| 110 | + paddingTop: 10, |
| 111 | + fontFamily: 'Helvetica', |
| 112 | + }, |
| 113 | + pageNumber: { |
| 114 | + position: 'absolute', |
| 115 | + fontSize: 8, |
| 116 | + bottom: 20, |
| 117 | + left: 0, |
| 118 | + right: 0, |
| 119 | + textAlign: 'center', |
| 120 | + color: '#9ca3af', |
| 121 | + fontFamily: 'Helvetica', |
| 122 | + }, |
| 123 | +}); |
| 124 | + |
| 125 | +interface ChatPDFDocumentProps { |
| 126 | + messages: Message[]; |
| 127 | + chatbot: ChatbotConfig; |
| 128 | + timestamp: string; |
| 129 | +} |
| 130 | + |
| 131 | +const ChatPDFDocument: React.FC<ChatPDFDocumentProps> = ({ |
| 132 | + messages, |
| 133 | + chatbot, |
| 134 | + timestamp, |
| 135 | +}) => { |
| 136 | + const formatMessageContent = (content: string) => { |
| 137 | + // Remove markdown formatting for PDF |
| 138 | + return content |
| 139 | + .replace(/\*\*(.*?)\*\*/g, '$1') // Remove bold |
| 140 | + .replace(/\*(.*?)\*/g, '$1') // Remove italic |
| 141 | + .replace(/```[\s\S]*?```/g, '[Code Block]') // Replace code blocks |
| 142 | + .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1') // Remove links but keep text |
| 143 | + .replace(/#{1,6}\s/g, '') // Remove headers |
| 144 | + .replace(/\【.*?】/g, '') // Remove any special annotations |
| 145 | + .trim(); // Clean up whitespace |
| 146 | + }; |
| 147 | + |
| 148 | + return ( |
| 149 | + <Document> |
| 150 | + <Page size="A4" style={styles.page}> |
| 151 | + {/* Header */} |
| 152 | + <View style={styles.header}> |
| 153 | + <Text style={styles.title}>Chat Conversation</Text> |
| 154 | + <Text style={styles.subtitle}> |
| 155 | + {chatbot.chatTitle || chatbot.name} |
| 156 | + </Text> |
| 157 | + <Text style={styles.subtitle}>Exported on {timestamp}</Text> |
| 158 | + </View> |
| 159 | + |
| 160 | + {/* Chat Content */} |
| 161 | + <View style={styles.chatContainer}> |
| 162 | + {/* Welcome Message */} |
| 163 | + <View |
| 164 | + style={[styles.messageContainer, styles.assistantMessage]} |
| 165 | + wrap={false} |
| 166 | + > |
| 167 | + <Text style={styles.roleLabel}>Assistant</Text> |
| 168 | + <View style={styles.assistantBubble}> |
| 169 | + <Text style={styles.messageText}> |
| 170 | + {formatMessageContent(chatbot.welcomeMessage)} |
| 171 | + </Text> |
| 172 | + </View> |
| 173 | + </View> |
| 174 | + |
| 175 | + {/* Chat Messages */} |
| 176 | + {messages.map((message, index) => ( |
| 177 | + <View |
| 178 | + key={`message-${index}`} |
| 179 | + style={[ |
| 180 | + styles.messageContainer, |
| 181 | + message.role === 'user' |
| 182 | + ? styles.userMessage |
| 183 | + : styles.assistantMessage, |
| 184 | + ]} |
| 185 | + wrap={false} // Prevent individual messages from breaking across pages |
| 186 | + > |
| 187 | + <Text style={styles.roleLabel}> |
| 188 | + {message.role === 'user' ? 'You' : 'Assistant'} |
| 189 | + </Text> |
| 190 | + <View |
| 191 | + style={ |
| 192 | + message.role === 'user' |
| 193 | + ? styles.userBubble |
| 194 | + : styles.assistantBubble |
| 195 | + } |
| 196 | + > |
| 197 | + <Text style={styles.messageText}> |
| 198 | + {formatMessageContent(message.content)} |
| 199 | + </Text> |
| 200 | + </View> |
| 201 | + </View> |
| 202 | + ))} |
| 203 | + </View> |
| 204 | + |
| 205 | + {/* Footer */} |
| 206 | + <View style={styles.footer}> |
| 207 | + <Text> |
| 208 | + Generated by {chatbot.name || 'OpenAssistantGPT'} -{' '} |
| 209 | + {chatbot.footerTextName || 'OpenAssistantGPT'} |
| 210 | + </Text> |
| 211 | + </View> |
| 212 | + |
| 213 | + {/* Page Number */} |
| 214 | + <Text |
| 215 | + style={styles.pageNumber} |
| 216 | + render={({ pageNumber, totalPages }) => |
| 217 | + `Page ${pageNumber} of ${totalPages}` |
| 218 | + } |
| 219 | + fixed |
| 220 | + /> |
| 221 | + </Page> |
| 222 | + </Document> |
| 223 | + ); |
| 224 | +}; |
| 225 | + |
| 226 | +export const generateChatPDF = async ( |
| 227 | + messages: Message[], |
| 228 | + chatbot: ChatbotConfig, |
| 229 | +): Promise<Blob> => { |
| 230 | + const timestamp = new Date().toLocaleString(); |
| 231 | + |
| 232 | + const doc = ( |
| 233 | + <ChatPDFDocument |
| 234 | + messages={messages} |
| 235 | + chatbot={chatbot} |
| 236 | + timestamp={timestamp} |
| 237 | + /> |
| 238 | + ) as React.ReactElement; |
| 239 | + |
| 240 | + const pdfBlob = await pdf(doc).toBlob(); |
| 241 | + return pdfBlob; |
| 242 | +}; |
| 243 | + |
| 244 | +export default ChatPDFDocument; |
0 commit comments