+
+
+
+ Save
+
+ Cancel
+
+ );
+ } else {
+ return (
+
+
+ );
+};
+
+export default ChatAssistant;
diff --git a/app-frontend/react/src/components/Chat_Markdown/ChatMarkdown.tsx b/app-frontend/react/src/components/Chat_Markdown/ChatMarkdown.tsx
new file mode 100644
index 0000000..9666c7f
--- /dev/null
+++ b/app-frontend/react/src/components/Chat_Markdown/ChatMarkdown.tsx
@@ -0,0 +1,127 @@
+import React, { lazy, Suspense, useEffect, useState } from "react";
+import markdownStyles from "./markdown.module.scss";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import remarkFrontmatter from "remark-frontmatter";
+import remarkBreaks from "remark-breaks";
+import ThinkCard from "./ThinkRender/ThinkCard";
+import { Button, Collapse, Box } from "@mui/material";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import ExpandLessIcon from "@mui/icons-material/ExpandLess";
+
+const CodeRender = lazy(() => import("./CodeRender/CodeRender"));
+
+type MarkdownProps = {
+ content: string;
+};
+
+const extractThinkBlocks = (markdown: string): { cleaned: string; thinks: string[] } => {
+ const thinkRegex = /
+
+
+
+ {displayCurrentMessage()}
+
+ {!pending && displayMessageActions()}
+
+
+ {thinks.length > 0 && (
+
+
+
+
+ {thinks.map((block, idx) => (
+
+
+
+ )}
+
+ {
+ const hasBlockElement = React.Children.toArray(children).some(
+ (child) =>
+ React.isValidElement(child) &&
+ typeof child.type === "string" &&
+ ["div", "h1", "h2", "h3", "ul", "ol", "table"].includes(child.type)
+ );
+ return hasBlockElement ? (
+ <>{children}
+ ) : (
+ Loading Code Block...}>
+ {/*@ts-ignore*/}
+
+ );
+ },
+ }}
+ />
+
+ );
+};
+
+export default ChatMarkdown;
diff --git a/app-frontend/react/src/components/Chat_Markdown/CodeRender/CodeRender.tsx b/app-frontend/react/src/components/Chat_Markdown/CodeRender/CodeRender.tsx
new file mode 100644
index 0000000..3fb833c
--- /dev/null
+++ b/app-frontend/react/src/components/Chat_Markdown/CodeRender/CodeRender.tsx
@@ -0,0 +1,78 @@
+import styles from "./codeRender.module.scss";
+import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
+import {
+ atomOneDark,
+ atomOneLight,
+} from "react-syntax-highlighter/dist/esm/styles/hljs";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import { IconButton, styled, Tooltip, useTheme } from "@mui/material";
+import {
+ NotificationSeverity,
+ notify,
+} from "@components/Notification/Notification";
+
+const TitleBox = styled("div")(({ theme }) => ({
+ background: theme.customStyles.code?.primary,
+ color: theme.customStyles.code?.title,
+}));
+
+const StyledCode = styled(SyntaxHighlighter)(({ theme }) => ({
+ background: theme.customStyles.code?.secondary + " !important",
+}));
+
+type CodeRenderProps = {
+ cleanCode: React.ReactNode;
+ language: string;
+ inline: boolean;
+};
+const CodeRender = ({ cleanCode, language, inline }: CodeRenderProps) => {
+ const theme = useTheme();
+
+ const isClipboardAvailable = navigator.clipboard && window.isSecureContext;
+
+ cleanCode = String(cleanCode)
+ .replace(/\n$/, "")
+ .replace(/^\s*[\r\n]/gm, ""); //right trim and remove empty lines from the input
+
+ const copyText = (text: string) => {
+ navigator.clipboard.writeText(text);
+ notify("Copied to clipboard", NotificationSeverity.SUCCESS);
+ };
+
+ try {
+ return inline ? (
+ + {children} +
+ ); + }, + a: ({ children, ...props }) => ( + //@ts-ignore + + {children} + + ), + table: ({ children, ...props }) => ( +
+ {children}
+
+ ),
+ code({ inline, className, children }) {
+ const lang = /language-(\w+)/.exec(className || "");
+ return (
+
+ {cleanCode}
+
+ ) : (
+
+
+
+
+ );
+ } catch (err) {
+ return
+ {language || "language not detected"}
+
+
+ {isClipboardAvailable && (
+
+ copyText(cleanCode.toString())}>
+
+
+ )}
+
+ {cleanCode};
+ }
+};
+
+export default CodeRender;
diff --git a/app-frontend/react/src/components/Chat_Markdown/CodeRender/codeRender.module.scss b/app-frontend/react/src/components/Chat_Markdown/CodeRender/codeRender.module.scss
new file mode 100644
index 0000000..5960048
--- /dev/null
+++ b/app-frontend/react/src/components/Chat_Markdown/CodeRender/codeRender.module.scss
@@ -0,0 +1,36 @@
+.code {
+ margin: 7px 0px;
+
+ .codeHead {
+ padding: 0px 10px !important;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ align-items: center;
+ justify-content: space-between;
+
+ .codeTitle {
+ }
+
+ .codeActionGroup {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ align-items: center;
+ justify-content: flex-start;
+ }
+ }
+
+ .codeHighlighterDiv {
+ margin: 0px !important;
+ white-space: pre-wrap !important;
+
+ code {
+ white-space: pre-wrap !important;
+ }
+ }
+}
+
+.inlineCode {
+ background: #fff;
+}
diff --git a/app-frontend/react/src/components/Chat_Markdown/ThinkRender/ThinkCard.tsx b/app-frontend/react/src/components/Chat_Markdown/ThinkRender/ThinkCard.tsx
new file mode 100644
index 0000000..74db261
--- /dev/null
+++ b/app-frontend/react/src/components/Chat_Markdown/ThinkRender/ThinkCard.tsx
@@ -0,0 +1,29 @@
+// components/ThinkCard.tsx
+import { Card, CardContent, Typography } from "@mui/material";
+
+type ThinkCardProps = {
+ content: string;
+};
+
+const ThinkCard = ({ content }: ThinkCardProps) => {
+ return (
+
+
+
+
+
+
+
+
+ Response Settings
+ setOpen(false)}>
+
+
+
+
+
+
+ );
+};
+
+export default ChatSettingsModal;
diff --git a/app-frontend/react/src/components/Chat_Sources/ChatSources.module.scss b/app-frontend/react/src/components/Chat_Sources/ChatSources.module.scss
new file mode 100644
index 0000000..1a6a0d7
--- /dev/null
+++ b/app-frontend/react/src/components/Chat_Sources/ChatSources.module.scss
@@ -0,0 +1,47 @@
+.sourceWrapper {
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+ flex-wrap: wrap;
+ width: var(--content-width);
+ margin: 0 auto var(--vertical-spacer);
+ max-width: 100%;
+}
+
+.iconWrap {
+ border: none;
+ border-radius: 6px;
+ margin-right: 0.5rem;
+ width: 30px;
+ height: 30px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.sourceBox {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ margin-left: 1rem;
+ padding: 5px;
+ border-radius: 6px;
+ margin-bottom: 1rem;
+}
+
+.title {
+ margin: 0 0.5rem 0 0;
+ white-space: nowrap;
+ display: inline-block;
+ max-width: 150px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ font-weight: 400;
+}
+
+.chip {
+ border-radius: 8px;
+ padding: 3px;
+ font-size: 12px;
+}
diff --git a/app-frontend/react/src/components/Chat_Sources/ChatSources.tsx b/app-frontend/react/src/components/Chat_Sources/ChatSources.tsx
new file mode 100644
index 0000000..2bf0858
--- /dev/null
+++ b/app-frontend/react/src/components/Chat_Sources/ChatSources.tsx
@@ -0,0 +1,28 @@
+import { Box } from "@mui/material";
+import { conversationSelector } from "@redux/Conversation/ConversationSlice";
+import { useAppSelector } from "@redux/store";
+import styles from "./ChatSources.module.scss";
+import FileDispaly from "@components/File_Display/FileDisplay";
+
+const ChatSources: React.FC = () => {
+ const { sourceLinks, sourceFiles, sourceType } =
+ useAppSelector(conversationSelector);
+ const isWeb = sourceType === "web";
+ const sourceElements = isWeb ? sourceLinks : sourceFiles;
+
+ if (sourceLinks.length === 0 && sourceFiles.length === 0) return;
+
+ const renderElements = () => {
+ return sourceElements.map((element: any, elementIndex) => {
+ return (
+
+
+
+
+ {/*
+
+
+ */}
+
+ );
+};
+
+export default ChatUser;
diff --git a/app-frontend/react/src/components/Conversation/ConversationSideBar.tsx b/app-frontend/react/src/components/Conversation/ConversationSideBar.tsx
deleted file mode 100644
index 12591ad..0000000
--- a/app-frontend/react/src/components/Conversation/ConversationSideBar.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-// Copyright (C) 2024 Intel Corporation
-// SPDX-License-Identifier: Apache-2.0
-
-import { ScrollAreaAutosize, Title } from "@mantine/core"
-
-import contextStyles from "../../styles/components/context.module.scss"
-import { useAppDispatch, useAppSelector } from "../../redux/store"
-import { conversationSelector, setSelectedConversationId } from "../../redux/Conversation/ConversationSlice"
-// import { userSelector } from "../../redux/User/userSlice"
-
-export interface ConversationContextProps {
- title: string
-}
-
-export function ConversationSideBar({ title }: ConversationContextProps) {
- const { conversations, selectedConversationId } = useAppSelector(conversationSelector)
- // const user = useAppSelector(userSelector)
- const dispatch = useAppDispatch()
-
- const conversationList = conversations?.map((curr) => (
- {
- event.preventDefault()
- dispatch(setSelectedConversationId(curr.conversationId))
- // dispatch(getConversationById({ user, conversationId: curr.conversationId }))
- }}
- key={curr.conversationId}
- >
-
- ))
-
- return (
- {curr.title}
-
-
- {title}
-
-
-
-
- )
-}
diff --git a/app-frontend/react/src/components/Conversation/DataSource.tsx b/app-frontend/react/src/components/Conversation/DataSource.tsx
deleted file mode 100644
index 22e87df..0000000
--- a/app-frontend/react/src/components/Conversation/DataSource.tsx
+++ /dev/null
@@ -1,296 +0,0 @@
-// Copyright (C) 2024 Intel Corporation
-// SPDX-License-Identifier: Apache-2.0
-
-import { ActionIcon, Button, Container, Drawer, FileInput, Loader, rem, Table, Text, TextInput } from '@mantine/core'
-import { IconCheck, IconExclamationCircle, IconFileXFilled } from '@tabler/icons-react';
-import { SyntheticEvent, useState, useEffect } from 'react'
-import { useAppDispatch, useAppSelector } from '../../redux/store'
-import { submitDataSourceURL, addFileDataSource, updateFileDataSourceStatus, uploadFile, fileDataSourcesSelector, FileDataSource, clearFileDataSources } from '../../redux/Conversation/ConversationSlice';
-import { getCurrentTimeStamp, uuidv4 } from "../../common/util";
-import client from "../../common/client";
-import { DATA_PREP_URL } from "../../config";
-
-type Props = {
- opened: boolean
- onClose: () => void
-}
-interface getFileListApiResponse {
- name: string;
- id: string;
- type: string;
- parent: string;
-}
-
-export default function DataSource({ opened, onClose }: Props) {
- const title = "Data Source"
- const [file, setFile] = useState{conversationList}
-
- {isFile ? (
- <>
-
- | ID | -Type | -Start Time | -Status | -
|---|---|---|---|
| {index+1} | -{item.type} | -- {new Date(item.startTime*1000).toLocaleString('en-GB', { - year: 'numeric', - month: '2-digit', - day: '2-digit', - hour: '2-digit', - minute: '2-digit', - second: '2-digit', - hour12: false, - })} - | -{
- item.status === 'pending' ?
- ( |
-
| ID | -Source Name | -Action | -
|---|---|---|
| {index+1} | -- {item.id.length > 40 ? item.id.slice(0, 36) + '...' : item.id} - | -- - | -
-
+
+
+
+ {remove && (
+
+ {fileName}
+
+ {!isWeb && .{fileExtension}
}
+ + I hereby certify that the content uploaded is free from any + personally identifiable information or other private data that + would violate applicable privacy laws and regulations. +
+
+ uploadFiles()}>
+ Agree and Continue
+
+ setConfirmUpload(false)}>
+ Cancel
+
+
+
+ {filesToUpload.length !== maxFileCount && (
+ inputRef.current?.click()}>
+
+ )}
+
+ {dataManagement && (
+
+
+ )}
+
+
+ {filesToUpload.length > 0 && (
+
+
+ Limit {imageInput ? "3MB" : "80MB"} per file.
+
+
+
+ Valid file formats are {extensions.join(", ").toUpperCase()}.
+
+
+
+ You can select maximum of {maxFileCount} valid file
+ {maxFileCount > 1 ? "s" : ""}.
+
+
+ {!dataManagement && (
+
+ Max supported input tokens for {imageInput && "images"} data
+ insight is{" "}
+ {insightToken >= 1000 ? insightToken / 1000 + "K" : insightToken}
+
+ )}
+
+ {name}
+
+
+ 
+ {companyName}
+
+
+
+
+ {getTitle()}
+
+
-
- {human ?
-
- {!human && isAgent && (
-
- {human ? message : message === "..." ?
-
- {!human && elapsedTime !== undefined && tokenCount !== undefined && tokenRate !== undefined && (
-
-
- Time: {elapsedTime.toFixed(2)}s • Tokens: {tokenCount} • {tokenRate.toFixed(2)} tokens/s
-
-
- )}
-
- );
-}
\ No newline at end of file
diff --git a/app-frontend/react/src/components/Notification/Notification.tsx b/app-frontend/react/src/components/Notification/Notification.tsx
new file mode 100644
index 0000000..f3948c5
--- /dev/null
+++ b/app-frontend/react/src/components/Notification/Notification.tsx
@@ -0,0 +1,144 @@
+import { AlertColor, IconButton, styled } from "@mui/material";
+import {
+ SnackbarProvider,
+ useSnackbar,
+ MaterialDesignContent,
+ closeSnackbar,
+} from "notistack";
+import { useEffect } from "react";
+import { Subject } from "rxjs";
+import {
+ TaskAlt,
+ WarningAmberOutlined,
+ ErrorOutlineOutlined,
+ InfoOutlined,
+ Close,
+} from "@mui/icons-material";
+
+interface NotificationDataProps {
+ message: string;
+ variant: AlertColor;
+}
+
+type NotificationSeverity = "error" | "info" | "success" | "warning";
+
+export const NotificationSeverity = {
+ SUCCESS: "success" as NotificationSeverity,
+ ERROR: "error" as NotificationSeverity,
+ WARNING: "warning" as NotificationSeverity,
+ INFO: "info" as NotificationSeverity,
+};
+
+const severityColor = (variant: string) => {
+ switch (variant) {
+ case "success":
+ return "#388e3c";
+ case "error":
+ return "#d32f2f";
+ case "warning":
+ return "#f57c00";
+ case "info":
+ return "#0288d1";
+ default:
+ return "rgba(0, 0, 0, 0.87)";
+ }
+};
+
+const StyledMaterialDesignContent = styled(MaterialDesignContent)<{
+ severity: AlertColor;
+}>(({ variant }) => ({
+ backgroundColor: (() => {
+ switch (variant) {
+ case "success":
+ return "rgb(225,238,226)";
+ case "error":
+ return "rgb(248,224,224)";
+ case "warning":
+ return "rgb(254,235,217)";
+ case "info":
+ return "rgb(217,237,248)";
+ default:
+ return "rgb(225,238,226)";
+ }
+ })(),
+ border: `1px solid ${severityColor(variant)}`,
+ color: severityColor(variant),
+ ".MuiAlert-action": {
+ paddingTop: 0,
+ scale: 0.8,
+ borderLeft: `1px solid ${severityColor(variant)}`,
+ marginLeft: "1rem",
+ },
+ svg: {
+ marginRight: "1rem",
+ },
+ "button svg": {
+ marginRight: "0",
+ path: {
+ fill: severityColor(variant),
+ },
+ },
+}));
+
+const CloseIcon = styled(IconButton)(() => ({
+ minWidth: "unset",
+}));
+
+const Notify = new Subject
-
- {human ? "You" : "Assistant"}
-
-
- {dateFormat()}
-
-
-
-
-
- {agentSteps.length > 0 ? (
- agentSteps.map((step, index) => (
-
-
-
- Step {index + 1}
-
- {step.tool && (
-
- Tool: {step.tool}
-
- )}
-
- {step.content.length > 0 && (
-
- {step.content.join(", ")}
-
- )}
- {step.source.length > 0 && (
-
- {step.source.join(", ")}
-
- )}
-
- ))
- ) : (
-
-
- Thinking...
-
-
- )}
-
-
- )}
-
- -
+ {prompts?.map((prompt, promptIndex) => {
+ return (
+
+ {input}
+
;
+ };
+
+ // in the off chance specific types do not use these,
+ // they have been pulled into their own function
+ const tokenAndTemp = () => {
+ return (
+ <>
+
+ ) =>
+ handleChange(parseInt(e.target.value, 10))
+ }
+ aria-label="Quantity Input"
+ />
+
+ );
+};
+
+export default TokensInput;
diff --git a/app-frontend/react/src/components/SearchInput/SearchInput.module.scss b/app-frontend/react/src/components/SearchInput/SearchInput.module.scss
new file mode 100644
index 0000000..33207e8
--- /dev/null
+++ b/app-frontend/react/src/components/SearchInput/SearchInput.module.scss
@@ -0,0 +1,17 @@
+.searchInput {
+ width: 100%;
+ margin-bottom: 1rem;
+ border-radius: var(--input-radius);
+ border: 0;
+ margin-bottom: 2rem;
+
+ &:focus {
+ outline: none;
+ }
+
+ :global {
+ .MuiInputBase-root {
+ border-radius: var(--input-radius);
+ }
+ }
+}
diff --git a/app-frontend/react/src/components/SearchInput/SearchInput.tsx b/app-frontend/react/src/components/SearchInput/SearchInput.tsx
new file mode 100644
index 0000000..49a11f6
--- /dev/null
+++ b/app-frontend/react/src/components/SearchInput/SearchInput.tsx
@@ -0,0 +1,63 @@
+import { InputAdornment, styled, TextField } from "@mui/material";
+import styles from "./SearchInput.module.scss";
+import { Close, Search } from "@mui/icons-material";
+import { useRef, useState } from "react";
+
+const StyledSearchInput = styled(TextField)(({ theme }) => ({
+ ...theme.customStyles.webInput,
+}));
+
+interface SearchInputProps {
+ handleSearch: (value: string) => void;
+}
+
+const SearchInput: React.FC-
+ {sourceLinks.map((sourceItem: string, index: number) => (
+
+ ) =>
+ setInputValue(e.target.value)
+ }
+ InputProps={{
+ endAdornment: (
+
+
+ ),
+ }}
+ fullWidth
+ />
+
+ {sourcesDisplay()}
+
+ );
+};
+
+export default WebInput;
diff --git a/app-frontend/react/src/components/UserInfoModal/UserInfoModal.tsx b/app-frontend/react/src/components/UserInfoModal/UserInfoModal.tsx
deleted file mode 100644
index d958708..0000000
--- a/app-frontend/react/src/components/UserInfoModal/UserInfoModal.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-// Copyright (C) 2024 Intel Corporation
-// SPDX-License-Identifier: Apache-2.0
-
-// import { SyntheticEvent, useEffect, useState } from 'react'
-// import { useDisclosure } from '@mantine/hooks';
-// import { TextInput, Button, Modal } from '@mantine/core';
-// import { useDispatch, useSelector } from 'react-redux';
-// import { userSelector, setUser } from '../../redux/User/userSlice';
-
-import { useDispatch } from 'react-redux';
-import { setUser } from '../../redux/User/userSlice';
-
-
-const UserInfoModal = () => {
- // const [opened, { open, close }] = useDisclosure(false);
- // const { name } = useSelector(userSelector);
- const username = "OPEA Studio User";
- // const [username, setUsername] = useState(name || "");
-
- const dispatch = useDispatch();
- dispatch(setUser(username));
-
- // const handleSubmit = (event: SyntheticEvent) => {
- // event.preventDefault()
- // if(username){
- // close();
- // dispatch(setUser(username));
- // setUsername("")
- // }
-
- // }
- // useEffect(() => {
- // if (!name) {
- // open();
- // }
- // }, [name])
- return (
- <>
- {/* Generative AI provides significant benefits for enhancing the productivity of quality engineers, production support teams, software developers, and DevOps professionals. With a secure and scalable toolbox, it offers a flexible architecture capable of connecting to various data sources and models, enabling it to address a wide range of Generative AI use cases.
This platform saves your user ID to retain chat history, which you can choose to delete from the app at any time.
", + defaultChatPrompt: `You are a helpful assistant`, +}; -export const APP_UUID = import.meta.env.VITE_APP_UUID; -export const CHAT_QNA_URL = "VITE_APP_BACKEND_SERVICE_URL"; -export const DATA_PREP_URL = "VITE_APP_DATA_PREP_SERVICE_URL"; +export default config; -type UiFeatures = { - dataprep: boolean; - chat: boolean; -}; -export const UI_FEATURES: UiFeatures = { - chat: CHAT_QNA_URL.startsWith('VITE_') ? false : true, - dataprep: DATA_PREP_URL.startsWith('VITE_') ? false : true -}; -console.log("chat qna", CHAT_QNA_URL, UI_FEATURES.chat); -console.log("data prep", DATA_PREP_URL, UI_FEATURES.dataprep); \ No newline at end of file +// export const CHAT_QNA_URL = import.meta.env.VITE_BACKEND_SERVICE_ENDPOINT_CHATQNA; +export const CHAT_QNA_URL = import.meta.env.VITE_BACKEND_SERVICE_URL +// export const CODE_GEN_URL = import.meta.env.VITE_BACKEND_SERVICE_ENDPOINT_CODEGEN; +export const CODE_GEN_URL = import.meta.env.VITE_BACKEND_SERVICE_URL +// export const DOC_SUM_URL = import.meta.env.VITE_BACKEND_SERVICE_ENDPOINT_DOCSUM; +export const DOC_SUM_URL = import.meta.env.VITE_BACKEND_SERVICE_URL +export const UI_SELECTION = import.meta.env.VITE_UI_SELECTION; + +console.log ("BACKEND_SERVICE_URL", import.meta.env.VITE_BACKEND_SERVICE_URL); +console.log ("DATA_PREP_SERVICE_URL", import.meta.env.VITE_DATAPREP_SERVICE_URL); +console.log ("CHAT_HISTORY_SERVICE_URL", import.meta.env.VITE_CHAT_HISTORY_SERVICE_URL); +console.log ("UI_SELECTION", import.meta.env.VITE_UI_SELECTION); + +// export const FAQ_GEN_URL = import.meta.env.VITE_BACKEND_SERVICE_ENDPOINT_FAQGEN; +export const DATA_PREP_URL = import.meta.env.VITE_DATAPREP_SERVICE_URL; +// export const DATA_PREP_URL = "http://localhost:6007/v1/dataprep/"; +export const DATA_PREP_INGEST_URL = DATA_PREP_URL + "/ingest"; +export const DATA_PREP_GET_URL = DATA_PREP_URL + "/get"; +export const DATA_PREP_DELETE_URL = DATA_PREP_URL + "/delete"; + +console.log ("DATA_PREP_INGEST_URL", DATA_PREP_INGEST_URL); +console.log ("DATA_PREP_GET_URL", DATA_PREP_GET_URL); +console.log ("DATA_PREP_DELETE_URL", DATA_PREP_DELETE_URL); + +export const CHAT_HISTORY_URL = import.meta.env.VITE_CHAT_HISTORY_SERVICE_URL; +// export const CHAT_HISTORY_URL = "http://localhost:6012/v1/chathistory/"; +export const CHAT_HISTORY_CREATE = CHAT_HISTORY_URL + "/create"; +export const CHAT_HISTORY_GET = CHAT_HISTORY_URL + "/get"; +export const CHAT_HISTORY_DELETE = CHAT_HISTORY_URL + "/delete"; + +console.log ("CHAT_HISTORY_CREATE", CHAT_HISTORY_CREATE); +console.log ("CHAT_HISTORY_GET", CHAT_HISTORY_GET); +console.log ("CHAT_HISTORY_DELETE", CHAT_HISTORY_DELETE); + +export const PROMPT_MANAGER_GET = import.meta.env.VITE_PROMPT_SERVICE_GET_ENDPOINT; +export const PROMPT_MANAGER_CREATE = import.meta.env.VITE_PROMPT_SERVICE_CREATE_ENDPOINT; +export const PROMPT_MANAGER_DELETE = import.meta.env.VITE_PROMPT_SERVICE_DELETE_ENDPOINT; + + diff --git a/app-frontend/react/src/contexts/ThemeContext.tsx b/app-frontend/react/src/contexts/ThemeContext.tsx new file mode 100644 index 0000000..94ec15b --- /dev/null +++ b/app-frontend/react/src/contexts/ThemeContext.tsx @@ -0,0 +1,39 @@ +import React, { createContext, useState, useEffect, useCallback } from "react"; +import { ThemeProvider as MuiThemeProvider, CssBaseline } from "@mui/material"; +import { themeCreator } from "../theme/theme"; + +interface ThemeContextType { + darkMode: boolean; + toggleTheme: () => void; +} + +export const ThemeContext = createContext
+
+ );
+};
+
+export default MainLayout;
diff --git a/app-frontend/react/src/layouts/Minimal/MinimalLayout.module.scss b/app-frontend/react/src/layouts/Minimal/MinimalLayout.module.scss
new file mode 100644
index 0000000..2a2ff37
--- /dev/null
+++ b/app-frontend/react/src/layouts/Minimal/MinimalLayout.module.scss
@@ -0,0 +1,10 @@
+.minimalLayout {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ width: 100%;
+ padding: 2rem;
+ text-align: center;
+}
diff --git a/app-frontend/react/src/layouts/Minimal/MinimalLayout.tsx b/app-frontend/react/src/layouts/Minimal/MinimalLayout.tsx
new file mode 100644
index 0000000..0ccc5ae
--- /dev/null
+++ b/app-frontend/react/src/layouts/Minimal/MinimalLayout.tsx
@@ -0,0 +1,13 @@
+// About pages or privacy policy are likely minimal layouts
+import { Outlet } from "react-router-dom";
+import styles from "./MinimalLayout.module.scss";
+
+const MinimalLayout = () => {
+ return (
+
+
+
+
+
+
+ );
+};
+
+export default MinimalLayout;
diff --git a/app-frontend/react/src/layouts/ProtectedRoute/ProtectedRoute.tsx b/app-frontend/react/src/layouts/ProtectedRoute/ProtectedRoute.tsx
new file mode 100644
index 0000000..521e766
--- /dev/null
+++ b/app-frontend/react/src/layouts/ProtectedRoute/ProtectedRoute.tsx
@@ -0,0 +1,29 @@
+import { useAppSelector } from "@redux/store";
+import { userSelector } from "@redux/User/userSlice";
+import React, { useEffect } from "react";
+
+interface ProtectedRouteProps {
+ component: React.ComponentTypeAccess Denied: You do not have permission to view this page.
+ ); + } + + return
+
+ );
+};
+
+export default ChatView;
diff --git a/app-frontend/react/src/pages/DataSource/DataSourceManagement.module.scss b/app-frontend/react/src/pages/DataSource/DataSourceManagement.module.scss
new file mode 100644
index 0000000..28e6863
--- /dev/null
+++ b/app-frontend/react/src/pages/DataSource/DataSourceManagement.module.scss
@@ -0,0 +1,71 @@
+.dataView {
+ height: 100%;
+ width: 100%;
+ max-width: var(--content-width);
+ width: 100%;
+ margin: 0px auto;
+ padding: calc(var(--header-gutter) * 2);
+}
+
+.dataItem {
+ margin-bottom: 1rem;
+ position: relative;
+ padding: 0;
+
+ :global {
+ .MuiCheckbox-root {
+ position: absolute;
+ right: 100%;
+ margin-right: 0.25rem;
+ top: 50%;
+ transform: translateY(-50%);
+ @media screen and (min-width: 901px) {
+ margin-right: 1rem;
+ }
+ }
+ }
+}
+
+.dataName {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: flex-start;
+ width: 100%;
+ padding: 1rem;
+ margin: 0;
+ line-height: 1.5;
+}
+
+.searchInput {
+ width: 100%;
+ margin-bottom: 1rem;
+ background: none;
+
+ // padding: var(--header-gutter);
+ border: 0;
+ margin-bottom: 2rem;
+ // margin-right: 45px;
+ &:focus {
+ outline: none;
+ }
+
+ :global {
+ .MuiInputBase-root {
+ border-radius: var(--input-radius);
+ }
+ }
+}
+
+.dataInputWrapper {
+ width: 100%;
+ margin-top: 2rem;
+ margin-bottom: 2rem;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.actions button {
+ margin-left: 0.5rem;
+}
diff --git a/app-frontend/react/src/pages/DataSource/DataSourceManagement.tsx b/app-frontend/react/src/pages/DataSource/DataSourceManagement.tsx
new file mode 100644
index 0000000..cb0fe9a
--- /dev/null
+++ b/app-frontend/react/src/pages/DataSource/DataSourceManagement.tsx
@@ -0,0 +1,242 @@
+import {
+ Box,
+ Checkbox,
+ FormControlLabel,
+ List,
+ ListItem,
+ Typography,
+ FormGroup,
+} from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+import { useEffect, useState } from "react";
+import styles from "./DataSourceManagement.module.scss";
+import { useAppDispatch, useAppSelector } from "@redux/store";
+import {
+ conversationSelector,
+ deleteInDataSource,
+ getAllFilesInDataSource,
+ deleteMultipleInDataSource,
+} from "@redux/Conversation/ConversationSlice";
+import { file } from "@redux/Conversation/Conversation";
+import DropDown from "@components/DropDown/DropDown";
+import DataWebInput from "@components/Data_Web/DataWebInput";
+import FileInput from "@components/File_Input/FileInput";
+import SearchInput from "@components/SearchInput/SearchInput";
+import {
+ DeleteButton,
+ SolidButton,
+ TextButton,
+} from "@root/shared/ActionButtons";
+
+const DataSourceManagement = () => {
+ const dispatch = useAppDispatch();
+
+ const theme = useTheme();
+
+ const { filesInDataSource } = useAppSelector(conversationSelector);
+
+ const [dataList, setDataList] = useState
+
+
+
+
+
+
+
+
+ - {displayFiles()}
+
+ );
+};
+
+export default HistoryView;
diff --git a/app-frontend/react/src/pages/Home/Home.module.scss b/app-frontend/react/src/pages/Home/Home.module.scss
new file mode 100644
index 0000000..b4fd3df
--- /dev/null
+++ b/app-frontend/react/src/pages/Home/Home.module.scss
@@ -0,0 +1,39 @@
+.homeView {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ min-height: 100%;
+ padding: calc(var(--header-gutter) * 2);
+
+ .title {
+ text-align: center;
+
+ background-clip: text;
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ }
+
+ .buttonRow {
+ margin-top: var(--vertical-spacer);
+ justify-content: center;
+ }
+
+ .promptWrapper {
+ width: 100%;
+ max-width: 775px;
+ }
+
+ .inputContainer {
+ width: 100%;
+ max-width: 800px;
+ margin-top: var(--vertical-spacer);
+ }
+
+ .disclaimer {
+ width: 100%;
+ max-width: 600px;
+ margin-top: var(--vertical-spacer);
+ font-size: 14px;
+ }
+}
diff --git a/app-frontend/react/src/pages/Home/Home.tsx b/app-frontend/react/src/pages/Home/Home.tsx
new file mode 100644
index 0000000..cd79826
--- /dev/null
+++ b/app-frontend/react/src/pages/Home/Home.tsx
@@ -0,0 +1,111 @@
+import { Button, Typography, Grid2, styled } from "@mui/material";
+// import { AtomIcon, AtomAnimation } from "@icons/Atom";
+import PrimaryInput from "@components/PrimaryInput/PrimaryInput";
+import config from "@root/config";
+import PromptSettings from "@components/PromptSettings/PromptSettings";
+import { UI_SELECTION } from "@root/config";
+import styles from "./Home.module.scss";
+
+import { useNavigate } from "react-router-dom";
+import { useAppDispatch, useAppSelector } from "@redux/store";
+// import { userSelector } from "@redux/User/userSlice";
+import {
+ conversationSelector,
+ setType,
+ newConversation,
+} from "@redux/Conversation/ConversationSlice";
+import { useEffect } from "react";
+
+interface InitialStateProps {
+ initialMessage: string;
+}
+
+const HomeButton = styled(Button)(({ theme }) => ({
+ ...theme.customStyles.homeButtons,
+}));
+
+const HomeTitle = styled(Typography)(({ theme }) => ({
+ ...theme.customStyles.homeTitle,
+}));
+
+const Home = () => {
+ // const { disclaimer } = config;
+ const enabledUI = UI_SELECTION
+ ? UI_SELECTION.split(",").map((item) => item.trim())
+ : ["chat", "summary", "code"];
+
+ console.log("Enabled UI:", enabledUI);
+
+ const { type, types, token, model, temperature } =
+ useAppSelector(conversationSelector);
+ const dispatch = useAppDispatch();
+
+ // const { name } = useAppSelector(userSelector);
+
+ const navigate = useNavigate();
+
+ const handleSendMessage = async (messageContent: string) => {
+ const initialState: InitialStateProps = {
+ initialMessage: messageContent,
+ };
+
+ navigate(`/${type}/new`, { state: initialState });
+ };
+
+ const handleTypeChange = (updateType: string) => {
+ dispatch(setType(updateType));
+ };
+
+ useEffect(() => {
+ // clean up and reset. Can happen on going home from history/upload convo
+ // if convo is missing one of these
+ if (!model || !token || !temperature) {
+ dispatch(newConversation(true));
+ }
+ }, []);
+
+ return (
+
+
+ You have {historyList.length} previous chat
+ {historyList.length > 1 && "s"}
+
+
+ {historyList.length > 0 && (
+
+
+
+ {selectActive ? (
+ handleSelectAll()}>
+ Select All
+
+ ) : (
+ setSelectActive(true)}>
+ Select
+
+ )}
+
+ {selectActive && (
+ <>
+ cancelSelect()}>Cancel
+ deleteSelected()}>
+ Delete Selected
+
+
+ )}
+
+ )}
+ - {displayHistory()}
+ {/*
+ Hi, {config.tagline}
+
+
+
+ {types.map((interactionType, index) => (
+ enabledUI.includes(interactionType.key) &&
+ (
+ handleTypeChange(interactionType.key)}
+ aria-selected={type === interactionType.key}
+ startIcon={
+
+ )
+ ))}
+
+
+
+ );
+};
+
+export default Home;
diff --git a/app-frontend/react/src/redux/Conversation/Conversation.ts b/app-frontend/react/src/redux/Conversation/Conversation.ts
index 96ef58e..0714533 100644
--- a/app-frontend/react/src/redux/Conversation/Conversation.ts
+++ b/app-frontend/react/src/redux/Conversation/Conversation.ts
@@ -1,14 +1,52 @@
-// Copyright (C) 2024 Intel Corporation
+// Copyright (C) 2025 Intel Corporation
// SPDX-License-Identifier: Apache-2.0
+export interface UseCase {
+ use_case: string;
+ display_name: string;
+ access_level: string;
+}
+
+export interface Model {
+ displayName: string;
+ endpoint?: string;
+ maxToken: number;
+ minToken: number;
+ model_name: string;
+ types: string[];
+}
+
export type ConversationRequest = {
conversationId: string;
userPrompt: Message;
- messages: Partial
+
+
+
+
+
+ {/* */}
+