Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ai suggestion #603

Draft
wants to merge 9 commits into
base: main
Choose a base branch
from
Draft

Ai suggestion #603

Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
4fa5f15
add the initial UI setup
staticGuru Oct 13, 2023
158d00d
change the margin ratio
staticGuru Oct 13, 2023
3824c79
add the hover effect
staticGuru Oct 13, 2023
fab1739
add the style properties
staticGuru Oct 13, 2023
0fe504b
add the word wrap sections
staticGuru Oct 13, 2023
939759e
add the placeholder response
staticGuru Oct 14, 2023
cb9b20a
Add animation in the background color
staticGuru Oct 14, 2023
f840749
add the placeholder suggestions
staticGuru Oct 14, 2023
88a464a
fix the typescript for onclick event
staticGuru Oct 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 32 additions & 1 deletion frontend/src/conversation/ConversationBubble.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';

const DisableSourceFE = import.meta.env.VITE_DISABLE_SOURCE_FE || false;
const suggest = [{ id: 'dfsdfsd', query: 'ljglkjlkj kljsfd' }];

const ConversationBubble = forwardRef<
HTMLDivElement,
Expand All @@ -22,9 +23,18 @@ const ConversationBubble = forwardRef<
feedback?: FEEDBACK;
handleFeedback?: (feedback: FEEDBACK) => void;
sources?: { title: string; text: string }[];
suggestions: { id: string; query: string }[];
}
>(function ConversationBubble(
{ message, type, className, feedback, handleFeedback, sources },
{
message,
type,
className,
feedback,
handleFeedback,
sources,
suggestions = suggest,
},
ref,
) {
const [showFeedback, setShowFeedback] = useState(false);
Expand All @@ -40,6 +50,14 @@ const ConversationBubble = forwardRef<
}, 2000);
};

const handleSuggestionClick = (
e: React.MouseEvent<HTMLDivElement, MouseEvent>,
suggestionId: string,
) => {
e.preventDefault();
console.log(suggestionId);
};

const List = ({
ordered,
children,
Expand Down Expand Up @@ -211,6 +229,19 @@ const ConversationBubble = forwardRef<
</div>
</div>
)}
<div className="ml-5 mt-2 flex max-w-[800px] flex-col gap-y-2">
{suggestions.map((suggestion, index) => (
<div
key={index}
onClick={(e) => handleSuggestionClick(e, suggestion.id)}
className="hover: rounded-3xl border border-[#7D54D1] py-1 px-4 text-left transition-colors duration-300 ease-in-out hover:bg-[#7D54D1]"
>
<p className="m-1 text-sm font-semibold leading-6 text-[#7D54D1] transition-colors duration-300 ease-in-out hover:text-white">
{suggestion.query}
</p>
</div>
))}
</div>
</div>
);
}
Expand Down