@@ -20,7 +20,7 @@ import type { ExecuteConfig, SessionInfo } from "../api/types";
20
20
import { newChatPageUrlStore , newSessionsStore } from "../stores" ;
21
21
import { ChatBar } from "./ChatBar" ;
22
22
import { type ChatMessage , Chats } from "./Chats" ;
23
- import ContextFiltersButton from "./ContextFilters" ;
23
+ import ContextFiltersButton , { ContextFiltersForm } from "./ContextFilters" ;
24
24
import { EmptyStateChatPageContent } from "./EmptyStateChatPageContent" ;
25
25
26
26
export function ChatPageContent ( props : {
@@ -362,69 +362,92 @@ export function ChatPageContent(props: {
362
362
363
363
const showEmptyState = ! userHasSubmittedMessage && messages . length === 0 ;
364
364
365
+ const handleUpdateContextFilters = async (
366
+ values : ContextFilters | undefined ,
367
+ ) => {
368
+ // if session is not yet created, don't need to update sessions - starting a chat will create a session with the context filters
369
+ if ( sessionId ) {
370
+ await updateSession ( {
371
+ authToken : props . authToken ,
372
+ config,
373
+ sessionId,
374
+ contextFilters : values ,
375
+ } ) ;
376
+ }
377
+ } ;
378
+
365
379
return (
366
380
< div className = "flex grow flex-col overflow-hidden" >
367
381
< WalletDisconnectedDialog
368
382
open = { showConnectModal }
369
383
onOpenChange = { setShowConnectModal }
370
384
/>
371
- < header className = "flex justify-start border-b bg-background p-4" >
385
+ < header className = "flex justify-between border-b bg-background p-4 xl:hidden " >
372
386
< ContextFiltersButton
373
387
contextFilters = { contextFilters }
374
388
setContextFilters = { setContextFilters }
375
- updateContextFilters = { async ( values ) => {
376
- // if session is not yet created, don't need to update sessions - starting a chat will create a session with the context filters
377
- if ( sessionId ) {
378
- await updateSession ( {
379
- authToken : props . authToken ,
380
- config,
381
- sessionId,
382
- contextFilters : values ,
383
- } ) ;
384
- }
385
- } }
389
+ updateContextFilters = { handleUpdateContextFilters }
386
390
/>
387
391
</ header >
388
- < div className = "relative flex grow flex-col overflow-hidden rounded-lg pb-6" >
389
- { showEmptyState ? (
390
- < div className = "fade-in-0 container flex max-w-[800px] grow animate-in flex-col justify-center" >
391
- < EmptyStateChatPageContent sendMessage = { handleSendMessage } />
392
- </ div >
393
- ) : (
394
- < div className = "fade-in-0 relative z-[0] flex max-h-full flex-1 animate-in flex-col overflow-hidden" >
395
- < Chats
396
- messages = { messages }
397
- isChatStreaming = { isChatStreaming }
398
- authToken = { props . authToken }
399
- sessionId = { sessionId }
400
- className = "min-w-0 pt-6 pb-32"
401
- twAccount = { props . account }
402
- client = { client }
403
- enableAutoScroll = { enableAutoScroll }
404
- setEnableAutoScroll = { setEnableAutoScroll }
405
- />
406
-
407
- < div className = "container max-w-[800px]" >
408
- < ChatBar
409
- sendMessage = { handleSendMessage }
392
+
393
+ < div className = "flex grow overflow-hidden" >
394
+ < div className = "relative flex grow flex-col overflow-hidden rounded-lg pb-6" >
395
+ { showEmptyState ? (
396
+ < div className = "fade-in-0 container flex max-w-[800px] grow animate-in flex-col justify-center" >
397
+ < EmptyStateChatPageContent sendMessage = { handleSendMessage } />
398
+ </ div >
399
+ ) : (
400
+ < div className = "fade-in-0 relative z-[0] flex max-h-full flex-1 animate-in flex-col overflow-hidden" >
401
+ < Chats
402
+ messages = { messages }
410
403
isChatStreaming = { isChatStreaming }
411
- abortChatStream = { ( ) => {
412
- chatAbortController ?. abort ( ) ;
413
- setChatAbortController ( undefined ) ;
414
- setIsChatStreaming ( false ) ;
415
- // if last message is presence, remove it
416
- if ( messages [ messages . length - 1 ] ?. type === "presence" ) {
417
- setMessages ( ( prev ) => prev . slice ( 0 , - 1 ) ) ;
418
- }
419
- } }
404
+ authToken = { props . authToken }
405
+ sessionId = { sessionId }
406
+ className = "min-w-0 pt-6 pb-32"
407
+ twAccount = { props . account }
408
+ client = { client }
409
+ enableAutoScroll = { enableAutoScroll }
410
+ setEnableAutoScroll = { setEnableAutoScroll }
420
411
/>
412
+
413
+ < div className = "container max-w-[800px]" >
414
+ < ChatBar
415
+ sendMessage = { handleSendMessage }
416
+ isChatStreaming = { isChatStreaming }
417
+ abortChatStream = { ( ) => {
418
+ chatAbortController ?. abort ( ) ;
419
+ setChatAbortController ( undefined ) ;
420
+ setIsChatStreaming ( false ) ;
421
+ // if last message is presence, remove it
422
+ if ( messages [ messages . length - 1 ] ?. type === "presence" ) {
423
+ setMessages ( ( prev ) => prev . slice ( 0 , - 1 ) ) ;
424
+ }
425
+ } }
426
+ />
427
+ </ div >
421
428
</ div >
422
- </ div >
423
- ) }
429
+ ) }
424
430
425
- < p className = "mt-4 text-center text-muted-foreground text-xs opacity-75 lg:text-sm" >
426
- Nebula may make mistakes. Please use with discretion
427
- </ p >
431
+ < p className = "mt-4 text-center text-muted-foreground text-xs opacity-75 lg:text-sm" >
432
+ Nebula may make mistakes. Please use with discretion
433
+ </ p >
434
+ </ div >
435
+ < aside className = "hidden w-[360px] flex-col border-l bg-card pt-4 xl:flex" >
436
+ < div className = "px-4" >
437
+ < h3 className = "font-semibold text-lg tracking-tight" > Context</ h3 >
438
+ < p className = "mb-5 text-muted-foreground text-sm" >
439
+ Provide context to Nebula for your prompts
440
+ </ p >
441
+ </ div >
442
+ < ContextFiltersForm
443
+ contextFilters = { contextFilters }
444
+ setContextFilters = { setContextFilters }
445
+ modal = { undefined }
446
+ updateContextFilters = { handleUpdateContextFilters }
447
+ formBodyClassName = "px-4"
448
+ formActionContainerClassName = "px-4 border-t-0 pt-0 bg-transparent"
449
+ />
450
+ </ aside >
428
451
</ div >
429
452
</ div >
430
453
) ;
0 commit comments