apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-05-21 18:55:16 +02:00
Code Issues Projects Releases Packages Wiki Activity

add accessibilty

Browse source
This commit is contained in:
CREDO23 2025-10-22 15:35:44 +02:00 • committed by thierryverse
parent 24e366d326
commit 34c07d3699
2 changed files with 88 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

82
surfsense_web/components/chat/ChatInterface.tsx
View file

@ -2,7 +2,7 @@
import { type ChatHandler, ChatSection as LlamaIndexChatSection } from "@llamaindex/chat-ui";
import { PanelRight } from "lucide-react";
import { useState } from "react";
import { createContext, useState } from "react";
import type { ResearchMode } from "@/components/chat";
import { ChatInputUI } from "@/components/chat/ChatInputGroup";
import { ChatMessagesUI } from "@/components/chat/ChatMessages";
@ -20,6 +20,13 @@ interface ChatInterfaceProps {
onSearchModeChange?: (mode: "DOCUMENTS" | "CHUNKS") => void;
}
interface ChatInterfaceContext {
isChatPannelOpen: boolean;
setIsChatPannelOpen: (value: boolean) => void;
}
export const chatInterfaceContext = createContext<ChatInterfaceContext | null>(null);
export default function ChatInterface({
handler,
onDocumentSelectionChange,
@ -30,49 +37,56 @@ export default function ChatInterface({
onSearchModeChange,
}: ChatInterfaceProps) {
const [isChatPannelOpen, setIsChatPannelOpen] = useState(false);
const contextValue = {
isChatPannelOpen,
setIsChatPannelOpen,
};
return (
<LlamaIndexChatSection handler={handler} className="flex h-full">
<div className="flex gap-4 flex-1 w-full">
<div className="flex grow-1 flex-col">
<ChatMessagesUI />
<div className="border-t p-4">
<ChatInputUI
onDocumentSelectionChange={onDocumentSelectionChange}
selectedDocuments={selectedDocuments}
onConnectorSelectionChange={onConnectorSelectionChange}
selectedConnectors={selectedConnectors}
searchMode={searchMode}
onSearchModeChange={onSearchModeChange}
/>
<chatInterfaceContext.Provider value={contextValue}>
<LlamaIndexChatSection handler={handler} className="flex h-full">
<div className="flex gap-4 flex-1 w-full">
<div className="flex grow-1 flex-col">
<ChatMessagesUI />
<div className="border-t p-4">
<ChatInputUI
onDocumentSelectionChange={onDocumentSelectionChange}
selectedDocuments={selectedDocuments}
onConnectorSelectionChange={onConnectorSelectionChange}
selectedConnectors={selectedConnectors}
searchMode={searchMode}
onSearchModeChange={onSearchModeChange}
/>
</div>
</div>
</div>
<div
className={cn(
"border rounded-2xl shrink-0 flex flex-col h-full transition-all",
isChatPannelOpen ? "w-72" : "w-14"
)}
>
<div
className={cn(
"w-full border-b p-2 flex items-center transition-all ",
isChatPannelOpen ? "justify-end" : " justify-center "
"border rounded-2xl shrink-0 flex flex-col h-full transition-all",
isChatPannelOpen ? "w-72" : "w-14"
)}
>
<button
type="button"
onClick={() => setIsChatPannelOpen(!isChatPannelOpen)}
className={cn(" shrink-0 rounded-full p-2 w-fit hover:bg-muted")}
<div
className={cn(
"w-full border-b p-2 flex items-center transition-all ",
isChatPannelOpen ? "justify-end" : " justify-center "
)}
>
<PanelRight className="h-5 w-5" strokeWidth={1.5} />
</button>
</div>
<button
type="button"
onClick={() => setIsChatPannelOpen(!isChatPannelOpen)}
className={cn(" shrink-0 rounded-full p-2 w-fit hover:bg-muted")}
>
<PanelRight className="h-5 w-5" strokeWidth={1.5} />
</button>
</div>
<div className="border-b rounded-lg grow-1">
<ChatPanelContainer />
<div className="border-b rounded-lg grow-1">
<ChatPanelContainer />
</div>
</div>
</div>
</div>
</LlamaIndexChatSection>
</LlamaIndexChatSection>
</chatInterfaceContext.Provider>
);
}

52
surfsense_web/components/chat/ChatPannel/ChatPanelView.tsx
View file

@ -1,21 +1,49 @@
"use client";
import { Pencil, Podcast } from "lucide-react";
import { useContext } from "react";
import { cn } from "@/lib/utils";
import { chatInterfaceContext } from "../ChatInterface";
export default function ChatPanelView() {
const context = useContext(chatInterfaceContext);
if (!context) {
throw new Error("chatInterfaceContext must be used within a ChatProvider");
}
const { isChatPannelOpen, setIsChatPannelOpen } = context;
return (
<div className="w-full">
<div className="w-full h-full p-4 border-b">
<div className=" space-y-3 rounded-xl p-3 bg-gradient-to-r dark:from-slate-400/30 dark:to-slate-800/60">
<div className="w-full flex items-center justify-between">
<Podcast strokeWidth={1} />
<button
type="button"
className="rounded-full p-2 bg-slate-400/30 hover:bg-slate-400/40"
>
<Pencil strokeWidth={1} className="h-4 w-4" />
</button>
<div
className={cn(
"w-full h-full p-4 border-b",
!isChatPannelOpen && "flex items-center justify-center"
)}
>
{isChatPannelOpen ? (
<div className=" space-y-3 rounded-xl p-3 bg-gradient-to-r dark:from-slate-400/30 dark:to-slate-800/60">
<div className="w-full flex items-center justify-between">
<Podcast strokeWidth={1} />
<button
type="button"
title="Edit the prompt"
className="rounded-full p-2 bg-slate-400/30 hover:bg-slate-400/40"
>
<Pencil strokeWidth={1} className="h-4 w-4" />
</button>
</div>
<p>Generate Podcast</p>
</div>
<p> Generate Podcast</p>
</div>
) : (
<button
title="Generate Podcast"
type="button"
onClick={() => setIsChatPannelOpen(!isChatPannelOpen)}
>
<Podcast strokeWidth={1} />
</button>
)}
</div>
</div>
);