+ 
+
+ + Progress Agentic RAG + Telerik DevTools +
+
-
-
+
+
+ )}
);
-}
\ No newline at end of file
+}
diff --git a/client/src/components/ChatHeader.tsx b/client/src/components/ChatHeader.tsx
new file mode 100644
index 0000000..e5dcb86
--- /dev/null
+++ b/client/src/components/ChatHeader.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+import { type Message } from "@progress/kendo-react-conversational-ui";
+import { Button } from "@progress/kendo-react-buttons";
+
+interface ChatHeaderTemplateProps {
+ messages: Message[];
+}
+
+/**
+ * Reusable header template for the Chat component.
+ * Displays the first user question as plain text in the header.
+ */
+const ChatHeaderTemplate: React.FC = ({
+ messages,
+}) => {
+ const shareIcon = `${import.meta.env.BASE_URL}share.svg`;
+ // Find the first user message (skip the initial bot message)
+ const firstUserMessage = React.useMemo(() => {
+ return messages.find((msg) => msg.author.id === 1); // User ID is 1
+ }, [messages]);
+
+ // Don't render anything if there's no user message yet
+ if (!firstUserMessage || !firstUserMessage.text) {
+ return null;
+ }
+
+ return (
+ = ({ item }) => {
// Determine if this message is from the sender (user) or bot
const isSenderMessage = item.author.id === 1; // User ID is 1, Bot ID is 0
-
- // State for tracking copied status
- const [copiedStates, setCopiedStates] = useState<{ [key: number]: boolean }>({});
-
- // Copy function
- const copyToClipboard = async (code: string, index: number) => {
- try {
- await navigator.clipboard.writeText(code);
- setCopiedStates(prev => ({ ...prev, [index]: true }));
- // Reset the copied state after 2 seconds
- setTimeout(() => {
- setCopiedStates(prev => ({ ...prev, [index]: false }));
- }, 2000);
- } catch (err) {
- console.error('Failed to copy code:', err);
- }
- };
-
- // Define styling classes based on message author
- const messageClasses = isSenderMessage
- ? "k-chat-message-text k-bg-primary k-text-surface k-border k-border-solid k-border-primary-emphasis k-p-4 k-rounded-lg"
- : "k-chat-message-text k-bg-secondary-subtle k-border k-border-solid k-border-secondary-subtle k-p-4 k-rounded-lg";
-
- const parseMessage = (text: string) => {
- // Split the text by code blocks (```language\ncode\n```)
- const codeBlockRegex = /```(\w+)?\n?([\s\S]*?)```/g;
- const parts: (string | { type: 'code'; language: string; content: string })[] = [];
- let lastIndex = 0;
- let match;
-
- while ((match = codeBlockRegex.exec(text)) !== null) {
- // Add text before the code block
- if (match.index > lastIndex) {
- const beforeText = text.slice(lastIndex, match.index);
- if (beforeText.trim()) {
- parts.push(beforeText);
- }
- }
-
- // Add the code block
- const language = match[1] || 'text';
- const content = match[2].trim();
- parts.push({
- type: 'code',
- language,
- content
- });
-
- lastIndex = match.index + match[0].length;
- }
-
- // Add remaining text after the last code block
- if (lastIndex < text.length) {
- const remainingText = text.slice(lastIndex);
- if (remainingText.trim()) {
- parts.push(remainingText);
- }
- }
-
- return parts;
- };
-
- const renderInlineCode = (text: string) => {
- // Handle inline code with `code`
- const inlineCodeRegex = /`([^`]+)`/g;
- const parts = [];
- let lastIndex = 0;
- let match;
- while ((match = inlineCodeRegex.exec(text)) !== null) {
- // Add text before inline code
- if (match.index > lastIndex) {
- parts.push(text.slice(lastIndex, match.index));
- }
+ const renderContent = () => {
+ if (!item.text) return null;
- // Add inline code with adaptive styling
- parts.push(
-
- {inlinePart}
-
- ))}
-
- );
- } else if (part.type === 'code') {
- // Render code block with syntax highlighting
- const syntaxTheme = oneLight;
-
- return (
-
-
+
+ 
- - Kendo + Progress Agentic RAG Demo -
+ + Agentic RAG + Telerik DevTools +
-
-
-
-
+ {!isMobile ? (
+
+ {navItems.map((item) => (
+ handleNavClick(item.path)}
+ >
+ {item.label}
+
+ ))}
+
+ ) : (
+ <>
+
+ MENU
+
+
+
+ {navItems.map((item) => (
+
+ handleNavClick(item.path)}
+ >
+ {item.label}
+
+ ))}
+
+ {firstUserMessage.text}
+
+
+ );
+};
+
+export default ChatHeaderTemplate;
diff --git a/client/src/components/ChatMessage.tsx b/client/src/components/ChatMessage.tsx
index 700ecbc..a15fd5a 100644
--- a/client/src/components/ChatMessage.tsx
+++ b/client/src/components/ChatMessage.tsx
@@ -1,190 +1,47 @@
-import React, { useState } from 'react';
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
-import { Button } from '@progress/kendo-react-buttons';
-import { SvgIcon } from '@progress/kendo-react-common';
-import { copyIcon } from '@progress/kendo-svg-icons';
+import React from 'react';
import type { ChatMessageTemplateProps } from '@progress/kendo-react-conversational-ui';
+import { renderMarkdown } from '../utils/markdownRenderer';
const ChatMessage: React.FC
- {match[1]}
-
+ // For bot messages, use markdown renderer with design system styling
+ if (!isSenderMessage) {
+ const markdownElements = renderMarkdown(item.text);
+ return (
+
+ {markdownElements}
+
);
-
- lastIndex = match.index + match[0].length;
}
- // Add remaining text
- if (lastIndex < text.length) {
- parts.push(text.slice(lastIndex));
- }
-
- return parts;
+ // For user messages, render with design styling
+ return (
+ + {item.text} +
+ ); }; - const renderContent = () => { - if (!item.text) return null; - - const parts = parseMessage(item.text); - - return parts.map((part, index) => { - if (typeof part === 'string') { - // Handle inline code in regular text - const inlineCodeParts = renderInlineCode(part); - return ( - - {inlineCodeParts.map((inlinePart, inlineIndex) => ( -
-
- );
- }
- return null;
- });
- };
+ // Apply different styling for user vs bot messages
+ if (isSenderMessage) {
+ return (
+
-
- {part.content}
-
-
-
- {part.language}
-
-
-
+
+ );
+ }
+ // Bot messages - no background, just text
return (
+ {renderContent()}
+
+
- = ({
+ isLoading = false,
+ onSendMessage,
+ suggestions = [],
+ onSuggestionClick,
+ placeholder = 'Type a message...',
+ forceOneRow = false
+}) => {
+ const [inputValue, setInputValue] = React.useState('');
+
+ const handleChange = (event: TextAreaChangeEvent) => {
+ setInputValue(String(event.value || ''));
+ };
+
+ const handleKeyPress = (event: React.KeyboardEvent) => {
+ if (event.key === 'Enter' && !event.shiftKey) {
+ event.preventDefault();
+ handleSend();
+ }
+ };
+
+ const handleSend = () => {
+ if (inputValue.trim() && onSendMessage) {
+ onSendMessage(inputValue);
+ setInputValue('');
+ }
+ };
+
+ const handleSuggestionClick = (suggestion: ChatSuggestion) => {
+ if (onSuggestionClick && !isLoading) {
+ onSuggestionClick(suggestion);
+ }
+ };
+
+ return (
+ = ({ code, blockKey }) => {
+ const [copied, setCopied] = React.useState(false);
+
+ const handleCopy = async () => {
+ try {
+ await navigator.clipboard.writeText(code);
+ setCopied(true);
+ setTimeout(() => setCopied(false), 2000);
+ } catch (err) {
+ console.error('Failed to copy code:', err);
+ }
+ };
+
+ return (
+ = ({ children }) => {
handleResize();
- window.addEventListener('resize', handleResize);
+ window.addEventListener("resize", handleResize);
- return () => window.removeEventListener('resize', handleResize);
+ return () => window.removeEventListener("resize", handleResize);
}, []);
- const onSelect = (e: { itemTarget: { props: { route: To; }; }; itemIndex: React.SetStateAction; }) => {
+ const onSelect = (e: {
+ itemTarget: { props: { route: To } };
+ itemIndex: React.SetStateAction;
+ }) => {
navigate(e.itemTarget.props.route);
};
@@ -52,24 +62,57 @@ const DrawerComponent: React.FC = ({ children }) => {
mode="push"
onSelect={onSelect}
width={220}
- className="k-h-full"
drawerClassName="k-border-none"
>
-
-
+
diff --git a/client/src/components/ChatMessageBox.tsx b/client/src/components/ChatMessageBox.tsx
new file mode 100644
index 0000000..7218d75
--- /dev/null
+++ b/client/src/components/ChatMessageBox.tsx
@@ -0,0 +1,80 @@
+import React from "react";
+import type { ChatMessageBoxProps, ChatSuggestion } from "@progress/kendo-react-conversational-ui";
+import type { TextAreaChangeEvent } from "@progress/kendo-react-inputs";
+import SearchInput from "./SearchInput";
+import SearchPill from "./SearchPill";
+
+interface ChatMessageBoxAdapterProps extends ChatMessageBoxProps {
+ isLoading?: boolean;
+ onSendMessage?: (text: string) => void;
+ suggestions?: ChatSuggestion[];
+ onSuggestionClick?: (suggestion: ChatSuggestion) => void;
+ placeholder?: string;
+ forceOneRow?: boolean;
+}
+
+export const ChatMessageBox: React.FC
{renderContent()}
+
+ );
+};
+
+export default ChatMessageBox;
diff --git a/client/src/components/CodeBlockWithCopy.tsx b/client/src/components/CodeBlockWithCopy.tsx
new file mode 100644
index 0000000..e420340
--- /dev/null
+++ b/client/src/components/CodeBlockWithCopy.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { Button } from '@progress/kendo-react-buttons';
+import { SvgIcon } from '@progress/kendo-react-common';
+import { copyIcon } from '@progress/kendo-svg-icons';
+
+interface CodeBlockWithCopyProps {
+ code: string;
+ blockKey: string;
+}
+
+const CodeBlockWithCopy: React.FC
+ {suggestions.map((suggestion) => (
+ handleSuggestionClick(suggestion)}
+ disabled={isLoading}
+ />
+ ))}
+
+ )}
+
+
+ );
+};
+
+export default CodeBlockWithCopy;
diff --git a/client/src/components/DrawerComponent.tsx b/client/src/components/DrawerComponent.tsx
index 32dc64c..532684a 100644
--- a/client/src/components/DrawerComponent.tsx
+++ b/client/src/components/DrawerComponent.tsx
@@ -1,15 +1,22 @@
import React, { useState, useEffect } from "react";
-import { Drawer, DrawerContent, DrawerNavigation } from "@progress/kendo-react-layout";
-import { SvgIcon } from "@progress/kendo-react-common";
-import { folderIcon, searchIcon, chartLineStackedMarkersIcon } from "@progress/kendo-svg-icons";
-import type { To } from 'react-router-dom';
-import { useLocation, useNavigate } from 'react-router-dom';
+import {
+ Drawer,
+ DrawerContent,
+ DrawerNavigation,
+} from "@progress/kendo-react-layout";
+import type { To } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
+import { Avatar } from "@progress/kendo-react-layout";
+const userImg = `${import.meta.env.BASE_URL}drawer-user.svg`;
+const searchImg = `${import.meta.env.BASE_URL}search.svg`;
+const chatImg = `${import.meta.env.BASE_URL}new-chat.svg`;
+const libraryImg = `${import.meta.env.BASE_URL}book-open.svg`;
const drawerItems = [
- { text: "Home", svgIcon: folderIcon, route: "/", selected: true },
- { text: "Knowledge Assistant", svgIcon: searchIcon, route: "/knowledge-assistant" },
- { text: "Finance Analysis", svgIcon: chartLineStackedMarkersIcon, route: "/finance-analysis" },
+ { text: "New chat", icon: chatImg, route: "/knowledge-assistant" },
+ { text: "Search chats", icon: searchImg, route: "/knowledge-assistant" },
+ { text: "Library", icon: libraryImg, route: "/knowledge-assistant" },
];
interface DrawerComponentProps {
@@ -28,12 +35,15 @@ const DrawerComponent: React.FC
+
+
+ {code}
+
+
+ -
- {drawerItems.map(item => (
-
navigate(item.route)} key={item.text} className={`k-drawer-item ${selected === item.text ? 'k-selected' : ''}`}>
-
+
-
- {children}
-
+ {children}
);
-}
+};
-export default DrawerComponent;
\ No newline at end of file
+export default DrawerComponent;
diff --git a/client/src/components/GradientLoader.tsx b/client/src/components/GradientLoader.tsx
new file mode 100644
index 0000000..4400ef5
--- /dev/null
+++ b/client/src/components/GradientLoader.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+interface GradientLoaderProps {
+ title: string;
+ subtitle: string;
+}
+
+export const GradientLoader: React.FC = ({ title, subtitle }) => {
+ return (
+ = ({
+ query,
+ onQueryChange,
+ onKeyPress,
+ onSearchClick,
+ isLoading,
+ placeholder,
+ forceOneRow = false,
+}) => {
+ const [isMobile, setIsMobile] = useState(false);
+
+ useEffect(() => {
+ const checkMobile = () => {
+ setIsMobile(window.innerWidth < 768);
+ };
+
+ checkMobile();
+ window.addEventListener('resize', checkMobile);
+
+ return () => window.removeEventListener('resize', checkMobile);
+ }, []);
+
+ return (
+
+ {drawerItems.map((item) => (
+
navigate(item.route)}
+ key={item.text}
+ className={`k-drawer-item ${
+ selected === item.text ? "k-selected" : ""
+ }`}
+ >
+ 
+ {item.text}
+
+ ))}
+
+
- ))}
-
+
+
+ Chats
+
+
+
+ How do I get started with KendoReact components?
+
+
+
+ What are the best KendoReact components for data
+ visualization?
+
+
+
+
+ How to implement theming and styling with KendoReact?
+
+
+
+
+ 
+
+
+ John Smith
+ Manager
+
+
+
+
+
+ );
+};
diff --git a/client/src/components/SearchInput.tsx b/client/src/components/SearchInput.tsx
new file mode 100644
index 0000000..28bc17f
--- /dev/null
+++ b/client/src/components/SearchInput.tsx
@@ -0,0 +1,108 @@
+import React, { useState, useEffect } from "react";
+import { TextArea, type TextAreaProps, type TextAreaChangeEvent } from "@progress/kendo-react-inputs";
+import { Button } from "@progress/kendo-react-buttons";
+import { plusIcon, microphoneOutlineIcon, arrowUpIcon } from "@progress/kendo-svg-icons";
+
+interface SearchInputProps {
+ query: TextAreaProps['value'];
+ onQueryChange: (event: TextAreaChangeEvent) => void;
+ onKeyPress: (event: React.KeyboardEvent) => void;
+ onSearchClick: () => void;
+ isLoading: boolean;
+ placeholder: string;
+ forceOneRow?: boolean;
+}
+
+export const SearchInput: React.FC+ {subtitle} +
+