Skip to content

Commit 08380b8

Browse files
yamalightyamalight
committed
[WIP] Make new class work in UI (for the most part)
1 parent 3115b2c commit 08380b8

35 files changed

+1194
-324
lines changed

‎app/components/pipeline/GeneratePipeline.tsx

+4-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react';
22
import { SparklesIcon } from '@heroicons/react/24/solid';
33
import clsx from 'clsx';
4-
import { useMemo, useState } from 'react';
4+
import { useState } from 'react';
55
import { Button } from '~/components/catalyst/button';
66
import {
77
Dialog,
@@ -12,7 +12,7 @@ import {
1212
import { Field, FieldGroup, Label } from '~/components/catalyst/fieldset';
1313
import { Textarea } from '~/components/catalyst/textarea';
1414
import { Spinner } from '~/components/Spinner';
15-
import { useLitlytics } from '~/store/store';
15+
import { useLitlytics } from '~/store/WithLitLytics';
1616
import { RefinePipeline } from './RefinePipeline';
1717

1818
const tabClass = clsx(
@@ -29,7 +29,6 @@ export default function GeneratePipeline() {
2929
const [isOpen, setIsOpen] = useState(false);
3030
const [loading, setLoading] = useState(false);
3131
const [error, setError] = useState<Error>();
32-
const pipeline = useMemo(() => litlytics.pipeline, [litlytics.pipeline]);
3332

3433
const runPlan = async () => {
3534
try {
@@ -84,7 +83,7 @@ export default function GeneratePipeline() {
8483
<TabGroup selectedIndex={selectedTab} onChange={setSelectedTab}>
8584
<TabList className="flex gap-4">
8685
<Tab className={tabClass}>Plan</Tab>
87-
{Boolean(pipeline.pipelinePlan?.length) && (
86+
{Boolean(litlytics.pipeline.pipelinePlan?.length) && (
8887
<Tab className={tabClass}>Refine plan</Tab>
8988
)}
9089
</TabList>
@@ -97,7 +96,7 @@ export default function GeneratePipeline() {
9796
rows={5}
9897
name="task"
9998
placeholder="Task description"
100-
value={pipeline.pipelineDescription}
99+
value={litlytics.pipeline.pipelineDescription}
101100
onChange={(e) => {
102101
litlytics.setPipeline({
103102
pipelineDescription: e.target.value,

‎app/components/pipeline/PipelineBuilder.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { useLitlytics } from '~/store/store';
1+
import { useLitlytics } from '~/store/WithLitLytics';
22
import { Background } from '../Background';
3-
import { OutputNode } from './nodes/OutputNode';
4-
import { SourceNode } from './nodes/SourceNode';
3+
import { OutputNode } from './nodes/output/OutputNode';
4+
import { SourceNode } from './nodes/source/SourceNode';
55
import { StepNode } from './nodes/StepNode';
66

77
export function PipelineBuilder() {

‎app/components/pipeline/RefinePipeline.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Button } from '~/components/catalyst/button';
33
import { Textarea } from '~/components/catalyst/textarea';
44
import { CustomMarkdown } from '~/components/markdown/Markdown';
55
import { Spinner } from '~/components/Spinner';
6-
import { useLitlytics } from '~/store/store';
6+
import { useLitlytics } from '~/store/WithLitLytics';
77

88
export function RefinePipeline({ hide }: { hide: () => void }) {
99
const litlytics = useLitlytics();
@@ -18,9 +18,11 @@ export function RefinePipeline({ hide }: { hide: () => void }) {
1818

1919
try {
2020
// generate plan from LLM
21+
litlytics.setPipelineStatus({ status: 'refine' });
2122
await litlytics.refinePipeline({
2223
refineRequest: refine,
2324
});
25+
litlytics.setPipelineStatus({ status: 'init' });
2426
setRefine('');
2527
} catch (err) {
2628
setError(err as Error);
@@ -57,7 +59,7 @@ export function RefinePipeline({ hide }: { hide: () => void }) {
5759
<h1 className="m-0">Suggested pipeline:</h1>
5860
</div>
5961

60-
<CustomMarkdown>{litlytics.pipeline.pipelinePlan}</CustomMarkdown>
62+
<CustomMarkdown>{`${litlytics.pipeline.pipelinePlan}`}</CustomMarkdown>
6163
<div className="flex gap-1">
6264
<Textarea
6365
rows={2}

‎app/components/pipeline/nodes/NodeConnector.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { PlusIcon } from '@heroicons/react/24/solid';
22
import clsx from 'clsx';
33
import {
4+
OUTPUT_ID,
45
ProcessingStep,
56
ProcessingStepTypes,
67
SourceStep,
@@ -24,7 +25,7 @@ import { Textarea } from '~/components/catalyst/textarea';
2425
import { Spinner } from '~/components/Spinner';
2526
import { CodeEditor } from '~/components/step/CodeEditor';
2627
import { stepInputLabels } from '~/components/step/util';
27-
import { useLitlytics } from '~/store/store';
28+
import { useLitlytics } from '~/store/WithLitLytics';
2829
import GeneratePipeline from '../GeneratePipeline';
2930

3031
const defaultStep: ProcessingStep = {
@@ -97,8 +98,7 @@ export function NodeConnector({
9798
if (currentStep?.type === 'source') {
9899
// connect new step to next node
99100
const nextNodeId =
100-
litlytics.pipeline.source.connectsTo.at(0) ??
101-
litlytics.pipeline.output.id;
101+
litlytics.pipeline.source.connectsTo.at(0) ?? OUTPUT_ID;
102102
newStep.connectsTo = [nextNodeId];
103103
// add
104104
litlytics.setPipeline({
@@ -113,7 +113,7 @@ export function NodeConnector({
113113
const nextNodeId =
114114
litlytics.pipeline.steps
115115
.find((s) => s.id === currentStep?.id)
116-
?.connectsTo.at(0) ?? litlytics.pipeline.output.id;
116+
?.connectsTo.at(0) ?? OUTPUT_ID;
117117
newStep.connectsTo = [nextNodeId];
118118
// add
119119
litlytics.setPipeline({

‎app/components/pipeline/nodes/StepNode.tsx

+9-26
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,7 @@ import {
1010
XMarkIcon,
1111
} from '@heroicons/react/24/solid';
1212
import clsx from 'clsx';
13-
import { useAtomValue } from 'jotai';
14-
import {
15-
modelCosts,
16-
outputProviders,
17-
ProcessingStep,
18-
StepInputs,
19-
} from 'litlytics';
13+
import { modelCosts, OUTPUT_ID, ProcessingStep, StepInputs } from 'litlytics';
2014
import _ from 'lodash';
2115
import { ChangeEvent, useMemo, useState } from 'react';
2216
import { Badge } from '~/components/catalyst/badge';
@@ -38,27 +32,19 @@ import { CodeEditor } from '~/components/step/CodeEditor';
3832
import { StepTest } from '~/components/step/StepTest';
3933
import { stepInputLabels } from '~/components/step/util';
4034
import { CentIcon } from '~/components/ui/CentIcon';
41-
import { configAtom, useLitlytics } from '~/store/store';
35+
import { useLitlytics } from '~/store/WithLitLytics';
4236
import { NodeContent, NodeFrame, NodeHeader } from './NodeFrame';
4337

4438
export function StepNode({ data }: { data: ProcessingStep }) {
4539
const litlytics = useLitlytics();
46-
const litlyticsConfig = useAtomValue(configAtom);
4740
const [isOpen, setIsOpen] = useState(false);
4841
const [loading, setLoading] = useState(false);
4942
const [refine, setRefine] = useState('');
5043

51-
const output = useMemo(() => {
52-
const Output = outputProviders[litlytics.pipeline.output.outputType];
53-
const output = new Output(litlytics.pipeline);
54-
return output;
55-
}, [litlytics]);
56-
5744
const { averageTiming, averagePrompt, averageCompletion, averageCost } =
5845
useMemo(() => {
5946
// const timings = data.
60-
const cfg = output.getConfig();
61-
const results = Array.isArray(cfg.results) ? cfg.results : [cfg.results];
47+
const results = litlytics.docs;
6248
const res = results.filter((doc) => doc);
6349
if (!res.length) {
6450
return {};
@@ -87,19 +73,19 @@ export function StepNode({ data }: { data: ProcessingStep }) {
8773
completionTokens.length
8874
);
8975
const inputCost =
90-
litlyticsConfig.provider === 'ollama'
76+
litlytics.config.provider === 'ollama'
9177
? 0
92-
: modelCosts[litlyticsConfig.model!].input;
78+
: modelCosts[litlytics.config.model!].input;
9379
const outputCost =
94-
litlyticsConfig.provider === 'ollama'
80+
litlytics.config.provider === 'ollama'
9581
? 0
96-
: modelCosts[litlyticsConfig.model!].output;
82+
: modelCosts[litlytics.config.model!].output;
9783
const averageCost = _.round(
9884
averagePrompt * inputCost + averageCompletion * outputCost,
9985
3
10086
);
10187
return { averageTiming, averagePrompt, averageCompletion, averageCost };
102-
}, [output, data, litlyticsConfig]);
88+
}, [litlytics, data]);
10389

10490
const updateNodeByKey = (
10591
newVal: string | boolean | undefined,
@@ -154,7 +140,7 @@ export function StepNode({ data }: { data: ProcessingStep }) {
154140
.map((s) => {
155141
let connectsTo = s.connectsTo.filter((id) => id !== data.id);
156142
if (connectsTo.length === 0) {
157-
connectsTo = [litlytics.pipeline.output.id];
143+
connectsTo = [OUTPUT_ID];
158144
}
159145
return {
160146
...s,
@@ -174,9 +160,6 @@ export function StepNode({ data }: { data: ProcessingStep }) {
174160
connectsTo: sourceConnect,
175161
},
176162
steps: newSteps,
177-
output: {
178-
...litlytics.pipeline.output,
179-
},
180163
});
181164
};
182165

‎app/components/pipeline/nodes/components.ts

-35
This file was deleted.

‎app/components/pipeline/nodes/output/BasicOutput.tsx

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import {
2+
ClipboardDocumentCheckIcon,
3+
ClipboardDocumentIcon,
4+
} from '@heroicons/react/24/solid';
5+
import { Pipeline } from 'litlytics';
6+
import { useMemo, useState } from 'react';
7+
import { Button } from '~/components/catalyst/button';
8+
import { CustomMarkdown } from '~/components/markdown/Markdown';
9+
10+
export function BasicOutputRender({ pipeline }: { pipeline: Pipeline }) {
11+
const [copied, setCopied] = useState(false);
12+
const results = useMemo(() => pipeline.results, [pipeline]);
13+
const result = useMemo(() => {
14+
if (!results?.length) {
15+
return '';
16+
}
17+
18+
return results
19+
.map((res) => `## Result for "${res.doc.name}":\n\n${res.result}`)
20+
.join('\n\n')
21+
.trim();
22+
}, [results]);
23+
24+
const handleCopy = () => {
25+
navigator.clipboard.writeText(result);
26+
setCopied(true);
27+
setTimeout(() => setCopied(false), 2000);
28+
};
29+
30+
if (!results?.length) {
31+
return (
32+
<div className="prose prose-sm dark:prose-invert w-full max-w-full">
33+
<>No result</>
34+
</div>
35+
);
36+
}
37+
38+
return (
39+
<div className="flex flex-col w-full h-full overflow-auto">
40+
<div className="prose prose-sm dark:prose-invert w-full max-w-full">
41+
<Button plain onClick={handleCopy} className="!absolute top-1 right-2">
42+
{copied ? (
43+
<ClipboardDocumentCheckIcon className="fill-sky-500" />
44+
) : (
45+
<ClipboardDocumentIcon />
46+
)}
47+
</Button>
48+
<CustomMarkdown>{result}</CustomMarkdown>
49+
</div>
50+
</div>
51+
);
52+
}

0 commit comments

Comments
 (0)