Merge pull request #15 from telerik/fix-responsive-styles

Improve responsive styles

Author: Juveniel

README.md

@@ -35,7 +35,7 @@ This is a full-stack TypeScript application with:
 
 ### Backend (`/server`)
 - **Node.js/Express** API server
-- **Nuclia SDK** for AI-powered search and data extraction
+- **Progress Agentic RAG SDK** for AI-powered search and data extraction
 - **TypeScript** for type safety
 - **JSON Schema validation** for structured responses
 
@@ -48,9 +48,9 @@ This is a full-stack TypeScript application with:
 - React Syntax Highlighter
 - Vite (build tool)
 
-### Backend Technologies  
+### Backend Technologies
 - Node.js + Express
-- Nuclia Core SDK
+- Progress Agentic RAG Core SDK
 - TypeScript
 - CORS middleware
 - dotenv for configuration
@@ -68,25 +68,25 @@ This is a full-stack TypeScript application with:
 
 ### Prerequisites
 - Node.js 18+ and npm
-- Nuclia API keys (for backend functionality)
+- Progress Agentic RAG API keys (for backend functionality)
 - KendoReact license (for UI components)
 
 ### Installation
 
 1. **Clone the repository**
    ```bash
-   git clone https://github.com/telerik/nuclia-demo.git
-   cd nuclia-demo
+   git clone https://github.com/telerik/kendo-progress-rag-demo.git
+   cd kendo-progress-rag-demo
    ```
 
 2. **Install dependencies**
    ```bash
    # Install root dependencies
    npm install
-   
+
    # Install client dependencies
    cd client && npm install
-   
+
    # Install server dependencies
    cd ../server && npm install
    ```
@@ -98,11 +98,11 @@ This is a full-stack TypeScript application with:
    # React Documentation Knowledge Box
    NUCLIA_KB=your_react_kb_id
    NUCLIA_API_KEY=your_react_api_key
-   
+
    # Financial Data Knowledge Box
    NUCLIA_FIN_KB=your_finance_kb_id
    NUCLIA_FIN_API_KEY=your_finance_api_key
-   
+
    PORT=5000
    ```
 
@@ -131,7 +131,7 @@ npm run dev
 # Start backend server (from /server)
 npm run dev
 
-# Start frontend client (from /client)  
+# Start frontend client (from /client)
 npm run dev
 ```
 
@@ -152,7 +152,7 @@ npm start
 ## 📁 Project Structure
 
 ```
-nuclia-demo/
+kendo-progress-rag-demo/
 ├── client/                 # React frontend application
 │   ├── src/
 │   │   ├── components/     # Reusable UI components
@@ -194,7 +194,7 @@ nuclia-demo/
   }
   ```
 
-### Finance Analysis  
+### Finance Analysis
 - `POST /api/ask-charts` - Query financial data with structured chart responses
   ```json
   {
@@ -237,7 +237,7 @@ npm run build
 
 **Backend (Node.js hosting):**
 ```bash
