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

tooltips on copilot #28

Closed
wants to merge 4 commits into from
Closed

tooltips on copilot #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a155ecb
tooltips on copilot
SanderGi May 28, 2024
6b83c7f
move to rendermarkdown
SanderGi May 28, 2024
edc7898
show tooltip on mouse hover
anish-work Aug 20, 2024
8bc9c88
remove js for tooltip
anish-work Aug 21, 2024
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
4 changes: 2 additions & 2 deletions app/base.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -269,8 +269,8 @@ function RenderedTreeNode({
return <RenderedHTML body={body} {...args} />;
}
case "markdown": {
const { body, lineClamp, ...args } = props;
return <RenderedMarkdown body={body} lineClamp={lineClamp} {...args} />;
const { body, lineClamp, tooltip, tooltip_direction, ...args } = props;
return <RenderedMarkdown body={body} lineClamp={lineClamp} tooltip={tooltip} tooltip_direction={tooltip_direction} {...args} />;
}
case "textarea": {
return <GooeyTextarea props={props} state={state} />;
Expand Down
26 changes: 14 additions & 12 deletions app/gooeyInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export function GooeyTextarea({
props: Record<string, any>;
state: Record<string, any>;
}) {
const { label, name, defaultValue, ...args } = props;
const { label, name, defaultValue, tooltip, tooltip_direction, ...args } = props;
const [inputRef, value, setValue] = useGooeyStringInput<HTMLTextAreaElement>({
state,
name,
Expand All @@ -18,7 +18,7 @@ export function GooeyTextarea({
<div className="gui-input gui-input-textarea">
{label && (
<label>
<RenderedMarkdown body={label} />
<RenderedMarkdown body={label} tooltip={tooltip} tooltip_direction={tooltip_direction} />
</label>
)}
<div>
Expand All @@ -45,19 +45,17 @@ export function GooeyInput({
state: Record<string, any>;
className: string;
}) {
const { label, name, defaultValue, ...args } = props;
const { label, name, defaultValue, tooltip, tooltip_direction, ...args } = props;
const [inputRef, value, setValue] = useGooeyStringInput<HTMLInputElement>({
state,
name,
defaultValue,
});
return (
<div className={className}>
{label && (
<label htmlFor={id}>
<RenderedMarkdown body={label} />
</label>
)}
<label htmlFor={id}>
<RenderedMarkdown body={label} tooltip={tooltip} tooltip_direction={tooltip_direction} />
</label>
<input
ref={inputRef}
id={id}
Expand Down Expand Up @@ -120,7 +118,7 @@ export function GooeyCheckbox({
state: Record<string, any>;
className: string;
}) {
const { label, name, defaultChecked, ...args } = props;
const { label, name, defaultChecked, tooltip, tooltip_direction, ...args } = props;
const inputRef = useGooeyCheckedInput({
stateChecked: state[name],
defaultChecked,
Expand All @@ -135,7 +133,9 @@ export function GooeyCheckbox({
{...args}
/>
<label htmlFor={id}>
<RenderedMarkdown body={label} />
<span>
<RenderedMarkdown body={label} tooltip={tooltip} tooltip_direction={tooltip_direction} tooltip_iconStyle={{marginTop: "0", verticalAlign: "baseline"}} />
</span>
</label>
</div>
);
Expand All @@ -152,7 +152,7 @@ export function GooeyRadio({
state: Record<string, any>;
className: string;
}) {
const { label, name, value, defaultChecked, ...args } = props;
const { label, name, value, defaultChecked, tooltip, tooltip_direction, ...args } = props;
const inputRef = useGooeyCheckedInput({
stateChecked: state[name] == value,
defaultChecked,
Expand All @@ -169,7 +169,9 @@ export function GooeyRadio({
{...args}
/>
<label htmlFor={id}>
<RenderedMarkdown body={label} />
<span>
<RenderedMarkdown body={label} tooltip={tooltip} tooltip_direction={tooltip_direction} tooltip_iconStyle={{marginTop: "0", verticalAlign: "baseline"}} />
</span>
</label>
</div>
);
Expand Down
2 changes: 2 additions & 0 deletions app/renderedHTML.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { Link } from "@remix-run/react";
export function RenderedHTML({
body,
lineClamp,
children,
...attrs
}: {
body: string;
Expand All @@ -27,6 +28,7 @@ export function RenderedHTML({
<LineClamp lines={lineClamp} key={body}>
<span className="gui-html-container" {...attrs}>
{parsedElements}
{children}
</span>
</LineClamp>
);
Expand Down
58 changes: 50 additions & 8 deletions app/renderedMarkdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,51 @@
import { marked } from "marked";
import { RenderedHTML } from "~/renderedHTML";

export function GooeyTooltip(props: {
text: string;
direction?: "left";
iconStyle?: Record<string, string>;
}) {
return (
<span
className={
"gui_tooltip" +
(props.direction
? " gui_tooltip--" + props.direction
: " gui_tooltip--right")
}
>
<i
role="button"
className="fa-regular fa-circle-info"
style={{ height: "16px", ...props.iconStyle }}
></i>
<span className="tooltip_text">
<RenderedMarkdown body={props.text} className="" />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This dependency loop is a bit confusing, can you refactor to have 3 widgets perhaps, RenderedMarkdownRaw (w/o tooltip), RenderedMarkdown and GooeyTooltip ?

</span>
</span>
);
}

export function RenderedMarkdown({
body,
lineClamp,
className,
tooltip,
tooltip_direction,
tooltip_iconStyle,
...attrs
}: // allowUnsafeHTML,
{
body: string;
lineClamp?: number;
[attr: string]: any;
// allowUnsafeHTML?: boolean;
}) {
{
body: string;
lineClamp?: number;
className?: string;
tooltip?: string;
tooltip_direction?: "left";
tooltip_iconStyle?: Record<string, string>;
[attr: string]: any;
// allowUnsafeHTML?: boolean;
}) {
if (!body) return <></>;
let html = marked.parse(body, {
gfm: true,
Expand All @@ -25,8 +59,16 @@ export function RenderedMarkdown({
key={body}
body={html}
lineClamp={lineClamp}
className="gui-html-container gui-md-container"
className={className ?? "gui-html-container gui-md-container"}
{...attrs}
/>
>
{tooltip && (
<GooeyTooltip
text={tooltip}
direction={tooltip_direction}
iconStyle={tooltip_iconStyle}
/>
)}
</RenderedHTML>
);
}
125 changes: 110 additions & 15 deletions app/styles/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@
.streamlit-like-btn:hover,
.streamlit-like-btn:active {
cursor: pointer;
font-family: avenir-lt-w01_85-heavy1475544,avenir-lt-w05_85-heavy,"Space Grotesk", sans-serif;
font-family: avenir-lt-w01_85-heavy1475544, avenir-lt-w05_85-heavy,
"Space Grotesk", sans-serif;
font-size: 15px;
text-decoration: none !important;
color: white !important;
Expand Down Expand Up @@ -52,7 +53,8 @@
}

.btn.btn-theme.replicate-nav.active:hover {
background: #a5ffee; /* mint */;
background: #a5ffee;
/* mint */
color: black;
border: 1px solid transparent;
}
Expand Down Expand Up @@ -138,7 +140,8 @@ body {
color: #000;
}

.semobold, .semibold {
.semobold,
.semibold {
font-weight: 600;
}

Expand Down Expand Up @@ -166,8 +169,14 @@ a:hover {
text-decoration-thickness: 2px;
}

h1, h2, h3, h4, h5, h6 {
font-family: avenir-lt-w01_85-heavy1475544,avenir-lt-w05_85-heavy,"avenir-lt-w05_85-heavy","Space Grotesk", sans-serif;
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: avenir-lt-w01_85-heavy1475544, avenir-lt-w05_85-heavy,
"avenir-lt-w05_85-heavy", "Space Grotesk", sans-serif;
}
h1 {
font-size: 32px;
Expand Down Expand Up @@ -511,7 +520,7 @@ textarea:disabled {
.btn {
margin: 0 0 0 1px;
border-radius: 6px;
/* font-weight: 800; */
/* font-weight: 800; */
}

.btn.btn-theme {
Expand All @@ -537,10 +546,10 @@ textarea:disabled {
background-color: #fff0f5;
color: #000;
*/
border: 1px solid #c9c9c9;
transition: all .2s ease-in;
background-color: #fff;
color: black;
border: 1px solid #c9c9c9;
transition: all 0.2s ease-in;
background-color: #fff;
color: black;
}
.btn-theme.btn-secondary:hover {
background-color: #fff0f5; /* #a5ffee; mint */
Expand All @@ -561,10 +570,6 @@ textarea:disabled {
border: 1px solid transparent;
}





.bg-light {
padding: 15px 20px;
background-color: #f2f2f2 !important;
Expand Down Expand Up @@ -753,4 +758,94 @@ a.text-primary:hover {
}
.cm-lineNumbers .cm-gutterElement {
min-width: 36px !important;
}
}

/* Tooltip hide/show */
.gui_tooltip {
position: relative;
font-size: 16px;
}

.gui-md-container:has(> .gui_tooltip) {
display: flex;
}

.gui_tooltip i {
vertical-align: bottom;
transform: translate(4px, 2.5px);
}

.gui-input label .gui_tooltip p,
.gui_tooltip p {
margin: 0;
padding: 0;
color: black;
}

.gui_tooltip .tooltip_text {
margin: 0;
padding: 0;
}

.gui_tooltip .tooltip_text {
position: absolute;
width: max-content;
max-width: 70vw;
visibility: hidden;
background-color: white;
border: 1px solid whitesmoke;
padding: 10px;
border-radius: 8px;
z-index: 99999;
font-weight: lighter;
line-height: normal;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
inset: 0px auto auto 0px;
}

.gui_tooltip:hover .tooltip_text {
visibility: visible;
}

.tooltip_text .gui_tooltip--overflown {
top: 100%;
left: 50%;
margin-left: -100px;
}

/* Tooltip positions */
@media (max-width: 768px) {
.gui_tooltip .tooltip_text {
top: 100%;
left: 50%;
margin-left: -100px;
}
}

@media (min-width: 768px) {
.gui_tooltip .tooltip_text {
max-width: 40vw;
}

.gui_tooltip--right .tooltip_text {
top: -5px;
left: 150%;
}

.gui_tooltip--left .tooltip_text {
top: -5px;
right: 105%;
}

.gui_tooltip--top .tooltip_text {
bottom: 100%;
left: 50%;
margin-left: -60px;
}

.gui_tooltip--bottom .tooltip_text {
top: 100%;
left: 50%;
margin-left: -60px;
}
}
Loading
Loading