Skip to content

Commit 67d7ab7

Browse files
inikolovainikolova
authored
chore: addressing comments
* chore: remove duplicate word in the appbar * chore: update the Home page gradient * chore: adjust the gradient image * chore: add box-shadow to the demo cards * chore: update pills font-family * chore: add tooltips for the drawer inactive items * chore: align Drawer avatar to the bottom * chore: add tooltips for search input buttons and the share button inside the chat header * chore: remove unnecessary br-s * chore: update tooltip for search input * chore: update tooltip styles * chore: remove unnecessary prop from the tooltip
1 parent 8de1621 commit 67d7ab7

File tree

9 files changed

+422
-1440
lines changed

9 files changed

+422
-1440
lines changed

‎client/package-lock.json‎

Lines changed: 275 additions & 1370 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎client/package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,12 @@
1313
},
1414
"dependencies": {
1515
"@progress/kendo-licensing": "^1.7.1",
16+
"@progress/kendo-react-tooltip": "13.0.0",
1617
"@progress/kendo-react-buttons": "^13.0.0",
1718
"@progress/kendo-react-charts": "^13.0.0",
1819
"@progress/kendo-react-common": "^13.0.0",
20+
"@progress/kendo-popup-common": "1.9.5",
21+
"@progress/kendo-react-popup": "13.0.0",
1922
"@progress/kendo-react-conversational-ui": "^13.0.0",
2023
"@progress/kendo-react-layout": "^13.0.0",
2124
"@progress/kendo-theme-bootstrap": "^12.3.0-dev.1",

‎client/src/components/AppBarComponent.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ export default function AppBarComponent() {
9292
/>
9393
</div>
9494
<p className="app-bar-title !k-m-0 k-font-weight-medium k-text-center">
95-
Progress Agentic RAG + Telerik DevTools
95+
Agentic RAG + Telerik DevTools
9696
</p>
9797
</AppBarSection>
9898
</AppBar>

‎client/src/components/ChatHeader.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from "react";
22
import { type Message } from "@progress/kendo-react-conversational-ui";
33
import { Button } from "@progress/kendo-react-buttons";
4+
import { Tooltip } from "@progress/kendo-react-tooltip";
45

56
interface ChatHeaderTemplateProps {
67
messages: Message[];
@@ -27,9 +28,11 @@ const ChatHeaderTemplate: React.FC<ChatHeaderTemplateProps> = ({
2728
return (
2829
<div className="chat-header k-d-flex k-justify-content-between k-align-items-center k-px-4 k-py-2">
2930
<span>{firstUserMessage.text}</span>
30-
<Button imageUrl={shareIcon} fillMode="flat">
31-
Share
32-
</Button>
31+
<Tooltip anchorElement="element" position="bottom" parentTitle={true}>
32+
<Button imageUrl={shareIcon} fillMode="flat" title="Interaction is disabled for this demo.">
33+
Share
34+
</Button>
35+
</Tooltip>
3336
</div>
3437
);
3538
};

‎client/src/components/DrawerComponent.tsx‎

Lines changed: 35 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
import type { To } from "react-router-dom";
88
import { useLocation, useNavigate } from "react-router-dom";
99
import { Avatar } from "@progress/kendo-react-layout";
10+
import { Tooltip } from "@progress/kendo-react-tooltip";
1011

1112
const userImg = `${import.meta.env.BASE_URL}drawer-user.svg`;
1213
const searchImg = `${import.meta.env.BASE_URL}search.svg`;
@@ -66,38 +67,43 @@ const DrawerComponent: React.FC<DrawerComponentProps> = ({ children }) => {
6667
>
6768
<DrawerNavigation className="drawer-navigation k-d-none k-d-lg-flex">
6869
<div className="k-drawer-items k-h-full">
69-
{drawerItems.map((item) => (
70-
<div
71-
onClick={() => navigate(item.route)}
72-
key={item.text}
73-
className={`k-drawer-item ${
74-
selected === item.text ? "k-selected" : ""
75-
}`}
76-
>
77-
<img src={item.icon} alt={item.text} />
78-
<span className="k-item-text">{item.text}</span>
79-
</div>
80-
))}
81-
<div className="k-mt-6 k-d-flex k-flex-column k-justify-content-between k-flex-1">
82-
<div>
83-
<span className="k-p-4" style={{ color: "#A1B0C7" }}>
84-
Chats
85-
</span>
86-
<div className="k-drawer-item">
87-
<span className="k-text-ellipsis">How do I get started with KendoReact components?</span>
88-
</div>
89-
<div className="k-drawer-item">
90-
<span className="k-text-ellipsis">
91-
What are the best KendoReact components for data
92-
visualization?
93-
</span>
70+
<Tooltip anchorElement="element" position="right" parentTitle={true}>
71+
{drawerItems.map((item) => (
72+
<div
73+
onClick={() => navigate(item.route)}
74+
key={item.text}
75+
className={`k-drawer-item ${
76+
selected === item.text ? "k-selected" : ""
77+
}`}
78+
title="Interaction is disabled for this demo."
79+
>
80+
<img src={item.icon} alt={item.text} />
81+
<span className="k-item-text">{item.text}</span>
9482
</div>
95-
<div className="k-drawer-item">
96-
<span className="k-text-ellipsis">
97-
How to implement theming and styling with KendoReact?
83+
))}
84+
</Tooltip>
85+
<div className="k-mt-6 k-d-flex k-flex-column k-justify-content-between k-flex-1">
86+
<Tooltip anchorElement="element" position="right" parentTitle={true}>
87+
<div>
88+
<span className="k-p-4" style={{ color: "#A1B0C7" }}>
89+
Chats
9890
</span>
91+
<div className="k-drawer-item" title="Interaction is disabled for this demo.">
92+
<span className="k-text-ellipsis">How do I get started with KendoReact components?</span>
93+
</div>
94+
<div className="k-drawer-item" title="Interaction is disabled for this demo.">
95+
<span className="k-text-ellipsis">
96+
What are the best KendoReact components for data
97+
visualization?
98+
</span>
99+
</div>
100+
<div className="k-drawer-item" title="Interaction is disabled for this demo.">
101+
<span className="k-text-ellipsis">
102+
How to implement theming and styling with KendoReact?
103+
</span>
104+
</div>
99105
</div>
100-
</div>
106+
</Tooltip>
101107
<div className="k-d-flex k-gap-2 k-align-items-center k-p-4">
102108
<Avatar type="image">
103109
<img src={userImg} alt="User" />

‎client/src/components/SearchInput.tsx‎

Lines changed: 39 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
22
import { TextArea, type TextAreaProps, type TextAreaChangeEvent } from "@progress/kendo-react-inputs";
33
import { Button } from "@progress/kendo-react-buttons";
44
import { plusIcon, microphoneOutlineIcon, arrowUpIcon } from "@progress/kendo-svg-icons";
5+
import { Tooltip } from "@progress/kendo-react-tooltip";
56

67
interface SearchInputProps {
78
query: TextAreaProps['value'];
@@ -49,23 +50,29 @@ export const SearchInput: React.FC<SearchInputProps> = ({
4950
autoSize={true}
5051
resizable={'none'}
5152
prefix={() => (
52-
<Button
53-
className="search-input-button k-d-none k-d-md-inline-flex"
54-
rounded="full"
55-
svgIcon={plusIcon}
56-
size="large"
57-
fillMode="clear"
58-
/>
59-
)}
60-
suffix={() => (
61-
<>
53+
<Tooltip anchorElement="element" position="top" parentTitle={true}>
6254
<Button
6355
className="search-input-button k-d-none k-d-md-inline-flex"
6456
rounded="full"
65-
svgIcon={microphoneOutlineIcon}
66-
fillMode="clear"
57+
svgIcon={plusIcon}
6758
size="large"
59+
fillMode="clear"
60+
title="Interaction is disabled for this demo."
6861
/>
62+
</Tooltip>
63+
)}
64+
suffix={() => (
65+
<>
66+
<Tooltip anchorElement="element" position="top" parentTitle={true}>
67+
<Button
68+
className="search-input-button k-d-none k-d-md-inline-flex"
69+
rounded="full"
70+
svgIcon={microphoneOutlineIcon}
71+
fillMode="clear"
72+
size="large"
73+
title="Interaction is disabled for this demo."
74+
/>
75+
</Tooltip>
6976
<Button
7077
className="send-button k-d-none k-d-md-inline-flex"
7178
rounded="full"
@@ -75,20 +82,26 @@ export const SearchInput: React.FC<SearchInputProps> = ({
7582
size="large"
7683
/>
7784
<div className="k-d-flex k-d-md-none k-align-items-stretch k-w-full">
78-
<Button
79-
className="search-input-button"
80-
rounded="full"
81-
svgIcon={plusIcon}
82-
size="large"
83-
fillMode="clear"
84-
/>
85-
<Button
86-
className="search-input-button"
87-
rounded="full"
88-
svgIcon={microphoneOutlineIcon}
89-
fillMode="clear"
90-
size="large"
91-
/>
85+
<Tooltip anchorElement="element" position="top" parentTitle={true}>
86+
<Button
87+
className="search-input-button"
88+
rounded="full"
89+
svgIcon={plusIcon}
90+
size="large"
91+
fillMode="clear"
92+
title="Interaction is disabled for this demo."
93+
/>
94+
</Tooltip>
95+
<Tooltip anchorElement="element" position="top" parentTitle={true}>
96+
<Button
97+
className="search-input-button"
98+
rounded="full"
99+
svgIcon={microphoneOutlineIcon}
100+
fillMode="clear"
101+
size="large"
102+
title="Interaction is disabled for this demo."
103+
/>
104+
</Tooltip>
92105
<div className="k-spacer"></div>
93106
<Button
94107
className="send-button"

‎client/src/pages/Home.tsx‎

Lines changed: 45 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ const imgBot = `${import.meta.env.BASE_URL}bot.svg`;
88
const imgChartArea = `${import.meta.env.BASE_URL}chart-area.svg`;
99
const imgScanSearch = `${import.meta.env.BASE_URL}scan-search.svg`;
1010
const imgSparkles = `${import.meta.env.BASE_URL}sparkles.svg`;
11-
const imgBackground = `${import.meta.env.BASE_URL}background.svg`;
1211

1312
export default function Home() {
1413
const navigate = useNavigate();
@@ -63,10 +62,50 @@ export default function Home() {
6362
<div className="home-background-fixed k-pos-fixed k-overflow-hidden">
6463
<div className="home-background-gradient k-pos-absolute">
6564
<div className="home-background-gradient-inner k-pos-absolute">
66-
<img className="home-background-image k-d-block k-w-full k-h-full"
67-
src={imgBackground}
68-
alt=""
69-
/>
65+
<svg className="home-background-image k-d-block k-w-full k-h-full" width="1440" height="838" viewBox="0 0 1440 838" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice">
66+
<g opacity="0.6" filter="url(#filter0_f_144_966)">
67+
<g clipPath="url(#clip0)">
68+
{/* Top half - Pink to Cyan transition */}
69+
<ellipse cx="720" cy="465.5" rx="633" ry="165.5" fill="url(#gradient_top)" opacity="0.4"/>
70+
{/* Bottom half - Cyan to Blue transition */}
71+
<ellipse cx="720" cy="465.5" rx="633" ry="165.5" fill="url(#gradient_bottom)" opacity="0.4"/>
72+
{/* Left side - Pink emphasis */}
73+
<ellipse cx="400" cy="465.5" rx="400" ry="165.5" fill="url(#gradient_left)" opacity="0.3"/>
74+
{/* Right side - Blue emphasis */}
75+
<ellipse cx="1040" cy="465.5" rx="400" ry="165.5" fill="url(#gradient_right)" opacity="0.3"/>
76+
</g>
77+
</g>
78+
<defs>
79+
<filter id="filter0_f_144_966" x="-213" y="0" width="1866" height="931" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
80+
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
81+
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
82+
<feGaussianBlur stdDeviation="150" result="effect1_foregroundBlur_144_966"/>
83+
</filter>
84+
<clipPath id="clip0">
85+
<ellipse cx="720" cy="465.5" rx="633" ry="165.5"/>
86+
</clipPath>
87+
{/* Top: Pink (270deg start) to Cyan */}
88+
<linearGradient id="gradient_top" x1="0%" y1="100%" x2="100%" y2="0%">
89+
<stop offset="0%" stopColor="#FF00FB" stopOpacity="1"/>
90+
<stop offset="100%" stopColor="#00C8FF" stopOpacity="0.5"/>
91+
</linearGradient>
92+
{/* Bottom: Cyan to Blue */}
93+
<linearGradient id="gradient_bottom" x1="100%" y1="0%" x2="0%" y2="100%">
94+
<stop offset="0%" stopColor="#00C8FF" stopOpacity="0.2"/>
95+
<stop offset="100%" stopColor="#0077FF" stopOpacity="1"/>
96+
</linearGradient>
97+
{/* Left side: Pink radial */}
98+
<radialGradient id="gradient_left" cx="0.5" cy="0.5" r="0.5">
99+
<stop offset="0%" stopColor="#FF00FB" stopOpacity="0.6"/>
100+
<stop offset="100%" stopColor="#FF00FB" stopOpacity="0"/>
101+
</radialGradient>
102+
{/* Right side: Blue radial */}
103+
<radialGradient id="gradient_right" cx="0.5" cy="0.5" r="0.5">
104+
<stop offset="0%" stopColor="#0077FF" stopOpacity="0.6"/>
105+
<stop offset="100%" stopColor="#0077FF" stopOpacity="0"/>
106+
</radialGradient>
107+
</defs>
108+
</svg>
70109
</div>
71110
</div>
72111
</div>
@@ -109,7 +148,7 @@ export default function Home() {
109148
{demos.map((demo) => (
110149
<div
111150
key={demo.name}
112-
className="demo-card"
151+
className="demo-card k-elevation-2"
113152
onClick={() => handleDemoClick(demo.path)}
114153
>
115154
<div className="demo-card-icon">

‎client/src/styles/styles.css‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ html, body, #root {
5454
--overlay-95: rgba(255, 255, 255, 0.95);
5555

5656
/* Typography */
57-
--kendo-font-family: "Metric", "Segoe UI", Roboto,
57+
--kendo-font-family: 'Metric', "Segoe UI", Roboto,
5858
"Helvetica Neue", Arial, sans-serif;
5959
--kendo-font-size: 16px;
6060
--kendo-line-height: 1;
@@ -133,14 +133,14 @@ html, body, #root {
133133
border: 1px solid white;
134134
border-radius: 16px;
135135
padding: var(--kendo-spacing-2\.5);
136-
font-size: 14px;
137-
font-weight: 500;
136+
font-size: var(--kendo-font-size-sm);
137+
font-family: var(--kendo-font-family);
138138
color: #000000;
139139
cursor: pointer;
140140
transition: background-color 0.2s ease;
141141
line-height: 1;
142142
box-shadow: var(--kendo-elevation-2);
143-
font-weight: var(--kendo-font-weight-medium);
143+
font-weight: var(--kendo-font-weight);
144144
text-align: center;
145145
word-wrap: break-word;
146146
overflow-wrap: break-word;
@@ -329,6 +329,20 @@ html, body, #root {
329329
color: currentColor;
330330
}
331331

332+
.k-tooltip {
333+
color: #242424;
334+
background-color: #fff;
335+
box-shadow: 0 4px 8px 0 rgba(0, 0 , 0, .14), 0 0 2px 0 rgba(0, 0 , 0, .12);
336+
padding: 12px;
337+
max-width: 240px;
338+
flex-direction: column;
339+
align-items: flex-start;
340+
}
341+
342+
.k-tooltip .k-callout {
343+
color: #fff;
344+
}
345+
332346
.k-chat {
333347
background: transparent;
334348
max-width: 770px;

‎client/src/utils/markdownRenderer.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,6 @@ export const renderMarkdown = (text: string): React.ReactNode[] => {
109109
// Handle empty lines
110110
else if (line.trim() === '') {
111111
flushList();
112-
elements.push(<br key={lineIndex} />);
113112
}
114113
// Regular paragraph
115114
else {

0 commit comments

Comments
 (0)