-cd server  
+cd server
 npm run build
 npm start
 ```
@@ -246,13 +246,13 @@ npm start
 
 For questions about:
 - **KendoReact components**: Visit [KendoReact Documentation](https://www.telerik.com/kendo-react-ui/components/)
-- **Nuclia AI platform**: Visit [Nuclia Documentation](https://docs.nuclia.com/)
+- **Progress Agentic RAG platform**: Visit [Progress Agentic RAG Documentation](https://www.progress.com/agentic-rag)
 - **This demo application**: Open an issue in this repository
 
 ## 🔗 Links
 
 - [KendoReact Documentation](https://www.telerik.com/kendo-react-ui/components/)
-- [Nuclia Platform](https://nuclia.com/)
+- [Progress Agentic RAG Platform](https://www.progress.com/agentic-rag)
 - [Vite Documentation](https://vitejs.dev/)
 - [React Documentation](https://react.dev/)
 

client/src/components/AppBarComponent.tsx

@@ -2,8 +2,8 @@ import { AppBar, AppBarSection, AppBarSpacer } from "@progress/kendo-react-layou
 import { Button } from "@progress/kendo-react-buttons";
 import { SvgIcon } from "@progress/kendo-react-common";
 import { useNavigate } from 'react-router-dom';
-import { 
-  searchIcon, 
+import {
+  searchIcon,
   homeIcon,
   chartLineStackedMarkersIcon,
   sparklesIcon
@@ -25,7 +25,7 @@ export default function AppBarComponent() {
   }
 
   return (
-    <AppBar 
+    <AppBar
       positionMode="sticky"
       style={{
         background: "linear-gradient(135deg, #0a5bb8 0%, #0d6edf 50%, #085096 100%)",
@@ -36,7 +36,7 @@ export default function AppBarComponent() {
     >
       <AppBarSection>
         <div className="k-d-flex k-align-items-center k-gap-md">
-          <div className="k-d-flex k-align-items-center k-justify-content-center k-rounded-md k-w-8 k-h-8" 
+          <div className="k-d-flex k-align-items-center k-justify-content-center k-rounded-md k-w-8 k-h-8"
                style={{
                  background: "rgba(255, 255, 255, 0.2)",
                  border: "1px solid rgba(255, 255, 255, 0.3)"
@@ -47,10 +47,10 @@ export default function AppBarComponent() {
               icon={sparklesIcon}
             />
           </div>
-          <h3 className="k-m-0 k-text-surface k-font-semibold k-font-size-xl k-d-none k-d-sm-block" style={{ 
+          <h3 className="k-m-0 k-text-surface k-font-semibold k-font-size-xl k-d-none k-d-sm-block" style={{
             textShadow: "0 2px 4px rgba(0, 0, 0, 0.2)"
           }}>
-            Kendo + Nuclia Demo
+            Kendo + Progress Agentic RAG Demo
           </h3>
         </div>
       </AppBarSection>

client/src/components/DrawerComponent.tsx

@@ -1,9 +1,11 @@
 import React, { useState, useEffect } from "react";
-import { Drawer, DrawerContent } from "@progress/kendo-react-layout";
+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';
-    
+
+
 const drawerItems = [
     { text: "Home", svgIcon: folderIcon, route: "/", selected: true },
     { text: "Knowledge Assistant", svgIcon: searchIcon, route: "/knowledge-assistant" },
@@ -48,15 +50,21 @@ const DrawerComponent: React.FC<DrawerComponentProps> = ({ children }) => {
     <Drawer
       expanded={isExpanded}
       mode="push"
-      items={drawerItems.map(item => ({
-        ...item,
-        selected: item.text === selected,
-      }))}
       onSelect={onSelect}
       width={220}
       className="k-h-full"
       drawerClassName="k-border-none"
     >
+      <DrawerNavigation className="k-overflow-y-auto !k-pos-sticky" style={{ height: 'calc(100vh - 53px)', top: 53}}>
+        <ul className="k-drawer-items">
+           {drawerItems.map(item => (
+          <div onClick={() => navigate(item.route)} key={item.text} className={`k-drawer-item ${selected === item.text ? 'k-selected' : ''}`}>
+            <SvgIcon icon={item.svgIcon} />
+            <span className="k-item-text">{item.text}</span>
+          </div>
+        ))}
+        </ul>
+      </DrawerNavigation>
       <DrawerContent>
           {children}
       </DrawerContent>

client/src/pages/FinanceAnalysis.tsx

@@ -61,9 +61,9 @@ export default function FinanceAnalysis() {
   ];
 
   const chatBot = useChatBot({
-    botName: "Nuclia Financial Assistant",
+    botName: "Progress Agentic RAG Financial Assistant",
     initialMessage:
-      "Hello! I'm your Nuclia Financial assistant. I can help you by summarizing financial data and answering questions about companies. Try one of the suggestions below, or ask me anything about financial results of Apple, Amazon, Resolute, Exxon Mobil, Johnson&Jonson, Google, NVIDIA or Berkshire Hathaway!",
+      "Hello! I'm your Progress Agentic RAG Financial assistant. I can help you by summarizing financial data and answering questions about companies. Try one of the suggestions below, or ask me anything about financial results of Apple, Amazon, Resolute, Exxon Mobil, Johnson&Jonson, Google, NVIDIA or Berkshire Hathaway!",
     apiEndpoint: "/api/ask-charts",
     placeholder: "Try a suggestion or ask about a company...",
     suggestions: financialSuggestions,
@@ -85,7 +85,7 @@ export default function FinanceAnalysis() {
   }, [chatBot.latestResponse, isBarChartDef]);
 
   return (
-    <div className="k-bg-surface" style={{ minHeight: 'calc(100vh - 53px)' }}>
+    <div className="k-bg-surface">
       <div className="k-d-grid k-grid-cols-1 k-grid-cols-xl-2 k-gap-lg k-p-lg" style={{ minHeight: 'calc(100vh - 53px - 2rem)' }}>
         {/* Left Panel - Chat */}
         <div className="k-d-flex k-col-span-1 k-col-span-xl-1 k-col-start-xl-1 k-col-end-xl-2" style={{ display: 'flex' }}>
@@ -112,10 +112,10 @@ export default function FinanceAnalysis() {
           <Card className="k-flex-1">
             <div className="k-p-lg">
               <h2 className="k-font-size-xl k-font-bold k-mb-lg">
-                Nuclia Financial Charts Analysis
+                Progress Agentic RAG Financial Charts Analysis
               </h2>
               <div className="k-d-flex k-flex-col k-gap-lg">
-                {/* Dynamic Charts from Nuclia answer (up to 3) */}
+                {/* Dynamic Charts from Progress Agentic RAG answer (up to 3) */}
                 <div>
                   {selectedCharts.length === 0 && (
                     <p className="k-text-secondary">

client/src/pages/Home.tsx

@@ -10,13 +10,13 @@ export default function Home() {
   };
 
   return (
-    <div className="k-overflow-hidden" style={{
+    <div className="k-overflow-auto" style={{
       height: 'calc(100vh - 53px)',
       background: 'linear-gradient(134deg, #2359D4 14.27%, #832ED2 49.62%, #2B39A4 85.65%)'
     }}>
       <div className="k-d-flex k-flex-column k-text-surface k-align-items-center k-gap-8 k-gap-sm-10 k-gap-md-12 k-gap-lg-14 k-px-4 k-px-sm-6 k-px-md-8 k-px-lg-12 k-px-xl-30 k-py-4 k-py-sm-6 k-py-md-8 k-py-lg-12 k-py-xl-30">
         <div className="k-d-flex k-flex-column k-gap-2 k-gap-sm-3 k-gap-md-4 k-text-center">
-          <h1 className="k-h1 k-font-weight-bold !k-mb-0">Nuclia + Telerik DevTools</h1>
+          <h1 className="k-h1 k-font-weight-bold !k-mb-0">Progress Agentic RAG + Telerik DevTools</h1>
           <p className="k-font-size-xl !k-mb-0 k-d-none k-d-sm-block">Supercharging AI-Powered Applications</p>
         </div>
         <div className="k-d-flex k-flex-column k-gap-4 k-gap-sm-5 k-gap-md-6">
@@ -27,10 +27,10 @@ export default function Home() {
             <li>Accelerate development cycles by combining enterprise-grade UI with enterprise-ready AI retrieval.</li>
             <li>Unlock business outcomes by transforming unstructured data into meaningful knowledge, surfaced through beautiful and functional interfaces.</li>
           </ul>
-          <Button 
-            className="k-text-surface k-align-self-center" 
-            fillMode="outline" 
-            themeColor="primary" 
+          <Button
+            className="k-text-surface k-align-self-center"
+            fillMode="outline"
+            themeColor="primary"
             svgIcon={sparklesIcon}
             onClick={handleExploreClick}
           >

client/src/pages/KnowledgeAssistant.tsx

@@ -25,22 +25,22 @@ const KnowledgeAssistant = () => {
   ];
 
   const chatBot = useChatBot({
-    botName: 'Nuclia Assistant',
-    initialMessage: 'Hello! I\'m your Nuclia AI assistant. I can help you with KendoReact questions and documentation. Try one of the suggestions below, or ask me anything about KendoReact components, theming, data visualization, and more!',
+    botName: 'Progress Agentic RAG Assistant',
+    initialMessage: 'Hello! I\'m your Progress Agentic RAG AI assistant. I can help you with KendoReact questions and documentation. Try one of the suggestions below, or ask me anything about KendoReact components, theming, data visualization, and more!',
     apiEndpoint: '/api/ask',
     placeholder: 'Try a suggestion or ask about KendoReact...',
     suggestions: kendoSuggestions
   });
 
   return (
-    <div className="k-d-flex k-flex-column k-overflow-hidden" style={{ height: 'calc(100vh - 53px)', background: 'linear-gradient(134deg, #23A5D4 14.27%, #2E7BD2 49.62%, #20B4CB 85.65%)'}}>
+    <div className="k-d-flex k-flex-column k-overflow-auto k-pb-4" style={{ height: 'calc(100vh - 53px)', background: 'linear-gradient(134deg, #23A5D4 14.27%, #2E7BD2 49.62%, #20B4CB 85.65%)'}}>
       <div className="k-color-surface k-d-flex k-flex-column k-align-items-center k-py-4 k-py-sm-6 k-py-md-4 k-px-4 k-px-sm-6 k-px-md-8 k-px-lg-12 k-px-xl-20 k-gap-2 k-gap-sm-3 k-gap-md-3 k-flex-none">
         <div className="k-d-flex k-flex-column k-gap-2 k-gap-sm-3 k-gap-md-3">
           <div className="k-d-flex k-gap-2 k-align-items-center">
             <SvgIcon icon={searchIcon} size="xxlarge" className="k-flex-shrink-0" />
-            <h1 className="k-h1 !k-mb-0">Nuclia Knowledge Assistant</h1>
+            <h1 className="k-h1 !k-mb-0">Progress Agentic RAG Knowledge Assistant</h1>
           </div>
-          <p className="!k-mb-0 k-font-size-xl k-d-none k-d-sm-block">Explore the comprehensive Nuclia knowledge base with AI-powered intelligent search for precise, contextual results about Nuclia features, capabilities, and best practices</p>
+          <p className="!k-mb-0 k-font-size-xl k-d-none k-d-sm-block">Explore the comprehensive Progress Agentic RAG knowledge base with AI-powered intelligent search for precise, contextual results about Progress Agentic RAG features, capabilities, and best practices</p>
         </div>
       </div>
       <div className="k-d-flex k-flex-column k-px-4 k-px-sm-6 k-px-md-8 k-px-lg-12 k-px-xl-20 k-pb-4 k-flex-1 k-min-h-0">

server/src/index.ts

@@ -29,7 +29,7 @@ app.get("/api/health", (_req: express.Request, res: express.Response) => {
   res.json({ status: "ok" });
 });
 
-// Reusable extended handler providing SSE streaming for Nuclia ask requests
+// Reusable extended handler providing SSE streaming for Progress Agentic RAG ask requests
 const askHandler = (req: express.Request, res: express.Response, kb: KnowledgeBox, question: string, chatOptions?: ChatOptions) => {
   // Set up Server-Sent Events (SSE) headers
   res.setHeader('Content-Type', 'text/event-stream');