@@ -912,15 +912,15 @@ export function DocumentDetailSheet({
912912
913913 { /* Chat Tab */ }
914914 < TabsContent value = "chat" className = "absolute inset-0 m-0 p-4 flex flex-col data-[state=inactive]:hidden" >
915- < Card className = "flex-1 flex flex-col" >
916- < CardHeader className = "pb-3" >
915+ < Card className = "h-full flex flex-col" >
916+ < CardHeader className = "pb-3 flex-shrink-0 " >
917917 < CardTitle className = "text-lg" > Chat with Document</ CardTitle >
918918 < CardDescription >
919919 Ask questions about the document content
920920 </ CardDescription >
921921 </ CardHeader >
922- < CardContent className = "flex-1 flex flex-col" >
923- < ScrollArea className = "flex-1 mb-4" >
922+ < CardContent className = "flex-1 flex flex-col min-h-0 pb-4 " >
923+ < div className = "flex-1 overflow-y-auto mb-4 border rounded-lg p-3 bg-muted/20 " >
924924 < div className = "space-y-4" >
925925 { chatMessages . length === 0 ? (
926926 < div className = "text-center py-8 text-muted-foreground" >
@@ -934,27 +934,35 @@ export function DocumentDetailSheet({
934934 className = { `flex ${ msg . role === "user" ? "justify-end" : "justify-start" } ` }
935935 >
936936 < div
937- className = { `max-w-[80 %] p-3 rounded-lg ${
937+ className = { `max-w-[85 %] p-3 rounded-lg ${
938938 msg . role === "user"
939939 ? "bg-primary text-primary-foreground"
940- : "bg-muted "
940+ : "bg-background border shadow-sm "
941941 } `}
942942 >
943- { msg . content }
943+ { msg . role === "assistant" ? (
944+ < div className = "prose prose-sm dark:prose-invert max-w-none [&>*:first-child]:mt-0 [&>*:last-child]:mb-0 prose-table:text-xs prose-th:px-2 prose-td:px-2 prose-th:py-1 prose-td:py-1 prose-table:border prose-th:border prose-td:border" >
945+ < ReactMarkdown remarkPlugins = { [ remarkGfm ] } >
946+ { msg . content }
947+ </ ReactMarkdown >
948+ </ div >
949+ ) : (
950+ < span className = "whitespace-pre-wrap" > { msg . content } </ span >
951+ ) }
944952 </ div >
945953 </ div >
946954 ) )
947955 ) }
948956 { isSending && (
949957 < div className = "flex justify-start" >
950- < div className = "bg-muted p-3 rounded-lg" >
958+ < div className = "bg-background border shadow-sm p-3 rounded-lg" >
951959 < Loader2 className = "h-4 w-4 animate-spin" />
952960 </ div >
953961 </ div >
954962 ) }
955963 </ div >
956- </ ScrollArea >
957- < div className = "flex gap-2" >
964+ </ div >
965+ < div className = "flex gap-2 flex-shrink-0 " >
958966 < Input
959967 placeholder = "Ask a question..."
960968 value = { chatInput }
0 commit comments