12865054690

Committed 20 Jan 2025 09:35AM CUT coverage: 64.112%. Remained the same

Build # 12865054690

Build Type

Pull #117

github

Committed by

web-flow

Commit Message

Merge 90dfd8fbe into 0d9d75226

Pull Request Pull Request #117: chore(deps): bump @hey-api/client-fetch from 0.6.0 to 0.7.0

Run Details

228 of 432 branches covered (52.78%)

Branch coverage included in aggregate %.

458 of 638 relevant lines covered (71.79%)

56.89 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

3.23

/src/features/workspace-system-prompt/components/system-prompt-editor.tsx

import Editor, { type Theme } from "@monaco-editor/react";
import {
  Button,
  Card,
  CardBody,
  CardFooter,
  DarkModeContext,
  LinkButton,
  Text,
} from "@stacklok/ui-kit";
import {
  Dispatch,
  SetStateAction,
  useContext,
  useEffect,
  useState,
} from "react";
import { usePostSystemPrompt } from "../hooks/use-post-system-prompt";
import { Check } from "lucide-react";

type DarkModeContextValue = {
  preference: "dark" | "light" | null;
  override: "dark" | "light" | null;
};

const DEFAULT_VALUE = `You are a security expert conducting a thorough code review.\nIdentify potential security vulnerabilities, suggest improvements, and explain security best practices.`;

function inferDarkMode(
  contextValue:
    | null
    | [DarkModeContextValue, Dispatch<SetStateAction<DarkModeContextValue>>],
): Theme {
  if (contextValue === null) return "light";

  // Handle override
  if (contextValue[0].override === "dark") return "vs-dark";
  if (contextValue[0].override === "light") return "light";

  // Handle preference
  if (contextValue[0].preference === "dark") return "vs-dark";
  return "light";
}

function useSavedStatus() {
  const [saved, setSaved] = useState<boolean>(false);

  useEffect(() => {
    const id = setTimeout(() => setSaved(false), 2000);
    return () => clearTimeout(id);
  }, [saved]);

  return { saved, setSaved };
}

export function SystemPromptEditor({ className }: { className?: string }) {
  const context = useContext(DarkModeContext);
  const theme: Theme = inferDarkMode(context);

  const [value, setValue] = useState<string>(() => DEFAULT_VALUE);

  const { mutate, isPending } = usePostSystemPrompt();

  const { saved, setSaved } = useSavedStatus();

  return (
    <Card className={className}>
      <CardBody>
        <Text className="text-primary">Custom prompt</Text>
        <Text className="text-secondary mb-4">
          Pass custom instructions to your LLM to augment it's behavior, and
          save time & tokens.
        </Text>
        <div className="border border-gray-200 rounded overflow-hidden">
          <Editor
            options={{
              minimap: { enabled: false },
            }}
            value={value}
            onChange={(v) => setValue(v ?? "")}
            height="20rem"
            defaultLanguage="Markdown"
            theme={theme}
            className="bg-base"
            defaultValue="<!-- Add any additional prompts you would like to pass to your LLM here. -->"
          />
        </div>
      </CardBody>
      <CardFooter className="justify-end gap-2">
        <LinkButton variant="secondary">Cancel</LinkButton>
        <Button
          isPending={isPending}
          isDisabled={saved}
          onPress={() => {
            mutate(value, {
              onSuccess: () => setSaved(true),
            });
          }}
        >
          {saved ? (
            <>
              <span>Saved</span> <Check />
            </>
          ) : (
            "Save changes"
          )}
        </Button>
      </CardFooter>
    </Card>
  );
}

1	import Editor, { type Theme } from "@monaco-editor/react";
2	import {
3	Button,
4	Card,
5	CardBody,
6	CardFooter,
7	DarkModeContext,
8	LinkButton,
9	Text,
10	} from "@stacklok/ui-kit";
11	import {
12	Dispatch,
13	SetStateAction,
14	useContext,
15	useEffect,
16	useState,
17	} from "react";
18	import { usePostSystemPrompt } from "../hooks/use-post-system-prompt";
19	import { Check } from "lucide-react";
20
21	type DarkModeContextValue = {
22	preference: "dark" \| "light" \| null;
23	override: "dark" \| "light" \| null;
24	};
25
26	const DEFAULT_VALUE = `You are a security expert conducting a thorough code review.\nIdentify potential security vulnerabilities, suggest improvements, and explain security best practices.`;	1✔
27
28	function inferDarkMode(
29	contextValue:
30	\| null
31	\| [DarkModeContextValue, Dispatch<SetStateAction<DarkModeContextValue>>],
32	): Theme {
33	if (contextValue === null) return "light";	×
34
35	// Handle override
36	if (contextValue[0].override === "dark") return "vs-dark";	×
37	if (contextValue[0].override === "light") return "light";	×
38
39	// Handle preference
40	if (contextValue[0].preference === "dark") return "vs-dark";	×
41	return "light";	×
42	}
43
44	function useSavedStatus() {
45	const [saved, setSaved] = useState<boolean>(false);	×
46
47	useEffect(() => {	×
48	const id = setTimeout(() => setSaved(false), 2000);	×
49	return () => clearTimeout(id);	×
50	}, [saved]);
51
52	return { saved, setSaved };	×
53	}
54
55	export function SystemPromptEditor({ className }: { className?: string }) {
56	const context = useContext(DarkModeContext);	×
57	const theme: Theme = inferDarkMode(context);	×
58
59	const [value, setValue] = useState<string>(() => DEFAULT_VALUE);	×
60
61	const { mutate, isPending } = usePostSystemPrompt();	×
62
63	const { saved, setSaved } = useSavedStatus();	×
64
65	return (
66	<Card className={className}>
67	<CardBody>
68	<Text className="text-primary">Custom prompt</Text>
69	<Text className="text-secondary mb-4">
70	Pass custom instructions to your LLM to augment it's behavior, and
71	save time & tokens.
72	</Text>
73	<div className="border border-gray-200 rounded overflow-hidden">
74	<Editor
75	options={{
76	minimap: { enabled: false },
77	}}
78	value={value}
79	onChange={(v) => setValue(v ?? "")}	×
80	height="20rem"
81	defaultLanguage="Markdown"
82	theme={theme}
83	className="bg-base"
84	defaultValue="<!-- Add any additional prompts you would like to pass to your LLM here. -->"
85	/>
86	</div>
87	</CardBody>
88	<CardFooter className="justify-end gap-2">
89	<LinkButton variant="secondary">Cancel</LinkButton>
90	<Button
91	isPending={isPending}
92	isDisabled={saved}
93	onPress={() => {
94	mutate(value, {	×
95	onSuccess: () => setSaved(true),	×
96	});
97	}}
98	>
99	{saved ? (	×
100	<>
101	<span>Saved</span> <Check />
102	</>
103	) : (
104	"Save changes"
105	)}
106	</Button>
107	</CardFooter>
108	</Card>
109	);
110	}

stacklok / codegate-ui / 12865054690

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous