Skip to content

Commit

Permalink
Merge pull request #732 from tone-row/dev
Browse files Browse the repository at this point in the history 
v1.57.1
  • Loading branch information
@rob-gordon
rob-gordon authored Sep 6, 2024
2 parents bd26416 + cc015e4 commit 1bd4914
Show file tree
Hide file tree
Showing 26 changed files with 334 additions and 303 deletions.
2 changes: 1 addition & 1 deletion app/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "app",
"version": "1.57.0",
"version": "1.57.1",
"main": "module/module.js",
"license": "MIT",
"scripts": {
Expand Down
49 changes: 30 additions & 19 deletions app/src/components/AiToolbar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Button2, IconButton2, Textarea } from "../ui/Shared";
import { CaretDown, CaretUp, MagicWand } from "phosphor-react";
import cx from "classnames";
import { t } from "@lingui/macro";
import { t, Trans } from "@lingui/macro";
import { createExamples } from "../pages/createExamples";
import {
Mode,
Expand Down Expand Up @@ -47,54 +47,65 @@ export function AiToolbar() {
const toggleOpen = () => setIsOpen(!isOpen);

const handleModeChange = (mode: Mode) => {
setMode(mode);
if (!isOpen) setIsOpen(true);
if (mode === currentMode && isOpen) {
setIsOpen(false);
} else {
setMode(mode);
setIsOpen(true);
}
};

const currentText = usePromptStore((state) => state.currentText);

const showAcceptDiffButton = diff && !isRunning;

return (
<div className="bg-purple-600/10 dark:bg-purple-800/20">
<div className="bg-white dark:bg-foreground border-b border-neutral-200 dark:border-neutral-800">
<div className="flex items-center justify-between p-2">
<div className="flex items-center space-x-2">
<div className="flex items-center gap-0.5">
<MagicWand
size={24}
className="text-purple-600 dark:text-white mx-1"
size={20}
className={cx("mx-2 transition-all duration-200", {
"text-purple-600 dark:text-purple-200 scale-110 -rotate-12":
isOpen,
"text-neutral-500 dark:text-neutral-400": !isOpen,
})}
/>
{!showAcceptDiffButton ? (
(["prompt", "convert", "edit"] as Mode[]).map((mode) => (
<Button2
key={mode}
color={mode === currentMode ? "purple" : "default"}
color={mode === currentMode && isOpen ? "purple" : "default"}
size="xs"
onClick={() => handleModeChange(mode)}
className={cx({
"hover:bg-white dark:hover:bg-neutral-700":
mode !== currentMode,
"dark:hover:bg-neutral-700": mode !== currentMode,
"dark:bg-purple-700 dark:text-purple-100":
mode === currentMode,
mode === currentMode && isOpen,
})}
>
{getModeTitle(mode)}
</Button2>
))
) : (
<span className="text-sm text-purple-600 dark:text-white">
Keep changes?
<Trans>Keep changes?</Trans>
</span>
)}
</div>
{!showAcceptDiffButton ? (
<IconButton2
onClick={toggleOpen}
color="purple"
color="default"
size="xs"
className="flex items-center justify-center dark:bg-purple-700/50 dark:text-purple-100"
className="flex items-center justify-center dark:bg-neutral-800 dark:text-neutral-400"
isLoading={isRunning}
>
{!isOpen ? <CaretDown size={16} /> : <CaretUp size={16} />}
{!isOpen ? (
<CaretDown size={16} weight="bold" />
) : (
<CaretUp size={16} weight="bold" />
)}
</IconButton2>
) : (
<div className="flex space-x-2">
Expand All @@ -109,17 +120,17 @@ export function AiToolbar() {
</div>
{isOpen && (
<div className="grid p-4 pt-0">
<p className="text-xs text-purple-600 dark:text-white mb-2 text-wrap-balance leading-normal">
<p className="text-xs font-medium text-neutral-400 dark:text-neutral-400 mb-1 text-wrap-balance leading-normal">
{getModeDescription(currentMode)}
</p>
<Textarea
value={currentText}
box={{
className:
"bg-white dark:bg-purple-800/50 !rounded-md w-full mb-2 border-2 border-purple-400 dark:border-purple-700 rounded-md focus:ring-purple-500 focus:border-purple-500",
"bg-white dark:bg-neutral-800 !rounded-md w-full mb-1 border border-neutral-400/50 dark:border-neutral-700 rounded-md focus:ring-neutral-500 focus:border-neutral-500",
}}
onChange={(e) => setCurrentText(e.target.value)}
className="resize-none dark:text-white dark:bg-transparent"
className="resize-none text-neutral-900 dark:text-neutral-100 bg-transparent"
disabled={isRunning}
onKeyDown={(e) => {
if (e.key === "Enter" && !e.shiftKey) {
Expand All @@ -132,7 +143,7 @@ export function AiToolbar() {
<Button2
color="purple"
size="xs"
className="dark:bg-purple-700/50 dark:text-purple-100"
className="dark:bg-purple-700 dark:hover:bg-purple-600 dark:text-purple-100"
disabled={isRunning}
onClick={runAiWithStore}
data-session-activity={`Run AI: ${currentMode}`}
Expand Down
26 changes: 7 additions & 19 deletions app/src/components/ConvertOnPasteOverlay.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { useEffect, useMemo } from "react";
import { getDefaultText } from "../lib/getDefaultText";
import { useEditorStore } from "../lib/useEditorStore";
import { usePromptStore, useRunAiWithStore } from "../lib/usePromptStore";
import { ArrowRight } from "phosphor-react";
import { Button2 } from "../ui/Shared";
import { Trans } from "@lingui/macro";
import { MagicWand } from "phosphor-react";
Expand Down Expand Up @@ -55,17 +54,17 @@ function Overlay() {
const isRunning = usePromptStore((s) => s.isRunning);
const pasted = useEditorStore((s) => s.userPasted);
return (
<div className="fixed bottom-0 left-0 right-0 z-50 convert-on-paste-overlay dark:from-purple-900/90 dark:via-purple-850/90 dark:to-purple-800/90 pb-6 pt-12 animate-overlayShow">
<div className="flex flex-col sm:flex-row items-center justify-between gap-4 w-screen max-w-4xl mx-auto px-4 animate-slideUpFadeLarge">
<p className="dark:text-purple-100 text-base font-medium text-wrap-balance leading-snug">
<div className="fixed bottom-0 left-0 right-0 z-50 bg-purple-800/80 backdrop-blur-lg py-6 animate-overlayShow">
<div className="grid sm:flex items-center gap-4 w-screen mx-auto px-6 animate-slideUpFadeLarge">
<p className="text-white text-sm font-semibold leading-tight text-wrap-balance">
<Trans>
Is this a document? Would you like to convert it to a flowchart?
Pasted content detected. Convert to Flowchart Fun syntax?
</Trans>
</p>
<div className="flex gap-3">
<div className="flex justify-end gap-3">
<Button2
color="inverted"
size="xs"
size="sm"
onClick={() => {
useEditorStore.setState({ userPasted: "" });
}}
Expand All @@ -74,29 +73,18 @@ function Overlay() {
</Button2>
<Button2
color="purple"
size="xs"
className="group"
size="sm"
leftIcon={<MagicWand size={18} weight="fill" />}
onClick={() => {
// first set the mode to convert, and add pasted text
usePromptStore.setState({
mode: "convert",
currentText: pasted,
});
// move this off the main thread
requestAnimationFrame(() => {
runAiWithStore();
// clear the pasted text
useEditorStore.setState({ userPasted: "" });
});
}}
rightIcon={
<ArrowRight
size={20}
weight="bold"
className="inline-block ml-2 group-hover:translate-x-1 transition-transform"
/>
}
isLoading={isRunning}
>
<Trans>Convert</Trans>
Expand Down
33 changes: 21 additions & 12 deletions app/src/components/FlowchartHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,17 +34,26 @@ export function FlowchartHeader() {
<header
className={classNames(
styles.HeaderTitle,
"flex items-center gap-2 justify-between flex-wrap p-4 md:p-2"
"grid gap-2 md:flex items-end justify-between p-4 md:p-2 md:mb-2"
)}
>
{isSandbox ? (
<FlowchartTitle title={title}>{pageTitle}</FlowchartTitle>
<div className="grid gap-0.5 content-end">
<FlowchartTitle title={title}>{pageTitle}</FlowchartTitle>
<p className="text-xs text-neutral-500 dark:text-neutral-300/80 font-medium leading-tight text-wrap-pretty">
<Trans>
Create flowcharts instantly: Type or paste text, see it
visualized.
</Trans>
</p>
</div>
) : (
<RenameButton key={pageTitle}>
<FlowchartTitle title={title}>{pageTitle}</FlowchartTitle>
</RenameButton>
)}
<div className="flex items-center gap-1 p-1 border-2 border-neutral-300 dark:border-neutral-700 rounded-xl">

<div className="flex items-center gap-1">
{isReadOnly && (
<span className="text-xs text-neutral-400 dark:text-neutral-600 font-extrabold uppercase tracking-tight">
<Trans>Read-only</Trans>
Expand All @@ -57,7 +66,7 @@ export function FlowchartHeader() {
<ShareDialog>
<Button2
onClick={() => setShareModal(true)}
leftIcon={<Share weight="bold" className="w-5 h-5" />}
leftIcon={<Share weight="bold" className="w-4 h-4" />}
aria-label="Export"
data-session-activity="Share Chart"
>
Expand All @@ -68,7 +77,7 @@ export function FlowchartHeader() {
) : null}
<DownloadDropdown>
<Button2
leftIcon={<DownloadSimple weight="bold" className="w-5 h-5" />}
leftIcon={<DownloadSimple weight="bold" className="w-4 h-4" />}
>
<Trans>Download</Trans>
</Button2>
Expand Down Expand Up @@ -96,7 +105,7 @@ function LogInToSaveButton() {
const navigate = useNavigate();
return (
<Button2
leftIcon={<FloppyDisk weight="bold" className="w-5 h-5" />}
leftIcon={<FloppyDisk weight="bold" className="w-4 h-4" />}
data-session-activity="Save Chart: Log in"
onClick={() => {
navigate("/l");
Expand All @@ -110,7 +119,7 @@ function LogInToSaveButton() {
function CannotSaveButton() {
return (
<Button2
leftIcon={<FloppyDisk weight="bold" className="w-5 h-5" />}
leftIcon={<FloppyDisk weight="bold" className="w-4 h-4" />}
data-session-activity="Save Chart: Upgrade"
onClick={() => {
showPaywall({
Expand Down Expand Up @@ -138,7 +147,7 @@ function CanSaveButton() {
>
<Dialog.Trigger asChild>
<Button2
leftIcon={<FloppyDisk weight="bold" className="w-5 h-5" />}
leftIcon={<FloppyDisk weight="bold" className="w-4 h-4" />}
data-session-activity="Save Chart"
onClick={() => {
setOpen(true);
Expand All @@ -157,7 +166,7 @@ function CanSaveButton() {
<Trans>How would you like to save your chart?</Trans>
</p>
<Button2
leftIcon={<Cloud weight="bold" className="w-5 h-5" />}
leftIcon={<Cloud weight="bold" className="w-4 h-4" />}
data-session-activity="Save Chart: Cloud"
onClick={() => {
setCreateType("cloud");
Expand All @@ -166,7 +175,7 @@ function CanSaveButton() {
<Trans>Save to Cloud</Trans>
</Button2>
<Button2
leftIcon={<File weight="bold" className="w-5 h-5" />}
leftIcon={<File weight="bold" className="w-4 h-4" />}
data-session-activity="Save Chart: File"
onClick={() => {
setOpen(false);
Expand Down Expand Up @@ -239,7 +248,7 @@ function SaveForm() {
/>
</label>
<Button2
leftIcon={<FloppyDisk className="w-5 h-5" />}
leftIcon={<FloppyDisk className="w-4 h-4" />}
isLoading={createChartMutation.isLoading}
>
Save
Expand All @@ -256,7 +265,7 @@ function FlowchartTitle({
return (
<h1
className={classNames(
"text-lg sm:text-xl md:text-2xl font-bold -translate-y-[2px]",
"text-lg sm:text-xl md:text-[30px] tracking-[0.5px] font-bold -translate-y-[2px]",
className
)}
{...props}
Expand Down
4 changes: 1 addition & 3 deletions app/src/components/LoadTemplateDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,8 +48,6 @@ export function LoadTemplateDialog() {
});
}, [template, replaceContent, reset]);

console.log(templates);

return (
<Dialog.Root
open={open}
Expand Down Expand Up @@ -162,7 +160,7 @@ export function LoadTemplateDialog() {
<button
key={template}
onClick={() => setTemplate(template)}
className="overflow-hidden shadow-sm opacity-70 hover:opacity-100 aspect-square"
className="overflow-hidden shadow-sm opacity-70 dark:opacity-90 hover:opacity-100 aspect-square"
>
<img
key={template}
Expand Down
50 changes: 5 additions & 45 deletions app/src/index.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&display=swap");

@tailwind base;
@tailwind components;
Expand Down Expand Up @@ -178,6 +178,10 @@ div[data-reach-tooltip] {
text-wrap: balance;
}

.text-wrap-pretty {
text-wrap: pretty;
}

#theme-editor-wrapper > section {
overflow: hidden;
}
Expand Down Expand Up @@ -452,50 +456,6 @@ body.dark .pricing-highlights {
@apply max-h-[300px] overflow-y-auto;
}

.convert-on-paste-overlay {
background: linear-gradient(
to bottom,
hsla(251.35, 60.66%, 88.04%, 0) 0%,
hsla(251.35, 60.66%, 88.04%, 0.013) 8.1%,
hsla(251.35, 60.66%, 88.04%, 0.049) 15.5%,
hsla(251.35, 60.66%, 88.04%, 0.104) 22.5%,
hsla(251.35, 60.66%, 88.04%, 0.175) 29%,
hsla(251.35, 60.66%, 88.04%, 0.259) 35.3%,
hsla(251.35, 60.66%, 88.04%, 0.352) 41.2%,
hsla(251.35, 60.66%, 88.04%, 0.45) 47.1%,
hsla(251.35, 60.66%, 88.04%, 0.55) 52.9%,
hsla(251.35, 60.66%, 88.04%, 0.648) 58.8%,
hsla(251.35, 60.66%, 88.04%, 0.741) 64.7%,
hsla(251.35, 60.66%, 88.04%, 0.825) 71%,
hsla(251.35, 60.66%, 88.04%, 0.896) 77.5%,
hsla(251.35, 60.66%, 88.04%, 0.951) 84.5%,
hsla(251.35, 60.66%, 88.04%, 0.987) 91.9%,
hsl(251.35, 60.66%, 88.04%) 100%
);
}

body.dark .convert-on-paste-overlay {
background: linear-gradient(
to bottom,
hsla(265.79, 79.08%, 30%, 0) 0%,
hsla(265.79, 79.08%, 30%, 0.013) 8.1%,
hsla(265.79, 79.08%, 30%, 0.049) 15.5%,
hsla(265.79, 79.08%, 30%, 0.104) 22.5%,
hsla(265.79, 79.08%, 30%, 0.175) 29%,
hsla(265.79, 79.08%, 30%, 0.259) 35.3%,
hsla(265.79, 79.08%, 30%, 0.352) 41.2%,
hsla(265.79, 79.08%, 30%, 0.45) 47.1%,
hsla(265.79, 79.08%, 30%, 0.55) 52.9%,
hsla(265.79, 79.08%, 30%, 0.648) 58.8%,
hsla(265.79, 79.08%, 30%, 0.741) 64.7%,
hsla(265.79, 79.08%, 30%, 0.825) 71%,
hsla(265.79, 79.08%, 30%, 0.896) 77.5%,
hsla(265.79, 79.08%, 30%, 0.951) 84.5%,
hsla(265.79, 79.08%, 30%, 0.987) 91.9%,
hsl(265.79, 79.08%, 30%) 100%
);
}

.clip-path-rectangle {
@apply relative;
clip-path: polygon(
Expand Down
2 changes: 1 addition & 1 deletion app/src/lib/getSize.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ export function getSize(label: string, classes: string[]) {
.join(" ")}`
);

resizer.innerHTML = text;
resizer.textContent = text;

if (resizer.firstChild) {
const range = document.createRange();
Expand Down
Loading

0 comments on commit 1bd4914

Please sign in to comment.