- {}}
- activeModel={activeModel}
- availableModels={availableModels}
- setActiveModel={setActiveModel}
- setOllama={setOllama}
+
+
+ setSelectedDocuments([])}
+ setDocumentEntries={(documents) => {
+ if (Array.isArray(documents) && documents.length === 0) {
+ setSelectedDocuments([]);
+ } else if (typeof documents === 'string' && arguments.length > 1) {
+ const guid = arguments[1];
+ const newEntry = {
+ filename: documents,
+ guid: guid,
+ selected: true
+ };
+ setSelectedDocuments([newEntry]);
+ } else if (Array.isArray(documents)) {
+ setSelectedDocuments(documents);
+ } else {
+ if (typeof documents === 'string') {
+ console.error("Expected DocumentEntry, received string:", documents);
+ setSelectedDocuments([]);
+ } else {
+ setSelectedDocuments([documents]);
+ }
+ }
+ }}
+ toggleMenuState={toggleMenuState}
/>
-
+ {/* Top section */}
+
+
+ {/* Home icon (already correct) */}
+
+
+ {/* Archive/Box icon */}
+
+
+ {/* Puzzle piece icon */}
+
+
+
+ {/* Spacer */}
+
+
+ {/* Bottom section */}
+
+ {/* Target/Crosshair icon */}
+
+
+ {/* Wrench/Tool icon */}
+
+
+ {/* Link/Chain icon */}
+
+
+ {/* Chart/Analytics icon */}
+
+
+ {/* Document/Clipboard icon */}
+
+
+ {/* Settings/Gear icon */}
+
+
+
-
- (null);
+ const documentMenuRef = useRef(null);
const handleInputChange = (event: React.ChangeEvent) => {
const value = event.target.value;
- setDocumentName(value); // Call the callback function to update the parent component
+ setDocumentName(value);
};
useEffect(() => {
const handleDocumentClick = (event: any) => {
if (
- isShareMenuOpen &&
- shareMenuRef.current &&
- !shareMenuRef.current.contains(event.target)
+ isSystemMenuOpen &&
+ systemMenuRef.current &&
+ !systemMenuRef.current.contains(event.target)
) {
- setIsShareMenuOpen(false);
+ setIsSystemMenuOpen(false);
}
if (
- isProfileMenuOpen &&
- profileMenuRef.current &&
- !profileMenuRef.current.contains(event.target)
+ isDocumentMenuOpen &&
+ documentMenuRef.current &&
+ !documentMenuRef.current.contains(event.target)
) {
- setIsProfileMenuOpen(false);
+ setIsDocumentMenuOpen(false);
}
};
@@ -53,7 +70,7 @@ export default function AppNavbar({
return () => {
document.removeEventListener("click", handleDocumentClick);
};
- }, [isShareMenuOpen, isProfileMenuOpen]);
+ }, [isSystemMenuOpen, isDocumentMenuOpen]);
function toggleModel() {
const i =
@@ -65,35 +82,178 @@ export default function AppNavbar({
baseUrl: baseUrl,
model: availableModels[i]?.name,
});
- //store in local storage
localStorage.setItem("initialLocalLM", availableModels[i]?.name);
setOllama(newOllama);
}
- const shareMenuRef = useRef(null);
- const profileMenuRef = useRef(null);
-
return (
- <>
-
- {messages.map((msg) => (
+
);
-}
+}
\ No newline at end of file
diff --git a/src/components/app-navbar.tsx b/src/components/app-navbar.tsx
index a0dedf8..be6d0da 100644
--- a/src/components/app-navbar.tsx
+++ b/src/components/app-navbar.tsx
@@ -3,6 +3,14 @@
import { ChatOllama } from "langchain/chat_models/ollama";
import { baseUrl } from "@/utils/constants";
import { useEffect, useRef, useState } from "react";
+import { useSystemInstruction } from "@/app/context/SystemInstructionContext";
+import { AppModal, useModal } from "@/app/context/ModalContext";
+
+type DocumentEntry = {
+ filename: string;
+ guid: string;
+ selected?: boolean;
+};
type Props = {
documentName: string;
@@ -11,6 +19,8 @@ type Props = {
availableModels: any[];
setActiveModel: Function;
setOllama: Function;
+ selectedDocuments: DocumentEntry[];
+ onDocumentToggle: (index: number) => void;
};
export default function AppNavbar({
@@ -20,31 +30,38 @@ export default function AppNavbar({
availableModels,
setActiveModel,
setOllama,
+ selectedDocuments,
+ onDocumentToggle,
}: Props) {
- const [isShareMenuOpen, setIsShareMenuOpen] = useState(false);
- const [isProfileMenuOpen, setIsProfileMenuOpen] = useState(false);
+ const [isSystemMenuOpen, setIsSystemMenuOpen] = useState(false);
+ const [isDocumentMenuOpen, setIsDocumentMenuOpen] = useState(false);
+ const { activeSystemInstruction, allSystemInstructions, setActiveSystemInstructionById } = useSystemInstruction();
+ const { setModalConfig } = useModal();
+
+ const systemMenuRef = useRef
+ { }}
+ activeModel={activeModel}
+ availableModels={availableModels}
+ setActiveModel={setActiveModel}
+ setOllama={setOllama}
+ selectedDocuments={selectedDocuments}
+ onDocumentToggle={(index) => {
+ const updatedDocuments = [...selectedDocuments];
+ updatedDocuments[index] = {
+ ...updatedDocuments[index],
+ selected: updatedDocuments[index].selected === false ? true : false
+ };
+ setSelectedDocuments(updatedDocuments);
+ }}
+ />
+
+ {/* Main content area with documents panel */}
+
-
+
+
+ {/* Chat area */}
+
-
+
-
-
-
+ {messages.length === 0 ? (
+
- {msg.content.trim()}
-
-
+
+ ) : (
+
+
+ Welcome to the HPE Partner Portal AI Assistant
+Start a conversation to begin by telling us what system you're interested in getting some information about.
+That will help the system narrow down the scope and provide the best responses
+You can then select which documents you wish to research from the panel on the right
+
+ {messages.map((msg) => (
+
)}
- >
-
+
+ ))}
+
+
+ {msg.content.trim()}
+
+
+
+
+ {msg?.model?.split(":")[0] || "You"} •{" "}
+ {new Date(msg.timestamp).toLocaleTimeString()}
+
+
+
+ {msg.type === "human" && (
+ {
+ setModalConfig({
+ modal: AppModal.SAVE_PROMPT,
+ data: msg,
+ });
+ }}
+ className="h-4 w-4 cursor-pointer fill-current opacity-60 hover:opacity-100"
+ />
+ )}
+ refreshMessage(msg)}
+ className="h-4 w-4 cursor-pointer fill-current opacity-60 hover:opacity-100"
+ />
+ {
+ navigator.clipboard.writeText(msg.content);
+ }}
+ className="h-4 w-4 cursor-pointer fill-current opacity-60 hover:opacity-100"
+ />
+ {
+ deleteMessage(msg);
+ }}
+ className="h-4 w-4 cursor-pointer fill-current opacity-60 hover:opacity-100"
+ />
+
+ - {(msg?.model?.split(":")[0] || "user") + - " • " + - new Date(msg.timestamp).toLocaleDateString() + - " " + - new Date(msg.timestamp).toLocaleTimeString()} -
-
- {msg.type == "human" && (
- {
- setModalConfig({
- modal: AppModal.SAVE_PROMPT,
- data: msg,
- });
- }}
- className="h-4 w-4 fill-white/50 hover:fill-white/90"
- />
- )}
- refreshMessage(msg)}
- className="h-4 w-4 fill-white/50 hover:fill-white/90"
- />
- {
- navigator.clipboard.writeText(msg.content);
- }}
- className="h-4 w-4 fill-white/50 hover:fill-white/90"
- />
- {
- deleteMessage(msg);
- }}
- className="h-4 w-4 fill-white/50 hover:fill-white/90"
+
+
+
+
- ))}
+
+
+ {activePromptTemplate ? (
+ {
+ if (
+ x.e.key === "Enter" &&
+ !x.e.metaKey &&
+ !x.e.shiftKey &&
+ !x.e.altKey &&
+ newPrompt !== ""
+ ) {
+ triggerPrompt(x.input);
+ }
+ }}
+ />
+ ) : (
+ {
+ if (e.target.value != "\n") setNewPrompt(e.target.value);
+ }}
+ onKeyDown={(e) => {
+ if (
+ e.key === "Enter" &&
+ !e.metaKey &&
+ !e.shiftKey &&
+ !e.altKey &&
+ newPrompt !== ""
+ ) {
+ e.preventDefault(); // Add this line
+ triggerPrompt();
+ }
+ }}
+ value={newPrompt}
+ placeholder="Send a message"
+ className="w-full rounded-lg border border-gray-300 bg-white px-4 py-3 text-gray-700 placeholder-gray-500 focus:border-[#01a982] focus:outline-none focus:ring-2 focus:ring-[#01a982] focus:ring-opacity-50"
+ />
+ )}
+
-
-
- {activePromptTemplate ? (
- <>
- {
- if (
- x.e.key === "Enter" &&
- !x.e.metaKey &&
- !x.e.shiftKey &&
- !x.e.altKey &&
- newPrompt !== ""
- ) {
- triggerPrompt(x.input);
- }
- }}
- />
-
- ) : (
- {
- if (e.target.value != "\n") setNewPrompt(e.target.value);
- }}
- onKeyDown={(e) => {
- if (
- e.key === "Enter" &&
- !e.metaKey &&
- !e.shiftKey &&
- !e.altKey &&
- newPrompt !== ""
- ) {
- triggerPrompt();
- } else if (
- e.key === "Enter" &&
- (e.metaKey || !e.shiftKey || !e.altKey)
- ) {
- // console.log(e);
+ {/* Documents Panel - Always visible */}
+
+
+
+
+ {/* Documents List */}
+ Selected Documents
++ {filteredDocuments.length > 0 + ? `${filteredDocuments.length} document${filteredDocuments.length > 1 ? 's' : ''} selected` + : 'No documents selected' } - }} - value={newPrompt} - placeholder="Send a message" - /> - )} +
+
+ {filteredDocuments.length > 0 ? (
+
+
+ {filteredDocuments.map((entry) => (
+
+ ) : (
+
+ {/* Document Icon */}
+
+
+ {/* Document Info */}
+
+ ))}
+
+
+
+ {/* Remove button */}
+
+ {entry.filename}
+ {/* ID: {entry.guid.substring(0, 8)}...
*/}
+
+
+
+ )}
+ No documents selected
+Select documents from the dropdown above
+