Merge branch 'main' into embedding-tooltip
This commit is contained in:
Mike Fortman
GitHub
commit
7232d8ea23
8 changed files with 320 additions and 219 deletions
44
.env.example
44
.env.example
|
|
@ -1,42 +1,60 @@
|
|||
# Ingestion Configuration
|
||||
# Set to true to disable Langflow ingestion and use traditional OpenRAG processor
|
||||
# If unset or false, Langflow pipeline will be used (default: upload -> ingest -> delete)
|
||||
# Set to true to disable Langflow ingestion and use the traditional OpenRAG processor.
|
||||
# If unset or false, the Langflow pipeline is used (default: upload -> ingest -> delete).
|
||||
DISABLE_INGEST_WITH_LANGFLOW=false
|
||||
# make one like so https://docs.langflow.org/api-keys-and-authentication#langflow-secret-key
|
||||
|
||||
# Create a Langflow secret key:
|
||||
# https://docs.langflow.org/api-keys-and-authentication#langflow-secret-key
|
||||
LANGFLOW_SECRET_KEY=
|
||||
|
||||
# flow ids for chat and ingestion flows
|
||||
|
||||
# Flow IDs for chat and ingestion
|
||||
LANGFLOW_CHAT_FLOW_ID=1098eea1-6649-4e1d-aed1-b77249fb8dd0
|
||||
LANGFLOW_INGEST_FLOW_ID=5488df7c-b93f-4f87-a446-b67028bc0813
|
||||
# Ingest flow using docling
|
||||
# Ingest flow using Docling
|
||||
# LANGFLOW_INGEST_FLOW_ID=1402618b-e6d1-4ff2-9a11-d6ce71186915
|
||||
NUDGES_FLOW_ID=ebc01d31-1976-46ce-a385-b0240327226c
|
||||
|
||||
# Set a strong admin password for OpenSearch; a bcrypt hash is generated at
|
||||
# container startup from this value. Do not commit real secrets.
|
||||
# must match the hashed password in secureconfig, must change for secure deployment!!!
|
||||
|
||||
# OpenSearch Auth
|
||||
# Set a strong admin password for OpenSearch.
|
||||
# A bcrypt hash is generated at container startup from this value.
|
||||
# Do not commit real secrets.
|
||||
# Must be changed for secure deployments.
|
||||
OPENSEARCH_PASSWORD=
|
||||
|
||||
# make here https://console.cloud.google.com/apis/credentials
|
||||
|
||||
# Google OAuth
|
||||
# Create credentials here:
|
||||
# https://console.cloud.google.com/apis/credentials
|
||||
GOOGLE_OAUTH_CLIENT_ID=
|
||||
GOOGLE_OAUTH_CLIENT_SECRET=
|
||||
|
||||
# Azure app registration credentials for SharePoint/OneDrive
|
||||
|
||||
# Microsoft (SharePoint/OneDrive) OAuth
|
||||
# Azure app registration credentials.
|
||||
MICROSOFT_GRAPH_OAUTH_CLIENT_ID=
|
||||
MICROSOFT_GRAPH_OAUTH_CLIENT_SECRET=
|
||||
|
||||
# OPTIONAL: dns routable from google (etc.) to handle continous ingest (something like ngrok works). This enables continous ingestion
|
||||
|
||||
# Webhooks (optional)
|
||||
# Public, DNS-resolvable base URL (e.g., via ngrok) for continuous ingestion.
|
||||
WEBHOOK_BASE_URL=
|
||||
|
||||
|
||||
# API Keys
|
||||
OPENAI_API_KEY=
|
||||
|
||||
AWS_ACCESS_KEY_ID=
|
||||
AWS_SECRET_ACCESS_KEY=
|
||||
|
||||
# OPTIONAL url for openrag link to langflow in the UI
|
||||
|
||||
# Langflow UI URL (optional)
|
||||
# Public URL to link OpenRAG to Langflow in the UI.
|
||||
LANGFLOW_PUBLIC_URL=
|
||||
|
||||
# Langflow auth
|
||||
|
||||
# Langflow Auth
|
||||
LANGFLOW_AUTO_LOGIN=False
|
||||
LANGFLOW_SUPERUSER=
|
||||
LANGFLOW_SUPERUSER_PASSWORD=
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Loader2, Plus } from "lucide-react";
|
||||
import { Plus } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import {
|
||||
useGetFiltersSearchQuery,
|
||||
|
|
@ -65,97 +64,102 @@ export function KnowledgeFilterList({
|
|||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col gap-2 px-3 !mb-12 mt-0 h-full overflow-y-auto">
|
||||
<div className="flex items-center w-full justify-between pl-3">
|
||||
<div className="text-sm font-medium text-muted-foreground">
|
||||
Knowledge Filters
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleCreateNew}
|
||||
title="Create New Filter"
|
||||
className="!h-8 w-8 px-0 text-muted-foreground"
|
||||
>
|
||||
<Plus className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center p-4">
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
<span className="ml-2 text-sm text-muted-foreground">
|
||||
Loading...
|
||||
</span>
|
||||
</div>
|
||||
) : filters.length === 0 ? (
|
||||
<div className="py-2 px-4 text-sm text-muted-foreground">
|
||||
{searchQuery ? "No filters found" : "No saved filters"}
|
||||
</div>
|
||||
) : (
|
||||
filters.map((filter) => (
|
||||
<div
|
||||
key={filter.id}
|
||||
onClick={() => handleFilterSelect(filter)}
|
||||
className={cn(
|
||||
"flex items-center gap-3 px-3 py-2 w-full rounded-lg hover:bg-accent hover:text-accent-foreground cursor-pointer group transition-colors",
|
||||
selectedFilter?.id === filter.id &&
|
||||
"active bg-accent text-accent-foreground"
|
||||
)}
|
||||
<div className="flex-1 min-h-0 flex flex-col">
|
||||
<div className="px-3 flex-1 min-h-0 flex flex-col">
|
||||
<div className="flex-shrink-0">
|
||||
<div className="flex items-center justify-between mb-3 ml-3 mr-2">
|
||||
<h3 className="text-xs font-medium text-muted-foreground">
|
||||
Knowledge Filters
|
||||
</h3>
|
||||
<button
|
||||
type="button"
|
||||
className="p-1 hover:bg-accent rounded"
|
||||
onClick={handleCreateNew}
|
||||
title="Create New Filter"
|
||||
>
|
||||
<div className="flex flex-col gap-1 flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
{(() => {
|
||||
const parsed = parseQueryData(
|
||||
filter.query_data
|
||||
) as ParsedQueryData;
|
||||
const Icon = iconKeyToComponent(parsed.icon);
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center justify-center w-5 h-5 rounded flex-shrink-0 transition-colors",
|
||||
filterAccentClasses[parsed.color],
|
||||
parsed.color === "zinc" &&
|
||||
"group-hover:bg-background group-[.active]:bg-background"
|
||||
)}
|
||||
>
|
||||
{Icon && <Icon className="h-3 w-3" />}
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
<div className="text-sm font-medium truncate group-hover:text-accent-foreground">
|
||||
{filter.name}
|
||||
</div>
|
||||
</div>
|
||||
{filter.description && (
|
||||
<div className="text-xs text-muted-foreground line-clamp-2">
|
||||
{filter.description}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{new Date(filter.created_at).toLocaleDateString(undefined, {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
})}
|
||||
</div>
|
||||
<span className="text-xs bg-muted text-muted-foreground px-1 py-0.5 rounded-sm group-hover:bg-background group-[.active]:bg-background transition-colors">
|
||||
{(() => {
|
||||
const dataSources = parseQueryData(filter.query_data)
|
||||
.filters.data_sources;
|
||||
if (dataSources[0] === "*") return "All sources";
|
||||
const count = dataSources.length;
|
||||
return `${count} ${count === 1 ? "source" : "sources"}`;
|
||||
})()}
|
||||
</span>
|
||||
</div>
|
||||
<Plus className="h-4 w-4 text-muted-foreground" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="overflow-y-auto scrollbar-hide space-y-1">
|
||||
{loading ? (
|
||||
<div className="text-[13px] text-muted-foreground p-2 ml-1">
|
||||
Loading...
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
) : filters.length === 0 ? (
|
||||
<div className="text-[13px] text-muted-foreground p-2 ml-1">
|
||||
{searchQuery ? "No filters found" : "No saved filters"}
|
||||
</div>
|
||||
) : (
|
||||
filters.map(filter => (
|
||||
<div
|
||||
key={filter.id}
|
||||
onClick={() => handleFilterSelect(filter)}
|
||||
className={cn(
|
||||
"flex items-center gap-3 px-3 py-2 w-full rounded-lg hover:bg-accent hover:text-accent-foreground cursor-pointer group transition-colors",
|
||||
selectedFilter?.id === filter.id &&
|
||||
"active bg-accent text-accent-foreground"
|
||||
)}
|
||||
>
|
||||
<div className="flex flex-col gap-1 flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
{(() => {
|
||||
const parsed = parseQueryData(
|
||||
filter.query_data
|
||||
) as ParsedQueryData;
|
||||
const Icon = iconKeyToComponent(parsed.icon);
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center justify-center w-5 h-5 rounded transition-colors",
|
||||
filterAccentClasses[parsed.color],
|
||||
parsed.color === "zinc" &&
|
||||
"group-hover:bg-background group-[.active]:bg-background"
|
||||
)}
|
||||
>
|
||||
{Icon && <Icon className="h-3 w-3" />}
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
<div className="text-sm font-medium truncate group-hover:text-accent-foreground">
|
||||
{filter.name}
|
||||
</div>
|
||||
</div>
|
||||
{filter.description && (
|
||||
<div className="text-xs text-muted-foreground line-clamp-2">
|
||||
{filter.description}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{new Date(filter.created_at).toLocaleDateString(
|
||||
undefined,
|
||||
{
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
<span className="text-xs bg-muted text-muted-foreground px-1 py-0.5 rounded-sm group-hover:bg-background group-[.active]:bg-background transition-colors">
|
||||
{(() => {
|
||||
const dataSources = parseQueryData(filter.query_data)
|
||||
.filters.data_sources;
|
||||
if (dataSources[0] === "*") return "All sources";
|
||||
const count = dataSources.length;
|
||||
return `${count} ${
|
||||
count === 1 ? "source" : "sources"
|
||||
}`;
|
||||
})()}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{/* Create flow moved to panel create mode */}
|
||||
</div>
|
||||
{/* Create flow moved to panel create mode */}
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,10 @@
|
|||
"use client";
|
||||
|
||||
import { usePathname } from "next/navigation";
|
||||
import { useGetConversationsQuery, type ChatConversation } from "@/app/api/queries/useGetConversationsQuery";
|
||||
import {
|
||||
useGetConversationsQuery,
|
||||
type ChatConversation,
|
||||
} from "@/app/api/queries/useGetConversationsQuery";
|
||||
import { KnowledgeFilterDropdown } from "@/components/knowledge-filter-dropdown";
|
||||
import { ModeToggle } from "@/components/mode-toggle";
|
||||
import { Navigation } from "@/components/navigation";
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ import {
|
|||
FileText,
|
||||
Library,
|
||||
MessageSquare,
|
||||
MoreHorizontal,
|
||||
Plus,
|
||||
Settings2,
|
||||
Trash2,
|
||||
|
|
@ -111,7 +110,7 @@ export function Navigation({
|
|||
) {
|
||||
// Filter out the deleted conversation and find the next one
|
||||
const remainingConversations = conversations.filter(
|
||||
(conv) => conv.response_id !== conversationToDelete.response_id,
|
||||
conv => conv.response_id !== conversationToDelete.response_id
|
||||
);
|
||||
|
||||
if (remainingConversations.length > 0) {
|
||||
|
|
@ -132,7 +131,7 @@ export function Navigation({
|
|||
setDeleteModalOpen(false);
|
||||
setConversationToDelete(null);
|
||||
},
|
||||
onError: (error) => {
|
||||
onError: error => {
|
||||
toast.error(`Failed to delete conversation: ${error.message}`);
|
||||
},
|
||||
});
|
||||
|
|
@ -164,7 +163,7 @@ export function Navigation({
|
|||
window.dispatchEvent(
|
||||
new CustomEvent("fileUploadStart", {
|
||||
detail: { filename: file.name },
|
||||
}),
|
||||
})
|
||||
);
|
||||
|
||||
try {
|
||||
|
|
@ -188,7 +187,7 @@ export function Navigation({
|
|||
filename: file.name,
|
||||
error: "Failed to process document",
|
||||
},
|
||||
}),
|
||||
})
|
||||
);
|
||||
|
||||
// Trigger loading end event
|
||||
|
|
@ -208,7 +207,7 @@ export function Navigation({
|
|||
window.dispatchEvent(
|
||||
new CustomEvent("fileUploaded", {
|
||||
detail: { file, result },
|
||||
}),
|
||||
})
|
||||
);
|
||||
|
||||
// Trigger loading end event
|
||||
|
|
@ -222,7 +221,7 @@ export function Navigation({
|
|||
window.dispatchEvent(
|
||||
new CustomEvent("fileUploadError", {
|
||||
detail: { filename: file.name, error: "Failed to process document" },
|
||||
}),
|
||||
})
|
||||
);
|
||||
}
|
||||
};
|
||||
|
|
@ -244,7 +243,7 @@ export function Navigation({
|
|||
|
||||
const handleDeleteConversation = (
|
||||
conversation: ChatConversation,
|
||||
event?: React.MouseEvent,
|
||||
event?: React.MouseEvent
|
||||
) => {
|
||||
if (event) {
|
||||
event.preventDefault();
|
||||
|
|
@ -256,7 +255,7 @@ export function Navigation({
|
|||
|
||||
const handleContextMenuAction = (
|
||||
action: string,
|
||||
conversation: ChatConversation,
|
||||
conversation: ChatConversation
|
||||
) => {
|
||||
switch (action) {
|
||||
case "delete":
|
||||
|
|
@ -332,33 +331,33 @@ export function Navigation({
|
|||
|
||||
return (
|
||||
<div className="flex flex-col h-full bg-background">
|
||||
<div className="px-3 py-2 flex-shrink-0">
|
||||
<div className="px-4 py-2 flex-shrink-0">
|
||||
<div className="space-y-1">
|
||||
{routes.map((route) => (
|
||||
{routes.map(route => (
|
||||
<div key={route.href}>
|
||||
<Link
|
||||
href={route.href}
|
||||
className={cn(
|
||||
"text-sm group flex p-3 w-full justify-start font-medium cursor-pointer hover:bg-accent hover:text-accent-foreground rounded-lg transition-all",
|
||||
"text-[13px] group flex p-3 w-full justify-start font-medium cursor-pointer hover:bg-accent hover:text-accent-foreground rounded-lg transition-all",
|
||||
route.active
|
||||
? "bg-accent text-accent-foreground shadow-sm"
|
||||
: "text-foreground hover:text-accent-foreground",
|
||||
: "text-foreground hover:text-accent-foreground"
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center flex-1">
|
||||
<route.icon
|
||||
className={cn(
|
||||
"h-4 w-4 mr-3 shrink-0",
|
||||
"h-[18px] w-[18px] mr-2 shrink-0",
|
||||
route.active
|
||||
? "text-accent-foreground"
|
||||
: "text-muted-foreground group-hover:text-foreground",
|
||||
? "text-muted-foreground"
|
||||
: "text-muted-foreground group-hover:text-muted-foreground"
|
||||
)}
|
||||
/>
|
||||
{route.label}
|
||||
</div>
|
||||
</Link>
|
||||
{route.label === "Settings" && (
|
||||
<div className="mx-3 my-2 border-t border-border/40" />
|
||||
<div className="my-2 border-t border-border" />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
|
@ -374,11 +373,11 @@ export function Navigation({
|
|||
|
||||
{/* Chat Page Specific Sections */}
|
||||
{isOnChatPage && (
|
||||
<div className="flex-1 min-h-0 flex flex-col">
|
||||
<div className="flex-1 min-h-0 flex flex-col px-4">
|
||||
{/* Conversations Section */}
|
||||
<div className="px-3 flex-shrink-0">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h3 className="text-sm font-medium text-muted-foreground">
|
||||
<div className="flex-shrink-0">
|
||||
<div className="flex items-center justify-between mb-3 mx-3">
|
||||
<h3 className="text-xs font-medium text-muted-foreground">
|
||||
Conversations
|
||||
</h3>
|
||||
<button
|
||||
|
|
@ -393,11 +392,11 @@ export function Navigation({
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="px-3 flex-1 min-h-0 flex flex-col">
|
||||
<div className="flex-1 min-h-0 flex flex-col">
|
||||
{/* Conversations List - grows naturally, doesn't fill all space */}
|
||||
<div className="flex-shrink-0 overflow-y-auto scrollbar-hide space-y-1 max-h-full">
|
||||
{loadingNewConversation || isConversationsLoading ? (
|
||||
<div className="text-sm text-muted-foreground p-2">
|
||||
<div className="text-[13px] text-muted-foreground p-2">
|
||||
Loading...
|
||||
</div>
|
||||
) : (
|
||||
|
|
@ -406,7 +405,7 @@ export function Navigation({
|
|||
{placeholderConversation && (
|
||||
<button
|
||||
type="button"
|
||||
className="w-full p-2 rounded-lg bg-accent/50 border border-dashed border-accent cursor-pointer group text-left"
|
||||
className="w-full px-3 rounded-lg bg-accent border border-dashed border-accent cursor-pointer group text-left h-[44px]"
|
||||
onClick={() => {
|
||||
// Don't load placeholder as a real conversation, just focus the input
|
||||
if (typeof window !== "undefined") {
|
||||
|
|
@ -414,7 +413,7 @@ export function Navigation({
|
|||
}
|
||||
}}
|
||||
>
|
||||
<div className="text-sm font-medium text-foreground mb-1 truncate">
|
||||
<div className="text-[13px] font-medium text-foreground truncate">
|
||||
{placeholderConversation.title}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
|
|
@ -425,15 +424,15 @@ export function Navigation({
|
|||
|
||||
{/* Show regular conversations */}
|
||||
{conversations.length === 0 && !placeholderConversation ? (
|
||||
<div className="text-sm text-muted-foreground p-2">
|
||||
<div className="text-[13px] text-muted-foreground py-2 pl-3">
|
||||
No conversations yet
|
||||
</div>
|
||||
) : (
|
||||
conversations.map((conversation) => (
|
||||
conversations.map(conversation => (
|
||||
<button
|
||||
key={conversation.response_id}
|
||||
type="button"
|
||||
className={`w-full px-3 pr-2 h-11 rounded-lg group relative text-left ${
|
||||
className={`w-full px-3 h-11 rounded-lg group relative text-left ${
|
||||
loading
|
||||
? "opacity-50 cursor-not-allowed"
|
||||
: "hover:bg-accent cursor-pointer"
|
||||
|
|
@ -456,17 +455,22 @@ export function Navigation({
|
|||
</div>
|
||||
</div>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger disabled={loading || deleteSessionMutation.isPending} asChild>
|
||||
<DropdownMenuTrigger
|
||||
disabled={
|
||||
loading || deleteSessionMutation.isPending
|
||||
}
|
||||
asChild
|
||||
>
|
||||
<div
|
||||
className="opacity-0 group-hover:opacity-100 data-[state=open]:opacity-100 data-[state=open]:text-foreground transition-opacity p-1 hover:bg-accent rounded text-muted-foreground hover:text-foreground ml-2 flex-shrink-0 cursor-pointer"
|
||||
title="More options"
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={(e) => {
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
onKeyDown={e => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}
|
||||
|
|
@ -479,14 +483,14 @@ export function Navigation({
|
|||
side="bottom"
|
||||
align="end"
|
||||
className="w-48"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
<DropdownMenuItem
|
||||
onClick={(e) => {
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
handleContextMenuAction(
|
||||
"delete",
|
||||
conversation,
|
||||
conversation
|
||||
);
|
||||
}}
|
||||
className="cursor-pointer text-destructive focus:text-destructive"
|
||||
|
|
@ -506,8 +510,8 @@ export function Navigation({
|
|||
|
||||
{/* Conversation Knowledge Section - appears right after last conversation */}
|
||||
<div className="flex-shrink-0 mt-4">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h3 className="text-sm font-medium text-muted-foreground">
|
||||
<div className="flex items-center justify-between mb-3 mx-3">
|
||||
<h3 className="text-xs font-medium text-muted-foreground">
|
||||
Conversation knowledge
|
||||
</h3>
|
||||
<button
|
||||
|
|
@ -526,16 +530,16 @@ export function Navigation({
|
|||
className="hidden"
|
||||
accept=".pdf,.doc,.docx,.txt,.md,.rtf,.odt"
|
||||
/>
|
||||
<div className="overflow-y-auto scrollbar-hide space-y-1 max-h-40">
|
||||
<div className="overflow-y-auto scrollbar-hide space-y-1">
|
||||
{conversationDocs.length === 0 ? (
|
||||
<div className="text-sm text-muted-foreground p-2">
|
||||
<div className="text-[13px] text-muted-foreground py-2 px-3">
|
||||
No documents yet
|
||||
</div>
|
||||
) : (
|
||||
conversationDocs.map((doc) => (
|
||||
conversationDocs.map(doc => (
|
||||
<div
|
||||
key={`${doc.filename}-${doc.uploadTime.getTime()}`}
|
||||
className="p-2 rounded-lg hover:bg-accent cursor-pointer group flex items-center"
|
||||
className="w-full px-3 h-11 rounded-lg hover:bg-accent cursor-pointer group flex items-center"
|
||||
>
|
||||
<FileText className="h-4 w-4 mr-2 text-muted-foreground flex-shrink-0" />
|
||||
<div className="flex-1 min-w-0">
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
|
|||
|
||||
// Calculate active tasks for the bell icon
|
||||
const activeTasks = tasks.filter(
|
||||
(task) =>
|
||||
task =>
|
||||
task.status === "pending" ||
|
||||
task.status === "running" ||
|
||||
task.status === "processing"
|
||||
|
|
@ -84,16 +84,16 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
|
|||
// For all other pages, render with Langflow-styled navigation and task menu
|
||||
return (
|
||||
<div className="h-full relative">
|
||||
<header className="header-arrangement bg-background sticky top-0 z-50">
|
||||
<div className="header-start-display px-4">
|
||||
<header className="header-arrangement bg-background sticky top-0 z-50 h-10">
|
||||
<div className="header-start-display px-[16px]">
|
||||
{/* Logo/Title */}
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center">
|
||||
<Logo className="fill-primary" width={24} height={22} />
|
||||
<span className="text-lg font-semibold">OpenRAG</span>
|
||||
<span className="text-lg font-semibold pl-2.5">OpenRAG</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="header-end-division">
|
||||
<div className="header-end-display">
|
||||
<div className="justify-end flex items-center">
|
||||
{/* Knowledge Filter Dropdown */}
|
||||
{/* <KnowledgeFilterDropdown
|
||||
selectedFilter={selectedFilter}
|
||||
|
|
@ -107,26 +107,24 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
|
|||
{/* <DiscordLink inviteCode="EqksyE2EX9" /> */}
|
||||
|
||||
{/* Task Notification Bell */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="iconSm"
|
||||
<button
|
||||
onClick={toggleMenu}
|
||||
className="relative"
|
||||
className="h-8 w-8 hover:bg-muted rounded-lg flex items-center justify-center"
|
||||
>
|
||||
<Bell className="h-4 w-4 text-muted-foreground" />
|
||||
<Bell size={16} className="text-muted-foreground" />
|
||||
{activeTasks.length > 0 && (
|
||||
<div className="header-notifications" />
|
||||
)}
|
||||
</Button>
|
||||
</button>
|
||||
|
||||
{/* Separator */}
|
||||
<div className="w-px h-6 bg-border" />
|
||||
<div className="w-px h-6 bg-border mx-3" />
|
||||
|
||||
<UserNav />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div className="side-bar-arrangement bg-background fixed left-0 top-[53px] bottom-0 md:flex hidden">
|
||||
<div className="side-bar-arrangement bg-background fixed left-0 top-[40px] bottom-0 md:flex hidden pt-1">
|
||||
<Navigation
|
||||
conversations={conversations}
|
||||
isConversationsLoading={isConversationsLoading}
|
||||
|
|
|
|||
68
frontend/src/components/ui/buttonTheme.tsx
Normal file
68
frontend/src/components/ui/buttonTheme.tsx
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
import { useEffect, useState } from "react";
|
||||
import { Monitor, Moon, Sun } from "lucide-react";
|
||||
import { useTheme } from "next-themes";
|
||||
|
||||
export const ThemeButtons = () => {
|
||||
const { theme, setTheme } = useTheme();
|
||||
const [selectedTheme, setSelectedTheme] = useState("dark");
|
||||
|
||||
// Sync local state with theme context
|
||||
useEffect(() => {
|
||||
if (theme) {
|
||||
setSelectedTheme(theme);
|
||||
}
|
||||
}, [theme]);
|
||||
|
||||
const handleThemeChange = (newTheme: string) => {
|
||||
setSelectedTheme(newTheme);
|
||||
setTheme(newTheme);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex items-center border border-border rounded-full">
|
||||
{/* Light Theme Button */}
|
||||
<button
|
||||
className={`h-6 w-6 rounded-full flex items-center justify-center ${
|
||||
selectedTheme === "light"
|
||||
? "bg-amber-400 text-primary"
|
||||
: "text-foreground hover:bg-amber-400 hover:text-background"
|
||||
}`}
|
||||
onClick={() => handleThemeChange("light")}
|
||||
data-testid="menu_light_button"
|
||||
id="menu_light_button"
|
||||
>
|
||||
<Sun className="h-4 w-4 rounded-full" />
|
||||
</button>
|
||||
|
||||
{/* Dark Theme Button */}
|
||||
<button
|
||||
className={`h-6 w-6 rounded-full flex items-center justify-center ${
|
||||
selectedTheme === "dark"
|
||||
? "bg-purple-500/20 text-purple-500 hover:bg-purple-500/20 hover:text-purple-500"
|
||||
: "text-foreground hover:bg-purple-500/20 hover:text-purple-500"
|
||||
}`}
|
||||
onClick={() => handleThemeChange("dark")}
|
||||
data-testid="menu_dark_button"
|
||||
id="menu_dark_button"
|
||||
>
|
||||
<Moon className="h-4 w-4" />
|
||||
</button>
|
||||
|
||||
{/* System Theme Button */}
|
||||
<button
|
||||
className={`h-6 w-6 rounded-full flex items-center justify-center ${
|
||||
selectedTheme === "system"
|
||||
? "bg-foreground text-background"
|
||||
: "hover:bg-foreground hover:text-background"
|
||||
}`}
|
||||
onClick={() => handleThemeChange("system")}
|
||||
data-testid="menu_system_button"
|
||||
id="menu_system_button"
|
||||
>
|
||||
<Monitor className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ThemeButtons;
|
||||
|
|
@ -1,94 +1,100 @@
|
|||
"use client"
|
||||
"use client";
|
||||
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu"
|
||||
import { useAuth } from "@/contexts/auth-context"
|
||||
import { LogIn, LogOut, User, Moon, Sun, ChevronsUpDown } from "lucide-react"
|
||||
import { useTheme } from "next-themes"
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { useAuth } from "@/contexts/auth-context";
|
||||
import { LogOut, User, Moon, Sun, ChevronsUpDown } from "lucide-react";
|
||||
import { useTheme } from "next-themes";
|
||||
import ThemeButtons from "./ui/buttonTheme";
|
||||
|
||||
export function UserNav() {
|
||||
const { user, isLoading, isAuthenticated, isNoAuthMode, login, logout } = useAuth()
|
||||
const { theme, setTheme } = useTheme()
|
||||
const { user, isLoading, isAuthenticated, isNoAuthMode, login, logout } =
|
||||
useAuth();
|
||||
const { theme, setTheme } = useTheme();
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="h-8 w-8 rounded-full bg-muted animate-pulse" />
|
||||
)
|
||||
return <div className="h-8 w-8 rounded-full bg-muted animate-pulse" />;
|
||||
}
|
||||
|
||||
// In no-auth mode, show a simple theme switcher instead of auth UI
|
||||
if (isNoAuthMode) {
|
||||
return (
|
||||
<Button
|
||||
onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="flex items-center gap-2"
|
||||
<button
|
||||
onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
|
||||
className="flex justify-center items-center gap-2 h-8 w-8 mr-2 rounded-md hover:bg-muted rounded-lg "
|
||||
>
|
||||
{theme === 'dark' ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
|
||||
</Button>
|
||||
)
|
||||
{theme === "dark" ? (
|
||||
<Sun size={16} className="text-muted-foreground" />
|
||||
) : (
|
||||
<Moon size={16} className="text-muted-foreground" />
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
if (!isAuthenticated) {
|
||||
return (
|
||||
<Button
|
||||
onClick={login}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="flex items-center gap-2"
|
||||
<button
|
||||
onClick={login}
|
||||
className="flex items-center gap-2 h-7 px-3 mr-2 rounded-md bg-primary hover:bg-primary/90 text-primary-foreground text-[13px] line-height-[16px]"
|
||||
>
|
||||
<LogIn className="h-4 w-4" />
|
||||
Sign In
|
||||
</Button>
|
||||
)
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" className="flex items-center gap-1 h-8 px-1 rounded-full">
|
||||
<Avatar className="h-6 w-6">
|
||||
<AvatarImage src={user?.picture} alt={user?.name} />
|
||||
<AvatarFallback className="text-xs">
|
||||
{user?.name ? user.name.charAt(0).toUpperCase() : <User className="h-3 w-3" />}
|
||||
<button className="hover:bg-accent rounded-lg pl-[4px] p-[3px] flex items-center justify-center">
|
||||
<Avatar className="rounded-md w-7 h-7">
|
||||
<AvatarImage
|
||||
width={16}
|
||||
height={16}
|
||||
src={user?.picture}
|
||||
alt={user?.name}
|
||||
className="rounded-md"
|
||||
/>
|
||||
<AvatarFallback className="text-xs rounded-md">
|
||||
{user?.name ? (
|
||||
user.name.charAt(0).toUpperCase()
|
||||
) : (
|
||||
<User className="h-3 w-3" />
|
||||
)}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<ChevronsUpDown className="h-3 w-3 text-muted-foreground" />
|
||||
</Button>
|
||||
<ChevronsUpDown size={16} className="text-muted-foreground mx-2" />
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="w-56" align="end" forceMount>
|
||||
<DropdownMenuContent className="w-56 p-0" align="end" forceMount>
|
||||
<DropdownMenuLabel className="font-normal">
|
||||
<div className="flex flex-col space-y-1">
|
||||
<div className="flex flex-col space-y-2 px-1 py-1">
|
||||
<p className="text-sm font-medium leading-none">{user?.name}</p>
|
||||
<p className="text-xs leading-none text-muted-foreground">
|
||||
{user?.email}
|
||||
</p>
|
||||
</div>
|
||||
</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
|
||||
{theme === "light" ? (
|
||||
<Moon className="mr-2 h-4 w-4" />
|
||||
) : (
|
||||
<Sun className="mr-2 h-4 w-4" />
|
||||
)}
|
||||
<span>Toggle Theme</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem onClick={logout} className="text-red-600 focus:text-red-600">
|
||||
<LogOut className="mr-2 h-4 w-4" />
|
||||
<span>Log out</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator className="m-0" />
|
||||
<div className="flex items-center justify-between pl-3 pr-2 h-9">
|
||||
<span className="text-sm">Theme</span>
|
||||
<ThemeButtons />
|
||||
</div>
|
||||
<DropdownMenuSeparator className="m-0" />
|
||||
<button
|
||||
onClick={logout}
|
||||
className="flex items-center hover:bg-muted w-full h-9 px-3"
|
||||
>
|
||||
<LogOut className="mr-2 h-4 w-4 text-muted-foreground" />
|
||||
<span className="text-sm">Logout</span>
|
||||
</button>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
)
|
||||
}
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -96,7 +96,7 @@ export function ChatProvider({ children }: ChatProviderProps) {
|
|||
const refreshConversations = useCallback((force = false) => {
|
||||
if (force) {
|
||||
// Immediate refresh for important updates like new conversations
|
||||
setRefreshTrigger((prev) => prev + 1);
|
||||
setRefreshTrigger(prev => prev + 1);
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -107,7 +107,7 @@ export function ChatProvider({ children }: ChatProviderProps) {
|
|||
|
||||
// Set a new timeout to debounce multiple rapid refresh calls
|
||||
refreshTimeoutRef.current = setTimeout(() => {
|
||||
setRefreshTrigger((prev) => prev + 1);
|
||||
setRefreshTrigger(prev => prev + 1);
|
||||
}, 250); // 250ms debounce
|
||||
}, []);
|
||||
|
||||
|
|
@ -123,7 +123,7 @@ export function ChatProvider({ children }: ChatProviderProps) {
|
|||
// Silent refresh - updates data without loading states
|
||||
const refreshConversationsSilent = useCallback(async () => {
|
||||
// Trigger silent refresh that updates conversation data without showing loading states
|
||||
setRefreshTriggerSilent((prev) => prev + 1);
|
||||
setRefreshTriggerSilent(prev => prev + 1);
|
||||
}, []);
|
||||
|
||||
const loadConversation = useCallback((conversation: ConversationData) => {
|
||||
|
|
@ -164,7 +164,7 @@ export function ChatProvider({ children }: ChatProviderProps) {
|
|||
}, [endpoint, refreshConversations]);
|
||||
|
||||
const addConversationDoc = useCallback((filename: string) => {
|
||||
setConversationDocs((prev) => [
|
||||
setConversationDocs(prev => [
|
||||
...prev,
|
||||
{ filename, uploadTime: new Date() },
|
||||
]);
|
||||
|
|
@ -180,7 +180,7 @@ export function ChatProvider({ children }: ChatProviderProps) {
|
|||
setCurrentConversationId(null); // Clear current conversation to indicate new conversation
|
||||
setConversationData(null); // Clear conversation data to prevent reloading
|
||||
// Set the response ID that we're forking from as the previous response ID
|
||||
setPreviousResponseIds((prev) => ({
|
||||
setPreviousResponseIds(prev => ({
|
||||
...prev,
|
||||
[endpoint]: responseId,
|
||||
}));
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue