diff --git a/src/features/providers/components/table-providers.tsx b/src/features/providers/components/table-providers.tsx
index 8b8a886a..6f4de724 100644
--- a/src/features/providers/components/table-providers.tsx
+++ b/src/features/providers/components/table-providers.tsx
@@ -33,12 +33,19 @@ const COLUMNS: Column[] = [
id: "provider",
isRowHeader: true,
children: "Name & Description",
- width: "40%",
+ minWidth: 450,
+ maxWidth: 520,
},
- { id: "type", children: "Provider", width: "10%", className: "capitalize" },
- { id: "endpoint", children: "Endpoint", width: "20%", minWidth: 250 },
- { id: "auth", children: "Authentication", width: "20%" },
- { id: "configuration", alignment: "end", width: "10%", children: "" },
+ {
+ id: "type",
+ children: "Provider",
+ minWidth: 110,
+ maxWidth: 130,
+ className: "capitalize",
+ },
+ { id: "endpoint", children: "Endpoint", minWidth: 250 },
+ { id: "auth", children: "Authentication", minWidth: 140 },
+ { id: "configuration", alignment: "end", minWidth: 40, children: "" },
];
function CellRenderer({
diff --git a/src/features/workspace/components/__tests__/archive-workspace.test.tsx b/src/features/workspace/components/__tests__/archive-workspace.test.tsx
index 9a6b32de..e0fde0c3 100644
--- a/src/features/workspace/components/__tests__/archive-workspace.test.tsx
+++ b/src/features/workspace/components/__tests__/archive-workspace.test.tsx
@@ -8,7 +8,7 @@ import { mswEndpoint } from "@/test/msw-endpoint";
test("has correct buttons when not archived", async () => {
const { getByRole, queryByRole } = render(
-
,
+
);
expect(getByRole("button", { name: /archive/i })).toBeVisible();
@@ -17,7 +17,7 @@ test("has correct buttons when not archived", async () => {
test("has correct buttons when archived", async () => {
const { getByRole } = render(
-
,
+
);
expect(getByRole("button", { name: /restore/i })).toBeVisible();
expect(getByRole("button", { name: /permanently delete/i })).toBeVisible();
@@ -25,7 +25,7 @@ test("has correct buttons when archived", async () => {
test("can archive workspace", async () => {
const { getByText, getByRole } = render(
-
,
+
);
await userEvent.click(getByRole("button", { name: /archive/i }));
@@ -37,7 +37,7 @@ test("can archive workspace", async () => {
test("can restore archived workspace", async () => {
const { getByText, getByRole } = render(
-
,
+
);
await userEvent.click(getByRole("button", { name: /restore/i }));
@@ -49,7 +49,7 @@ test("can restore archived workspace", async () => {
test("can permanently delete archived workspace", async () => {
const { getByText, getByRole } = render(
-
,
+
);
await userEvent.click(getByRole("button", { name: /permanently delete/i }));
@@ -76,11 +76,11 @@ test("can't archive active workspace", async () => {
last_updated: new Date(Date.now()).toISOString(),
},
],
- }),
- ),
+ })
+ )
);
const { getByRole } = render(
-
,
+
);
await waitFor(() => {
@@ -91,7 +91,7 @@ test("can't archive active workspace", async () => {
test("can't archive default workspace", async () => {
const { getByRole } = render(
-
,
+
);
await waitFor(() => {
diff --git a/src/features/workspace/components/__tests__/workspace-custom-instructions.test.tsx b/src/features/workspace/components/__tests__/workspace-custom-instructions.test.tsx
index b9d83c1f..01ebbecc 100644
--- a/src/features/workspace/components/__tests__/workspace-custom-instructions.test.tsx
+++ b/src/features/workspace/components/__tests__/workspace-custom-instructions.test.tsx
@@ -22,7 +22,7 @@ vi.mock("@monaco-editor/react", () => {
const renderComponent = () =>
render(
-
,
+
);
test("can update custom instructions", async () => {
@@ -31,8 +31,8 @@ test("can update custom instructions", async () => {
mswEndpoint("/api/v1/workspaces/:workspace_name/custom-instructions"),
() => {
return HttpResponse.json({ prompt: "initial prompt from server" });
- },
- ),
+ }
+ )
);
const { getByRole, getByText } = renderComponent();
@@ -53,15 +53,15 @@ test("can update custom instructions", async () => {
mswEndpoint("/api/v1/workspaces/:workspace_name/custom-instructions"),
() => {
return HttpResponse.json({ prompt: "new prompt from test" });
- },
- ),
+ }
+ )
);
await userEvent.click(getByRole("button", { name: /Save/i }));
await waitFor(() => {
expect(
- getByText(/successfully updated custom instructions/i),
+ getByText(/successfully updated custom instructions/i)
).toBeVisible();
});
diff --git a/src/features/workspace/components/__tests__/workspace-name.test.tsx b/src/features/workspace/components/__tests__/workspace-name.test.tsx
index 84bfc93f..27e32f93 100644
--- a/src/features/workspace/components/__tests__/workspace-name.test.tsx
+++ b/src/features/workspace/components/__tests__/workspace-name.test.tsx
@@ -8,7 +8,7 @@ import { mswEndpoint } from "@/test/msw-endpoint";
test("can rename workspace", async () => {
const { getByRole, getByText } = render(
-
,
+
);
const input = getByRole("textbox", { name: /workspace name/i });
@@ -26,7 +26,7 @@ test("can rename workspace", async () => {
test("can't rename archived workspace", async () => {
const { getByRole } = render(
-
,
+
);
expect(getByRole("textbox", { name: /workspace name/i })).toBeDisabled();
@@ -44,11 +44,11 @@ test("can't rename active workspace", async () => {
last_updated: new Date(Date.now()).toISOString(),
},
],
- }),
- ),
+ })
+ )
);
const { getByRole } = render(
-
,
+
);
expect(getByRole("textbox", { name: /workspace name/i })).toBeDisabled();
@@ -57,7 +57,7 @@ test("can't rename active workspace", async () => {
test("can't rename default workspace", async () => {
const { getByRole } = render(
-
,
+
);
expect(getByRole("textbox", { name: /workspace name/i })).toBeDisabled();
diff --git a/src/features/workspace/components/archive-workspace.tsx b/src/features/workspace/components/archive-workspace.tsx
index aedb2fbf..a3a2045a 100644
--- a/src/features/workspace/components/archive-workspace.tsx
+++ b/src/features/workspace/components/archive-workspace.tsx
@@ -13,7 +13,7 @@ import { useArchiveWorkspaceButton } from "../hooks/use-archive-workspace-button
import { useConfirmHardDeleteWorkspace } from "../hooks/use-confirm-hard-delete-workspace";
import { useNavigate } from "react-router-dom";
import { hrefs } from "@/lib/hrefs";
-import { useActiveWorkspaceName } from "../hooks/use-active-workspace-name";
+import { useQueryActiveWorkspaceName } from "../../../hooks/use-query-active-workspace-name";
function getContextualText({
activeWorkspaceName,
@@ -34,7 +34,7 @@ function getContextualText({
// NOTE: You can't show a tooltip on a disabled button
// React Aria's recommended approach is https://spectrum.adobe.com/page/contextual-help/
function ContextualHelp({ workspaceName }: { workspaceName: string }) {
- const { data: activeWorkspaceName } = useActiveWorkspaceName();
+ const { data: activeWorkspaceName } = useQueryActiveWorkspaceName();
if (!activeWorkspaceName) return null;
const text = getContextualText({ activeWorkspaceName, workspaceName });
diff --git a/src/features/workspace/components/table-actions-workspaces.tsx b/src/features/workspace/components/table-actions-workspaces.tsx
index f36f46da..b651bd78 100644
--- a/src/features/workspace/components/table-actions-workspaces.tsx
+++ b/src/features/workspace/components/table-actions-workspaces.tsx
@@ -10,7 +10,7 @@ import {
import { useMutationArchiveWorkspace } from "@/features/workspace/hooks/use-mutation-archive-workspace";
import { useMutationRestoreWorkspace } from "../hooks/use-mutation-restore-workspace";
import { useMutationHardDeleteWorkspace } from "../hooks/use-mutation-hard-delete-workspace";
-import { useMutationActivateWorkspace } from "../hooks/use-mutation-activate-workspace";
+import { useMutationActivateWorkspace } from "../../../hooks/use-mutation-activate-workspace";
import { useConfirmHardDeleteWorkspace } from "../hooks/use-confirm-hard-delete-workspace";
import { hrefs } from "@/lib/hrefs";
import {
diff --git a/src/features/workspace/components/table-workspaces.tsx b/src/features/workspace/components/table-workspaces.tsx
index 46187e8c..c4a1fac2 100644
--- a/src/features/workspace/components/table-workspaces.tsx
+++ b/src/features/workspace/components/table-workspaces.tsx
@@ -1,5 +1,7 @@
import {
Badge,
+ Card,
+ CardBody,
Cell,
Column,
Row,
@@ -8,8 +10,8 @@ import {
TableHeader,
} from "@stacklok/ui-kit";
-import { useListAllWorkspaces } from "../hooks/use-query-list-all-workspaces";
-import { useActiveWorkspaceName } from "../hooks/use-active-workspace-name";
+import { useListAllWorkspaces } from "../../../hooks/use-query-list-all-workspaces";
+import { useQueryActiveWorkspaceName } from "../../../hooks/use-query-active-workspace-name";
import { TableActionsWorkspaces } from "./table-actions-workspaces";
import { hrefs } from "@/lib/hrefs";
@@ -24,7 +26,7 @@ function CellName({
}) {
if (isArchived)
return (
-
+
{name}
@@ -35,7 +37,7 @@ function CellName({
if (isActive)
return (
-
+
{name}
@@ -49,35 +51,42 @@ function CellName({
export function TableWorkspaces() {
const { data: workspaces } = useListAllWorkspaces();
- const { data: activeWorkspaceName } = useActiveWorkspaceName();
+ const { data: activeWorkspaceName } = useQueryActiveWorkspaceName();
return (
-
-
-
-
- Name
-
-
-
-
- {workspaces.map((workspace) => (
-
-
- |
+
+
+
+
+
+
+ Name
+
+
- ))}
-
-
+
+ {workspaces.map((workspace) => (
+
+
+ |
+
+ ))}
+
+
+
+
);
}
diff --git a/src/features/workspace/components/workspace-heading.tsx b/src/features/workspace/components/workspace-heading.tsx
deleted file mode 100644
index 8daaf93a..00000000
--- a/src/features/workspace/components/workspace-heading.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Heading } from "@stacklok/ui-kit";
-import React from "react";
-
-export function WorkspaceHeading({
- title,
- children,
-}: {
- title: React.ReactNode;
- children?: React.ReactNode;
-}) {
- return (
-
- {title}
- {children}
-
- );
-}
diff --git a/src/features/workspace/components/workspace-preferred-model.tsx b/src/features/workspace/components/workspace-preferred-model.tsx
index 60ba4331..d0dda4d4 100644
--- a/src/features/workspace/components/workspace-preferred-model.tsx
+++ b/src/features/workspace/components/workspace-preferred-model.tsx
@@ -15,7 +15,7 @@ import { MuxMatcherType } from "@/api/generated";
import { FormEvent } from "react";
import { usePreferredModelWorkspace } from "../hooks/use-preferred-preferred-model";
import { Select, SelectButton } from "@stacklok/ui-kit";
-import { useModelsData } from "@/hooks/use-models-data";
+import { useQueryListAllModelsForAllProviders } from "@/hooks/use-query-list-all-models-for-all-providers";
function MissingProviderBanner() {
return (
@@ -42,7 +42,7 @@ export function WorkspacePreferredModel({
const { preferredModel, setPreferredModel, isPending } =
usePreferredModelWorkspace(workspaceName);
const { mutateAsync } = useMutationPreferredModelWorkspace();
- const { data: providerModels = [] } = useModelsData();
+ const { data: providerModels = [] } = useQueryListAllModelsForAllProviders();
const { model, provider_id } = preferredModel;
const isModelsEmpty = !isPending && providerModels.length === 0;
diff --git a/src/features/workspace/hooks/use-archive-workspace-button.tsx b/src/features/workspace/hooks/use-archive-workspace-button.tsx
index e6782ed4..42085b3a 100644
--- a/src/features/workspace/hooks/use-archive-workspace-button.tsx
+++ b/src/features/workspace/hooks/use-archive-workspace-button.tsx
@@ -1,14 +1,14 @@
import { Button } from "@stacklok/ui-kit";
import { ComponentProps } from "react";
import { useMutationArchiveWorkspace } from "@/features/workspace/hooks/use-mutation-archive-workspace";
-import { useActiveWorkspaceName } from "./use-active-workspace-name";
+import { useQueryActiveWorkspaceName } from "../../../hooks/use-query-active-workspace-name";
export function useArchiveWorkspaceButton({
workspaceName,
}: {
workspaceName: string;
}): ComponentProps {
- const { data: activeWorkspaceName } = useActiveWorkspaceName();
+ const { data: activeWorkspaceName } = useQueryActiveWorkspaceName();
const { mutateAsync, isPending } = useMutationArchiveWorkspace();
return {
diff --git a/src/features/workspace/hooks/use-mutation-archive-workspace.ts b/src/features/workspace/hooks/use-mutation-archive-workspace.ts
index 7dc0267e..954211f6 100644
--- a/src/features/workspace/hooks/use-mutation-archive-workspace.ts
+++ b/src/features/workspace/hooks/use-mutation-archive-workspace.ts
@@ -10,12 +10,12 @@ import {
V1ListArchivedWorkspacesResponse,
V1ListWorkspacesResponse,
} from "@/api/generated";
-import { useActiveWorkspaceName } from "./use-active-workspace-name";
+import { useQueryActiveWorkspaceName } from "../../../hooks/use-query-active-workspace-name";
export function useMutationArchiveWorkspace() {
const queryClient = useQueryClient();
const invalidate = useInvalidateWorkspaceQueries();
- const { data: activeWorkspaceName } = useActiveWorkspaceName();
+ const { data: activeWorkspaceName } = useQueryActiveWorkspaceName();
return useToastMutation({
...v1DeleteWorkspaceMutation(),
diff --git a/src/features/workspace/hooks/use-preferred-preferred-model.ts b/src/features/workspace/hooks/use-preferred-preferred-model.ts
index 78af9e21..4d917084 100644
--- a/src/features/workspace/hooks/use-preferred-preferred-model.ts
+++ b/src/features/workspace/hooks/use-preferred-preferred-model.ts
@@ -3,12 +3,12 @@ import { v1GetWorkspaceMuxesOptions } from "@/api/generated/@tanstack/react-quer
import { useQuery } from "@tanstack/react-query";
import { useEffect, useMemo, useState } from "react";
+type ModelRule = Omit & {};
+
const DEFAULT_STATE = {
provider_id: "",
model: "",
-};
-
-export type ModelRule = Omit & {};
+} as const satisfies ModelRule;
const usePreferredModel = (options: {
path: {
@@ -28,7 +28,7 @@ export const usePreferredModelWorkspace = (workspaceName: string) => {
() => ({
path: { workspace_name: workspaceName },
}),
- [workspaceName],
+ [workspaceName]
);
const { data, isPending } = usePreferredModel(options);
diff --git a/src/hooks/use-confirm.tsx b/src/hooks/use-confirm.tsx
index dc1305cc..207637a0 100644
--- a/src/hooks/use-confirm.tsx
+++ b/src/hooks/use-confirm.tsx
@@ -1,25 +1,8 @@
"use client";
import { ConfirmContext } from "@/context/confirm-context";
-import type { ReactNode } from "react";
import { useContext } from "react";
-type Buttons = {
- yes: ReactNode;
- no: ReactNode;
-};
-
-type Config = {
- buttons: Buttons;
- title?: ReactNode;
- isDestructive?: boolean;
-};
-
-export type ConfirmFunction = (
- message: ReactNode,
- config: Config,
-) => Promise;
-
export const useConfirm = () => {
const context = useContext(ConfirmContext);
if (!context) {
diff --git a/src/hooks/use-mobile.tsx b/src/hooks/use-mobile.tsx
deleted file mode 100644
index 3799a13d..00000000
--- a/src/hooks/use-mobile.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import * as React from "react"
-
-const MOBILE_BREAKPOINT = 1024
-
-export function useIsMobile() {
- const [isMobile, setIsMobile] = React.useState(undefined)
-
- React.useEffect(() => {
- const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
- const onChange = () => {
- setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
- }
- mql.addEventListener("change", onChange)
- setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
- return () => mql.removeEventListener("change", onChange)
- }, [])
-
- return !!isMobile
-}
diff --git a/src/features/workspace/hooks/use-mutation-activate-workspace.ts b/src/hooks/use-mutation-activate-workspace.ts
similarity index 100%
rename from src/features/workspace/hooks/use-mutation-activate-workspace.ts
rename to src/hooks/use-mutation-activate-workspace.ts
diff --git a/src/features/workspace/hooks/use-active-workspace-name.ts b/src/hooks/use-query-active-workspace-name.ts
similarity index 66%
rename from src/features/workspace/hooks/use-active-workspace-name.ts
rename to src/hooks/use-query-active-workspace-name.ts
index 85eddfd4..21e78885 100644
--- a/src/features/workspace/hooks/use-active-workspace-name.ts
+++ b/src/hooks/use-query-active-workspace-name.ts
@@ -1,5 +1,5 @@
import { ListActiveWorkspacesResponse } from "@/api/generated";
-import { useActiveWorkspaces } from "./use-active-workspaces";
+import { useQueryListActiveWorkspaces } from "./use-query-list-active-workspaces";
// NOTE: This needs to be a stable function reference to enable memo-isation of
// the select operation on each React re-render.
@@ -7,8 +7,8 @@ function select(data: ListActiveWorkspacesResponse | undefined): string | null {
return data?.workspaces?.[0]?.name ?? null;
}
-export function useActiveWorkspaceName() {
- return useActiveWorkspaces({
+export function useQueryActiveWorkspaceName() {
+ return useQueryListActiveWorkspaces({
select,
});
}
diff --git a/src/hooks/use-query-get-workspace-messages.ts b/src/hooks/use-query-get-workspace-messages.ts
index fbb7e2be..2e7de014 100644
--- a/src/hooks/use-query-get-workspace-messages.ts
+++ b/src/hooks/use-query-get-workspace-messages.ts
@@ -1,29 +1,30 @@
import { useQuery } from "@tanstack/react-query";
import {
- Conversation,
V1GetWorkspaceMessagesResponse,
V1GetWorkspaceMessagesData,
} from "@/api/generated";
import { v1GetWorkspaceMessagesOptions } from "@/api/generated/@tanstack/react-query.gen";
-import { useActiveWorkspaceName } from "@/features/workspace/hooks/use-active-workspace-name";
+import { useQueryActiveWorkspaceName } from "@/hooks/use-query-active-workspace-name";
import { getQueryCacheConfig } from "@/lib/react-query-utils";
+import { useMemo } from "react";
-// NOTE: This needs to be a stable function reference to enable memo-isation of
-// the select operation on each React re-render.
-function select(data: V1GetWorkspaceMessagesResponse): Conversation[] {
- return data.filter((prompt) =>
- prompt.question_answers?.every((item) => item.answer && item.question),
- );
-}
-
-export const useQueryGetWorkspaceMessages = () => {
- const { data: activeWorkspaceName } = useActiveWorkspaceName();
+export const useQueryGetWorkspaceMessages = <
+ T = V1GetWorkspaceMessagesResponse,
+>({
+ select,
+}: {
+ select?: (data: V1GetWorkspaceMessagesResponse) => T;
+} = {}) => {
+ const { data: activeWorkspaceName } = useQueryActiveWorkspaceName();
- const options: V1GetWorkspaceMessagesData = {
- path: {
- workspace_name: activeWorkspaceName ?? "default",
- },
- };
+ const options: V1GetWorkspaceMessagesData = useMemo(
+ () => ({
+ path: {
+ workspace_name: activeWorkspaceName ?? "default",
+ },
+ }),
+ [activeWorkspaceName],
+ );
return useQuery({
...v1GetWorkspaceMessagesOptions(options),
diff --git a/src/features/workspace/hooks/use-active-workspaces.ts b/src/hooks/use-query-list-active-workspaces.ts
similarity index 84%
rename from src/features/workspace/hooks/use-active-workspaces.ts
rename to src/hooks/use-query-list-active-workspaces.ts
index 9996d3f5..4aa87c64 100644
--- a/src/features/workspace/hooks/use-active-workspaces.ts
+++ b/src/hooks/use-query-list-active-workspaces.ts
@@ -2,7 +2,7 @@ import { ListActiveWorkspacesResponse } from "@/api/generated";
import { v1ListActiveWorkspacesOptions } from "@/api/generated/@tanstack/react-query.gen";
import { useQuery } from "@tanstack/react-query";
-export function useActiveWorkspaces({
+export function useQueryListActiveWorkspaces({
select,
}: {
select?: (data?: ListActiveWorkspacesResponse) => T;
diff --git a/src/hooks/use-models-data.ts b/src/hooks/use-query-list-all-models-for-all-providers.ts
similarity index 79%
rename from src/hooks/use-models-data.ts
rename to src/hooks/use-query-list-all-models-for-all-providers.ts
index b9fc280b..5b731708 100644
--- a/src/hooks/use-models-data.ts
+++ b/src/hooks/use-query-list-all-models-for-all-providers.ts
@@ -1,7 +1,7 @@
import { useQuery } from "@tanstack/react-query";
import { v1ListAllModelsForAllProvidersOptions } from "@/api/generated/@tanstack/react-query.gen";
-export const useModelsData = () => {
+export const useQueryListAllModelsForAllProviders = () => {
return useQuery({
...v1ListAllModelsForAllProvidersOptions(),
});
diff --git a/src/features/workspace/hooks/use-query-list-all-workspaces.ts b/src/hooks/use-query-list-all-workspaces.ts
similarity index 100%
rename from src/features/workspace/hooks/use-query-list-all-workspaces.ts
rename to src/hooks/use-query-list-all-workspaces.ts
diff --git a/src/features/workspace/hooks/use-list-workspaces.ts b/src/hooks/use-query-list-workspaces.ts
similarity index 85%
rename from src/features/workspace/hooks/use-list-workspaces.ts
rename to src/hooks/use-query-list-workspaces.ts
index 03afcf01..5c78c0b8 100644
--- a/src/features/workspace/hooks/use-list-workspaces.ts
+++ b/src/hooks/use-query-list-workspaces.ts
@@ -2,7 +2,7 @@ import { useQuery } from "@tanstack/react-query";
import { v1ListWorkspacesOptions } from "@/api/generated/@tanstack/react-query.gen";
import { V1ListWorkspacesResponse } from "@/api/generated";
-export function useListWorkspaces({
+export function useQueryListWorkspaces({
select,
}: {
select?: (data: V1ListWorkspacesResponse) => T;
diff --git a/src/hooks/useCurrentPromptStore.ts b/src/hooks/useCurrentPromptStore.ts
deleted file mode 100644
index 28b7004f..00000000
--- a/src/hooks/useCurrentPromptStore.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { create } from "zustand";
-
-type CurrentPromptState = {
- currentPromptId: string;
- setCurrentPromptId: (id: string) => void;
-};
-
-export const useCurrentPromptStore = create((set) => ({
- currentPromptId: "",
- setCurrentPromptId: (id: string) => set({ currentPromptId: id }),
-}));
diff --git a/src/index.css b/src/index.css
index 2ba4db1c..20998261 100644
--- a/src/index.css
+++ b/src/index.css
@@ -4,9 +4,11 @@
html,
body {
- height: 100%;
- margin: 0;
- overflow: hidden;
+}
+
+html {
+ scrollbar-gutter: stable;
+ overflow-x: hidden;
}
:root {
diff --git a/src/lib/currency.ts b/src/lib/currency.ts
index 70a83d24..accacdb3 100644
--- a/src/lib/currency.ts
+++ b/src/lib/currency.ts
@@ -7,7 +7,7 @@ type FormatCurrencyOptions = {
to_minor?: boolean;
};
-export const getCurrencyFormatOptions = (currency: Currency) => {
+const getCurrencyFormatOptions = (currency: Currency) => {
return new Intl.NumberFormat(undefined, {
currency: currency,
currencyDisplay: "code",
@@ -70,10 +70,3 @@ export function convertCurrencyFromMinor(
): number {
return amount / 10 ** getDigits(currency);
}
-
-export function formatCurrencyWithTrailingZeroes(
- number: number,
- currency: Currency,
-) {
- return number.toFixed(getDigits(currency));
-}
diff --git a/src/lib/format-time.ts b/src/lib/format-time.ts
new file mode 100644
index 00000000..c6c3882d
--- /dev/null
+++ b/src/lib/format-time.ts
@@ -0,0 +1,23 @@
+import { formatDistanceToNow } from "date-fns";
+
+type Format = "relative" | "absolute";
+
+export const formatTime = (
+ date: Date,
+ options: {
+ format: Format;
+ } = {
+ format: "relative",
+ },
+) => {
+ switch (options.format) {
+ case "absolute":
+ return date.toLocaleString();
+ case "relative":
+ return formatDistanceToNow(date, {
+ addSuffix: true,
+ });
+ default:
+ return options.format satisfies never;
+ }
+};
diff --git a/src/features/alerts/lib/is-alert-critical.ts b/src/lib/is-alert-critical.ts
similarity index 100%
rename from src/features/alerts/lib/is-alert-critical.ts
rename to src/lib/is-alert-critical.ts
diff --git a/src/lib/is-alert-malicious.ts b/src/lib/is-alert-malicious.ts
new file mode 100644
index 00000000..4a458dba
--- /dev/null
+++ b/src/lib/is-alert-malicious.ts
@@ -0,0 +1,17 @@
+import { Alert, AlertConversation, Conversation } from "@/api/generated";
+
+export function isConversationWithMaliciousAlerts(
+ conversation: Conversation | null,
+): boolean {
+ return conversation?.alerts?.some(isAlertMalicious) ?? false;
+}
+
+export function isAlertMalicious(alert: Alert | AlertConversation | null) {
+ return (
+ alert?.trigger_category === "critical" &&
+ alert.trigger_string !== null &&
+ typeof alert.trigger_string === "object" &&
+ "status" in alert.trigger_string &&
+ alert.trigger_string.status === "malicious"
+ );
+}
diff --git a/src/lib/is-alert-secret.ts b/src/lib/is-alert-secret.ts
new file mode 100644
index 00000000..36d825d6
--- /dev/null
+++ b/src/lib/is-alert-secret.ts
@@ -0,0 +1,14 @@
+import { Alert, AlertConversation, Conversation } from "@/api/generated";
+
+export function isConversationWithSecretAlerts(
+ conversation: Conversation | null,
+): boolean {
+ return conversation?.alerts?.some(isAlertSecret) ?? false;
+}
+
+export function isAlertSecret(alert: Alert | AlertConversation | null) {
+ return (
+ alert?.trigger_category === "critical" &&
+ alert.trigger_type === "codegate-secrets"
+ );
+}
diff --git a/src/lib/test-utils.tsx b/src/lib/test-utils.tsx
index 8dc22683..cf3e1394 100644
--- a/src/lib/test-utils.tsx
+++ b/src/lib/test-utils.tsx
@@ -1,4 +1,3 @@
-import { SidebarProvider } from "@/components/ui/sidebar";
import { ConfirmProvider } from "@/context/confirm-context";
import { DarkModeProvider, Toaster } from "@stacklok/ui-kit";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
@@ -28,6 +27,9 @@ export const TestQueryClientProvider = ({
new QueryClient({
defaultOptions: {
queries: {
+ refetchOnMount: true,
+ refetchOnReconnect: true,
+ refetchOnWindowFocus: true,
gcTime: 0,
staleTime: 0,
},
@@ -52,10 +54,7 @@ const renderWithProviders = (
- {children}}
- />
+
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 976388a4..64df408c 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,12 +1,5 @@
-import { AlertConversation, Conversation } from "@/api/generated/types.gen";
-import { isAlertSecret } from "@/features/alerts/lib/is-alert-secret";
-import { isAlertMalicious } from "@/features/alerts/lib/is-alert-malicious";
-import { format, isToday, isYesterday } from "date-fns";
+import { format } from "date-fns";
-const ONE_DAY_MS = 24 * 60 * 60 * 1000;
-const SEVEN_DAYS_MS = 7 * ONE_DAY_MS;
-const TEEN_DAYS_MS = 14 * ONE_DAY_MS;
-const THTY_DAYS_MS = 30 * ONE_DAY_MS;
const FILEPATH_REGEX = /(?:---FILEPATH|Path:|\/\/\s*filepath:)\s*([^\s]+)/g;
const COMPARE_CODE_REGEX = /Compare this snippet[^:]*:/g;
@@ -50,52 +43,6 @@ export function parsingPromptText(message: string, timestamp: string) {
}
}
-function getGroup(differenceInMs: number, promptDate: Date): string {
- if (isToday(promptDate)) {
- return "Today";
- }
- if (isYesterday(promptDate)) {
- return "Yesterday";
- }
- if (differenceInMs <= SEVEN_DAYS_MS) {
- return "Previous 7 days";
- }
- if (differenceInMs <= TEEN_DAYS_MS) {
- return "Previous 14 days";
- }
- if (differenceInMs <= THTY_DAYS_MS) {
- return "Previous 30 days";
- }
- return "Beyond 30 days";
-}
-
-export function groupPromptsByRelativeDate(prompts: Conversation[]) {
- const promptsSorted = prompts.sort(
- (a, b) =>
- new Date(b.conversation_timestamp).getTime() -
- new Date(a.conversation_timestamp).getTime()
- );
-
- const grouped = promptsSorted.reduce(
- (groups, prompt) => {
- const promptDate = new Date(prompt.conversation_timestamp);
- const now = new Date();
- const differenceInMs = now.getTime() - promptDate.getTime();
- const group = getGroup(differenceInMs, promptDate);
-
- if (!groups[group]) {
- groups[group] = [];
- }
-
- (groups[group] ?? []).push(prompt);
- return groups;
- },
- {} as Record
- );
-
- return grouped;
-}
-
export function sanitizeQuestionPrompt({
question,
answer,
@@ -123,17 +70,3 @@ export function sanitizeQuestionPrompt({
return question;
}
}
-
-export function getIssueDetectedType(
- alert: AlertConversation
-): "malicious_package" | "leaked_secret" | null {
- if (isAlertMalicious(alert)) return "malicious_package";
- if (isAlertSecret(alert)) return "leaked_secret";
-
- return null;
-}
-
-export function capitalize(text: string) {
- const [first, ...rest] = text;
- return first ? first.toUpperCase() + rest.join("") : text;
-}
diff --git a/src/main.tsx b/src/main.tsx
index 7398fed0..0628ebc3 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -3,7 +3,7 @@ import { createRoot } from "react-dom/client";
import "./index.css";
import "@stacklok/ui-kit/style";
import App from "./App.tsx";
-import { SidebarProvider } from "./components/ui/sidebar.tsx";
+
import ErrorBoundary from "./components/ErrorBoundary.tsx";
import { Error } from "./components/Error.tsx";
import { DarkModeProvider, Toaster } from "@stacklok/ui-kit";
@@ -24,20 +24,18 @@ createRoot(document.getElementById("root")!).render(
-
-
-
-
-
-
-
+
+
+
+
+
- ,
+
);
diff --git a/src/mocks/msw/fixtures/GET_MESSAGES.json b/src/mocks/msw/fixtures/GET_MESSAGES.json
deleted file mode 100644
index 8e8b1158..00000000
--- a/src/mocks/msw/fixtures/GET_MESSAGES.json
+++ /dev/null
@@ -1,306 +0,0 @@
-[
- {
- "question_answers": [
- {
- "question": {
- "message": "```/Users/giuseppe/workspace/codegate/src/codegate/server.py\nimport traceback\n\nimport structlog\nfrom fastapi import APIRouter, FastAPI\nfrom fastapi.middleware.cors import CORSMiddleware\nfrom fastapi.responses import JSONResponse\nfrom starlette.middleware.errors import ServerErrorMiddleware\n\nfrom codegate import __description__, __version__\nfrom codegate.dashboard.dashboard import dashboard_router\nfrom codegate.pipeline.factory import PipelineFactory\nfrom codegate.providers.anthropic.provider import AnthropicProvider\nfrom codegate.providers.llamacpp.provider import LlamaCppProvider\nfrom codegate.providers.ollama.provider import OllamaProvider\nfrom codegate.providers.openai.provider import OpenAIProvider\nfrom codegate.providers.registry import ProviderRegistry\nfrom codegate.providers.vllm.provider import VLLMProvider\n\nlogger = structlog.get_logger(\"codegate\")\n\n\nasync def custom_error_handler(request, exc: Exception):\n \"\"\"This is a Middleware to handle exceptions and log them.\"\"\"\n # Capture the stack trace\n extracted_traceback = traceback.extract_tb(exc.__traceback__)\n # Log only the last 3 items of the stack trace. 3 is an arbitrary number.\n logger.error(traceback.print_list(extracted_traceback[-3:]))\n return JSONResponse({\"error\": str(exc)}, status_code=500)\n\n\ndef init_app(pipeline_factory: PipelineFactory) -> FastAPI:\n \"\"\"Create the FastAPI application.\"\"\"\n app = FastAPI(\n title=\"CodeGate\",\n description=__description__,\n version=__version__,\n )\n app.add_middleware(\n CORSMiddleware,\n allow_origins=[\"*\"],\n allow_credentials=True,\n allow_methods=[\"*\"],\n allow_headers=[\"*\"],\n )\n # Apply error handling middleware\n app.add_middleware(ServerErrorMiddleware, handler=custom_error_handler)\n\n # Create provider registry\n registry = ProviderRegistry(app)\n\n # Register all known providers\n registry.add_provider(\n \"openai\",\n OpenAIProvider(\n pipeline_processor=pipeline_factory.create_input_pipeline(),\n fim_pipeline_processor=pipeline_factory.create_fim_pipeline(),\n output_pipeline_processor=pipeline_factory.create_output_pipeline(),\n fim_output_pipeline_processor=pipeline_factory.create_fim_output_pipeline(),\n ),\n )\n registry.add_provider(\n \"anthropic\",\n AnthropicProvider(\n pipeline_processor=pipeline_factory.create_input_pipeline(),\n fim_pipeline_processor=pipeline_factory.create_fim_pipeline(),\n output_pipeline_processor=pipeline_factory.create_output_pipeline(),\n fim_output_pipeline_processor=pipeline_factory.create_fim_output_pipeline(),\n ),\n )\n registry.add_provider(\n \"llamacpp\",\n LlamaCppProvider(\n pipeline_processor=pipeline_factory.create_input_pipeline(),\n fim_pipeline_processor=pipeline_factory.create_fim_pipeline(),\n output_pipeline_processor=pipeline_factory.create_output_pipeline(),\n fim_output_pipeline_processor=pipeline_factory.create_fim_output_pipeline(),\n ),\n )\n registry.add_provider(\n \"vllm\",\n VLLMProvider(\n pipeline_processor=pipeline_factory.create_input_pipeline(),\n fim_pipeline_processor=pipeline_factory.create_fim_pipeline(),\n output_pipeline_processor=pipeline_factory.create_output_pipeline(),\n fim_output_pipeline_processor=pipeline_factory.create_fim_output_pipeline(),\n ),\n )\n registry.add_provider(\n \"ollama\",\n OllamaProvider(\n pipeline_processor=pipeline_factory.create_input_pipeline(),\n fim_pipeline_processor=pipeline_factory.create_fim_pipeline(),\n output_pipeline_processor=pipeline_factory.create_output_pipeline(),\n fim_output_pipeline_processor=pipeline_factory.create_fim_output_pipeline(),\n ),\n )\n\n # Create and add system routes\n system_router = APIRouter(tags=[\"System\"])\n\n @system_router.get(\"/health\")\n async def health_check():\n return {\"status\": \"healthy\"}\n\n app.include_router(system_router)\n app.include_router(dashboard_router)\n\n return app\n\n```\n\nserver.py do you see any security issue?",
- "timestamp": "2025-01-03T09:09:33.743797Z",
- "message_id": "a1549789-b610-4999-9907-f8f010c2f3b7"
- },
- "answer": {
- "message": "Yes, there are several security issues in the provided `server.py` code. Here are the main ones:\n\n1. **CORS Configuration**:\n ```python\n app.add_middleware(\n CORSMiddleware,\n allow_origins=[\"*\"],\n allow_credentials=True,\n allow_methods=[\"*\"],\n allow_headers=[\"*\"],\n )\n ```\n - Allowing all origins (`allow_origins=[\"*\"]`) and methods (`allow_methods=[\"*\"]`) can expose your server to Cross-Site Request Forgery (CSRF) attacks and other security vulnerabilities. It's recommended to restrict these settings to only the origins and methods that your application needs to support.\n\n2. **Error Handling Middleware**:\n ```python\n async def custom_error_handler(request, exc: Exception):\n \"\"\"This is a Middleware to handle exceptions and log them.\"\"\"\n # Capture the stack trace\n extracted_traceback = traceback.extract_tb(exc.__traceback__)\n # Log only the last 3 items of the stack trace. 3 is an arbitrary number.\n logger.error(traceback.print_list(extracted_traceback[-3:]))\n return JSONResponse({\"error\": str(exc)}, status_code=500)\n ```\n - Exposing detailed error messages in the response can be dangerous, as it can provide attackers with information that can be used to exploit vulnerabilities. It's better to log the error details and return a generic error message to the client.\n\n3. **Handling Exceptions**:\n - The `custom_error_handler` function logs the traceback and returns the exception message directly to the client. This can expose sensitive information about the server's internal state. It's better to log the error and return a generic message.\n\n4. **Provider Configuration**:\n - The providers are configured with the same pipeline processors. This might not be a security issue in itself, but it's important to ensure that the pipeline processors are secure and correctly configured.\n\n5. **Logging**:\n - The `logger.error` function is used to log the error traceback. Ensure that the logging configuration is set up correctly to prevent logging sensitive information to insecure destinations.\n\nHere is a revised version of the code with some of these issues addressed:\n\n```python\nimport traceback\n\nimport structlog\nfrom fastapi import APIRouter, FastAPI\nfrom fastapi.middleware.cors import CORSMiddleware\nfrom fastapi.responses import JSONResponse\nfrom starlette.middleware.errors import ServerErrorMiddleware\n\nfrom codegate import __description__, __version__\nfrom codegate.dashboard.dashboard import dashboard_router\nfrom codegate.pipeline.factory import PipelineFactory\nfrom codegate.providers.anthropic.provider import AnthropicProvider\nfrom codegate.providers.llamacpp.provider import LlamaCppProvider\nfrom codegate.providers.ollama.provider import OllamaProvider\nfrom codegate.providers.openai.provider import OpenAIProvider\nfrom codegate.providers.registry import ProviderRegistry\nfrom codegate.providers.vllm.provider import VLLMProvider\n\nlogger = structlog.get_logger(\"codegate\")\n\n\nasync def custom_error_handler(request, exc: Exception):\n \"\"\"This is a Middleware to handle exceptions and log them.\"\"\"\n # Capture the stack trace\n extracted_traceback = traceback.extract_tb(exc.__traceback__)\n # Log only the last 3 items of the stack trace. 3 is an arbitrary number.\n logger.error(traceback.print_list(extracted_traceback[-3:]))\n return JSONResponse({\"error\": \"An internal server error occurred\"}, status_code=500)\n\n\ndef init_app(pipeline_factory: PipelineFactory) -> FastAPI:\n \"\"\"Create the FastAPI application.\"\"\"\n app = FastAPI(\n title=\"CodeGate\",\n description=__description__,\n version=__version__,\n )\n app.add_middleware(\n CORSMiddleware,\n allow_origins=[\"https://example.com\"], # Restrict to specific origins\n allow_credentials=True,\n allow_methods=[\"GET\", \"POST\"], # Restrict to specific methods\n allow_headers=[\"*\"],\n )\n # Apply error handling middleware\n app.add_middleware(ServerErrorMiddleware, handler=custom_error_handler)\n\n # Create provider registry\n registry = ProviderRegistry(app)\n\n # Register all known providers\n registry.add_provider(\n \"openai\",\n OpenAIProvider(\n pipeline_processor=pipeline_factory.create_input_pipeline(),\n fim_pipeline_processor=pipeline_factory.create_fim_pipeline(),\n output_pipeline_processor=pipeline_factory.create_output_pipeline(),\n fim_output_pipeline_processor=pipeline_factory.create_fim_output_pipeline(),\n ),\n )\n registry.add_provider(\n \"anthropic\",\n AnthropicProvider(\n pipeline_processor=pipeline_factory.create_input_pipeline(),\n fim_pipeline_processor=pipeline_factory.create_fim_pipeline(),\n output_pipeline_processor=pipeline_factory.create_output_pipeline(),\n fim_output_pipeline_processor=pipeline_factory.create_fim_output_pipeline(),\n ),\n )\n registry.add_provider(\n \"llamacpp\",\n LlamaCppProvider(\n pipeline_processor=pipeline_factory.create_input_pipeline(),\n fim_pipeline_processor=pipeline_factory.create_fim_pipeline(),\n output_pipeline_processor=pipeline_factory.create_output_pipeline(),\n fim_output_pipeline_processor=pipeline_factory.create_fim_output_pipeline(),\n ),\n )\n registry.add_provider(\n \"vllm\",\n VLLMProvider(\n pipeline_processor=pipeline_factory.create_input_pipeline(),\n fim_pipeline_processor=pipeline_factory.create_fim_pipeline(),\n output_pipeline_processor=pipeline_factory.create_output_pipeline(),\n fim_output_pipeline_processor=pipeline_factory.create_fim_output_pipeline(),\n ),\n )\n registry.add_provider(\n \"ollama\",\n OllamaProvider(\n pipeline_processor=pipeline_factory.create_input_pipeline(),\n fim_pipeline_processor=pipeline_factory.create_fim_pipeline(),\n output_pipeline_processor=pipeline_factory.create_output_pipeline(),\n fim_output_pipeline_processor=pipeline_factory.create_fim_output_pipeline(),\n ),\n )\n\n # Create and add system routes\n system_router = APIRouter(tags=[\"System\"])\n\n @system_router.get(\"/health\")\n async def health_check():\n return {\"status\": \"healthy\"}\n\n app.include_router(system_router)\n app.include_router(dashboard_router)\n\n return app\n```\n\nIn this revised version, the CORS middleware is restricted to specific origins and methods, and the error handler returns a generic error message to the client.",
- "timestamp": "2025-01-03T09:09:34.359269Z",
- "message_id": "68e7c9bc-9afa-4240-8eba-621eaae4a2a0"
- }
- }
- ],
- "provider": "vllm",
- "type": "chat",
- "chat_id": "chatcmpl-eebad2bd68434c7c947d10754a204ea4",
- "conversation_timestamp": "2025-01-03T09:09:33.743797Z"
- },
- {
- "question_answers": [
- {
- "question": {
- "message": "\n\n```tsx src/App.tsx (23-29)\n const { prompts, loading, fetchPrompts } = usePromptsStore();\n useSse();\n\n const test = \"REDACTED<$lCzMsqxUWElmZqd/qX4llR3pqsrBJVxkt6SB6WXXKKhYG37ZnscxPawjfZmgPVoSpcSR975hOIE2s/6iVr2JETpVdwdaG4hAYlzJ4tteJg==>\";\n const breadcrumb = useBreadcrumb();\n\n\n```\nPlease explain the cause of this error and how to solve it: 'test' is declared but its value is never read.",
- "timestamp": "2025-01-02T13:42:48.721165Z",
- "message_id": "031cf7a3-1ce6-435d-bbee-0f939b30cc20"
- },
- "answer": {
- "message": "The error message \"'test' is declared but its value is never read\" indicates that the variable `test` is defined in your code, but it is never used anywhere. This can lead to confusion for other developers reading the code and might indicate that the intended functionality has not been implemented.\n\n### Cause of the Error\n\n1. **Unused Variable**: The variable `test` is declared but not used in the rest of the code within the `App` component. This can be a result of incomplete implementation or a placeholder that was meant to be used later but was forgotten.\n\n### How to Solve It\n\nYou have a few options to resolve this issue:\n\n1. **Remove the Unused Variable**:\n - If the variable is not needed, you can safely remove it to clean up the code and eliminate the warning.\n\n ```tsx\n const { prompts, loading, fetchPrompts } = usePromptsStore();\n useSse();\n\n const breadcrumb = useBreadcrumb();\n\n useEffect(() => {\n fetchPrompts();\n }, [fetchPrompts]);\n ```\n\n2. **Use the Variable**:\n - If the variable is intended to be used, ensure that it is utilized somewhere in the component. For example, you could log it for debugging purposes or use it in some part of the application logic.\n\n ```tsx\n const { prompts, loading, fetchPrompts } = usePromptsStore();\n useSse();\n\n const test = \"REDACTED<$lCzMsqxUWElmZqd/qX4llR3pqsrBJVxkt6SB6WXXKKhYG37ZnscxPawjfZmgPVoSpcSR975hOIE2s/6iVr2JETpVdwdaG4hAYlzJ4tteJg==>\";\n const breadcrumb = useBreadcrumb();\n\n useEffect(() => {\n console.log(test); // Example usage\n fetchPrompts();\n }, [fetchPrompts]);\n ```\n\n3. **Suppress the Warning (Not Recommended)**:\n - If you are sure that the variable is intentionally unused and do not want to remove it, you can suppress the warning. However, this is generally not recommended as it can lead to oversight of real issues.\n\n ```tsx\n // @ts-ignore\n const test = \"REDACTED<$lCzMsqxUWElmZqd/qX4llR3pqsrBJVxkt6SB6WXXKKhYG37ZnscxPawjfZmgPVoSpcSR975hOIE2s/6iVr2JETpVdwdaG4hAYlzJ4tteJg==>\";\n const breadcrumb = useBreadcrumb();\n ```\n\n### Best Practices\n\n- **Keep Code Clean**: Regularly clean up unused variables to maintain a clean and understandable codebase.\n- **Use Linters**: Utilize tools like ESLint to automatically detect and flag unused variables, helping you maintain code quality.\n\nBy addressing this issue, you can improve the maintainability and readability of your code.",
- "timestamp": "2025-01-02T13:42:49.361714Z",
- "message_id": "a542408b-d0bc-4f6f-8b71-64c93c1e388a"
- }
- }
- ],
- "provider": "vllm",
- "type": "chat",
- "chat_id": "chatcmpl-7d87679de7ed41639eb91d8ebbaa6f72",
- "conversation_timestamp": "2025-01-02T13:42:48.721165Z"
- },
- {
- "question_answers": [
- {
- "question": {
- "message": "```/Users/giuseppe/workspace/codegate-ui/src/App.tsx\nimport { Header } from \"./components/Header\";\nimport { PromptList } from \"./components/PromptList\";\nimport { useEffect } from \"react\";\nimport { Dashboard } from \"./components/Dashboard\";\nimport { Routes, Route, Link } from \"react-router-dom\";\nimport { Chat } from \"./components/Chat\";\nimport { usePromptsStore } from \"./hooks/usePromptsStore\";\nimport { Sidebar } from \"./components/Sidebar\";\nimport { useSse } from \"./hooks/useSse\";\nimport { Help } from \"./components/Help\";\nimport { Certificates } from \"./components/Certificates\";\nimport { CertificateSecurity } from \"./components/CertificateSecurity\";\nimport {\n Breadcrumb,\n BreadcrumbList,\n BreadcrumbItem,\n BreadcrumbSeparator,\n BreadcrumbPage,\n} from \"./components/ui/breadcrumb\";\nimport { useBreadcrumb } from \"./hooks/useBreadcrumb\";\n\nfunction App() {\n const { prompts, loading, fetchPrompts } = usePromptsStore();\n useSse();\n\n const test = \"REDACTED<$4g3iWc/V3YD6pAXIeA43M197ostjpL3XZuDbJuxTN+jG1Mcjv6cMFcC73SsIDzECoWSuZqSYGkrWe5vQqbheaJbDlocBrPZMkgQWkcP8gw==>\";\n const breadcrumb = useBreadcrumb();\n\n useEffect(() => {\n fetchPrompts();\n }, [fetchPrompts]);\n\n return (\n \n \n \n \n \n\n \n \n \n \n \n {breadcrumb && (\n <>\n \n \n {breadcrumb}\n \n \n \n )}\n \n \n \n\n \n \n \n \n \n ` component. If the `breadcrumb` contains user-controlled data, it could be vulnerable to XSS attacks if not properly sanitized.\n\n2. **Potential Sensitive Data Exposure**\n - The `test` variable contains a string that begins with \"REDACTED\", indicating it may contain sensitive information. Ensure that such strings are not exposed or logged in a manner that could lead to data breaches.\n\n3. **Lack of Authentication and Authorization**\n - The code does not include any authentication or authorization mechanisms. This could allow unauthorized users to access sensitive components like `/certificates` and `/certificates/security`.\n\n4. **Security of Sensitive Components**\n - Components like `CertificateSecurity` and `Certificates` might handle sensitive information. Ensure that these components implement proper security measures to protect the data they handle.\n\n### Best Practices for Secure Implementation\n\n1. **Sanitize and Encode User Input**\n - Always sanitize and encode user inputs to prevent XSS attacks. Use libraries like `DOMPurify` to sanitize HTML content.\n\n2. **Implement Authentication and Authorization**\n - Integrate a robust authentication system (e.g., OAuth, JWT) to ensure that only authorized users can access sensitive routes and components.\n\n3. **Protect Sensitive Data**\n - Ensure that any sensitive data, such as certificates and security-related information, is encrypted both at rest and in transit. Use HTTPS for all communications.\n\n4. **Regular Security Audits and Testing**\n - Conduct regular security audits and penetration testing to identify and fix vulnerabilities in the application.\n\n### Recommendations for Security Improvements\n\n1. **Sanitize Breadcrumb Data**\n - Modify the `BreadcrumbPage` component to sanitize the `breadcrumb` data before rendering it. For example:\n ```jsx\n \n {DOMPurify.sanitize(breadcrumb)}\n \n ```\n\n2. **Implement Authentication**\n - Use a library like `react-router-dom` with authentication middleware to protect routes. For example:\n ```jsx\n \n \n \n \n \n \n\n \n \n \n \n \n {breadcrumb && (\n <>\n <|fim_middle|>",
- "timestamp": "2025-01-02T13:40:06.097504Z",
- "message_id": "ccf1c87a-4846-4d81-b69f-f882f1971cf7"
- },
- "answer": null
- }
- ],
- "provider": "vllm",
- "type": "fim",
- "chat_id": "ccf1c87a-4846-4d81-b69f-f882f1971cf7",
- "conversation_timestamp": "2025-01-02T13:40:06.097504Z"
- },
- {
- "question_answers": [
- {
- "question": {
- "message": "<|im_start|>user\n```tsx\nimport { Header } from \"./components/Header\";\nimport { PromptList } from \"./components/PromptList\";\nimport { useEffect } from \"react\";\nimport { Dashboard } from \"./components/Dashboard\";\nimport { Routes, Route, Link } from \"react-router-dom\";\nimport { Chat } from \"./components/Chat\";\nimport { usePromptsStore } from \"./hooks/usePromptsStore\";\nimport { Sidebar } from \"./components/Sidebar\";\nimport { useSse } from \"./hooks/useSse\";\nimport { Help } from \"./components/Help\";\nimport { Certificates } from \"./components/Certificates\";\nimport { CertificateSecurity } from \"./components/CertificateSecurity\";\nimport {\n Breadcrumb,\n BreadcrumbList,\n BreadcrumbItem,\n BreadcrumbSeparator,\n BreadcrumbPage,\n} from \"./components/ui/breadcrumb\";\nimport { useBreadcrumb } from \"./hooks/useBreadcrumb\";\n\nfunction App() {\n const { prompts, loading, fetchPrompts } = usePromptsStore();\n useSse();\n\n const test = \"REDACTED<$lAJek6QoLZgSKq3z4ybqMVFOCtiHQtP8hbBzWeQysFQoGwwNrEghIPnFCsXY985bpTjx4ZIiBzx11E1yM3ybbUzoxG/W4TrUPzM4aHAjIg==>\";\n const breadcrumb = useBreadcrumb();\n\n useEffect(() => {\n fetchPrompts();\n }, [fetchPrompts]);\n\n return (\n \n \n \n \n \n\n \n \n \n \n \n {breadcrumb && (\n <>\n \n \n {breadcrumb}\n \n \n \n )}\n \n \n \n\n \n \n \n \n \n \n// + hover:bg-gray-700/70 \n transition-opacity duration-200 \n opacity-0 group-hover:opacity-100`,\n className\n )}\n >\n <|fim_middle|>",
- "timestamp": "2025-01-02T17:01:41.579128Z",
- "message_id": "4ea5d1df-c724-49f7-a132-d19e092b52c8"
- },
- "answer": null
- }
- ],
- "provider": "vllm",
- "type": "fim",
- "chat_id": "4ea5d1df-c724-49f7-a132-d19e092b52c8",
- "conversation_timestamp": "2025-01-02T17:01:41.579128Z"
- },
- {
- "question_answers": [
- {
- "question": {
- "message": "<|fim_prefix|>// Path: Untitled.txt\n// 1a1b26\n// components/Markdown.tsx\n // whiteSpace: \"pre-wrap\",\n // background: \"#1a1b26\",\n // padding: \"1.5rem\",\n // borderRadius: \"0.5rem\",\n // margin: \"1.5rem 0\",\n // fontSize: \"10px\",\n // width: \"80%\", // Ensure the block takes full width\n // position: \"relative\",\n // },\n};\n\nexport function Markdown({ children, className = \"\" }: Props) {\n return (\n \n 1a1b26\",\n // fontSize: \"10x\",\n // whiteSpace: \"pre-wrap\",\n // padding: \"1.5rem\",\n // borderRadius: \"0.5rem\",\n // margin: \"1.5rem 0\",\n // position: \"relative\", // Critical for clipboard positioning\n // width: \"100%\", // Ensure full width of parent container\n // boxSizing: \"border-box\", // Prevent padding overflow\n },\n }}\n language={match[1]}\n PreTag=\"div\"\n className=\"rounded-lg overflow-hidden shadow-lg text-sm\"\n showLineNumbers={false}\n wrapLines\n {...props}\n ><|fim_middle|>",
- "timestamp": "2025-01-02T17:08:08.428889Z",
- "message_id": "203fe119-0e58-43b5-a863-73f30f73d272"
- },
- "answer": null
- }
- ],
- "provider": "vllm",
- "type": "fim",
- "chat_id": "203fe119-0e58-43b5-a863-73f30f73d272",
- "conversation_timestamp": "2025-01-02T17:08:08.428889Z"
- },
- {
- "question_answers": [
- {
- "question": {
- "message": "<|fim_prefix|>\n// components/Markdown.tsx\n}\n\nconst customStyle = {\n ...oneDark,\n 'pre[class*=\"language-\"]': {\n ...oneDark['pre[class*=\"language-\"]'],\n whiteSpace: \"pre-wrap\",\n // background: \"#1a1b26\",\n padding: \"1.5rem\",\n borderRadius: \"0.5rem\",\n margin: \"1.5rem 0\",\n fontSize: \"10px\",\n width: \"80%\", // Ensure the block takes full width\n position: \"relative\",\n },\n};\n\nexport function Markdown({ children, className = \"\" }: Props) {\n return (\n \n \"\n showLineNumbers={false}\n wrapLines\n {...props}\n >\n {String(children).replace(/\\n$/, \"\")}\n \n \n ) : (\n ",
- "timestamp": "2025-01-02T17:20:32.921469Z",
- "message_id": "d81ca662-84ae-4114-9041-6d640c547bb9"
- },
- "answer": null
- }
- ],
- "provider": "vllm",
- "type": "fim",
- "chat_id": "d81ca662-84ae-4114-9041-6d640c547bb9",
- "conversation_timestamp": "2025-01-02T17:20:32.921469Z"
- },
- {
- "question_answers": [
- {
- "question": {
- "message": "<|fim_prefix|>// Path: Untitled.txt\n// showLineNumbers\n// components/Markdown.tsx\n background: \"none\",\n padding: \"0\",\n borderRadius: \"0\",\n fontSize: \"inherit\",\n color: \"inherit\",\n display: \"inline\",\n },\n 'pre[class*=\"language-\"]': {\n ...oneDark['pre[class*=\"language-\"]'],\n whiteSpace: \"pre-wrap\",\n background: \"#1a1b26\",\n padding: \"1.5rem\",\n borderRadius: \"0.5rem\",\n margin: \"1.5rem 0\",\n fontSize: \"10px\",\n width: \"80%\",\n position: \"relative\",\n },\n};\nexport function Markdown({ children, className = \"\" }: Props) {\n return (\n \n ={{\n ...customStyle,\n 'pre[class*=\"language-\"]': {\n ...oneDark['pre[class*=\"language-\"]'],\n background: \"#1a1b26\",\n padding: \"1.5rem\",\n borderRadius: \"0.5rem\",\n margin: \"1.5rem 0\",\n width: \"100%\",\n position: \"relative\",\n boxSizing: \"border-box\",\n },\n }}\n language={match[1]}\n PreTag=\"div\"\n className=\"rounded-lg overflow-hidden shadow-lg text-sm\"\n wrapLines\n {...props}\n >\n {String(children).replace(/\\n$/, \"\")}\n <|fim_middle|>",
- "timestamp": "2025-01-02T17:25:40.052416Z",
- "message_id": "bb2ab808-1ce7-4937-9d79-0d773dcb7111"
- },
- "answer": null
- }
- ],
- "provider": "vllm",
- "type": "fim",
- "chat_id": "bb2ab808-1ce7-4937-9d79-0d773dcb7111",
- "conversation_timestamp": "2025-01-02T17:25:40.052416Z"
- },
- {
- "question_answers": [
- {
- "question": {
- "message": "<|fim_prefix|>// diff --git a/package.json b/package.json\n// index 42ed9d9..6b1ddde 100644\n// --- a/package.json\n// +++ b/package.json\n// @@ -25,6 +25,7 @@\n// \"class-variance-authority\": \"^0.7.1\",\n// \"clsx\": \"^2.1.1\",\n// \"date-fns\": \"^4.1.0\",\n// + \"highlight.js\": \"^11.11.1\",\n// \"lucide-react\": \"^0.462.0\",\n// \"prismjs\": \"^1.29.0\",\n// \"react\": \"19.0.0\",\n// components/Markdown.tsx\nimport hljs from \"highlight.js\";\n\ninterface Props {\n children: string;\n className?: string;\n}\nconsole.log({ oneDark });\nconst customStyle = {\n ...oneDark,\n 'code[class*=\"language-\"]': {\n ...oneDark['code[class*=\"language-\"]'],\n background: \"none\",\n },\n 'pre[class*=\"language-\"]': {\n ...oneDark['pre[class*=\"language-\"]'],\n whiteSpace: \"pre-wrap\",\n background: \"#1a1b26\",\n padding: \"1.5rem\",\n borderRadius: \"0.5rem\",\n margin: \"1.5rem 0\",\n fontSize: \"10px\",\n width: \"80%\",\n position: \"relative\",\n },\n};\nexport function Markdown({ children, className = \"\" }: Props) {\n \n return (\n ).language;\n console.log({ detectedLanguage });\n const match = /language-(\\w+)/.exec(className || \"\");\n const inline = !match;\n return !inline ? (\n \n ",
- "timestamp": "2025-01-03T10:22:01.721847Z",
- "message_id": "9b522dca-a54e-4356-9692-d5be66f051cc"
- },
- "answer": null
- }
- ],
- "provider": "vllm",
- "type": "fim",
- "chat_id": "9b522dca-a54e-4356-9692-d5be66f051cc",
- "conversation_timestamp": "2025-01-03T10:22:01.721847Z"
- },
- {
- "question_answers": [
- {
- "question": {
- "message": "<|fim_prefix|>// diff --git a/package.json b/package.json\n// index 42ed9d9..6b1ddde 100644\n// --- a/package.json\n// +++ b/package.json\n// @@ -25,6 +25,7 @@\n// \"class-variance-authority\": \"^0.7.1\",\n// \"clsx\": \"^2.1.1\",\n// \"date-fns\": \"^4.1.0\",\n// + \"highlight.js\": \"^11.11.1\",\n// \"lucide-react\": \"^0.462.0\",\n// \"prismjs\": \"^1.29.0\",\n// \"react\": \"19.0.0\",\n// Path: Untitled.txt\n// a11yDark\n// components/Markdown.tsx\nconst customStyle = {\n ...oneDark,\n 'code[class*=\"language-\"]': {\n ...oneDark['code[class*=\"language-\"]'],\n background: \"none\",\n },\n 'pre[class*=\"language-\"]': {\n ...oneDark['pre[class*=\"language-\"]'],\n whiteSpace: \"pre-wrap\",\n background: \"#1a1b26\",\n padding: \"1.5rem\",\n borderRadius: \"0.5rem\",\n margin: \"1.5rem 0\",\n fontSize: \"10px\",\n width: \"80%\",\n position: \"relative\",\n },\n};\nexport function Markdown({ children, className = \"\" }: Props) {\n return (\n \n return (\n <>\n \n {String(children).replace(/\\n$/, \"\")}<|fim_middle|>",
- "timestamp": "2025-01-03T10:59:20.862404Z",
- "message_id": "b21cb89e-f5f0-4cbe-95a6-7407bf59199d"
- },
- "answer": null
- }
- ],
- "provider": "vllm",
- "type": "fim",
- "chat_id": "b21cb89e-f5f0-4cbe-95a6-7407bf59199d",
- "conversation_timestamp": "2025-01-03T10:59:20.862404Z"
- },
- {
- "question_answers": [
- {
- "question": {
- "message": "<|fim_prefix|>// diff --git a/package.json b/package.json\n// index 42ed9d9..6b1ddde 100644\n// --- a/package.json\n// +++ b/package.json\n// @@ -25,6 +25,7 @@\n// \"class-variance-authority\": \"^0.7.1\",\n// \"clsx\": \"^2.1.1\",\n// \"date-fns\": \"^4.1.0\",\n// + \"highlight.js\": \"^11.11.1\",\n// \"lucide-react\": \"^0.462.0\",\n// \"prismjs\": \"^1.29.0\",\n// \"react\": \"19.0.0\",\n// components/Markdown.tsx\n children: string;\n className?: string;\n}\nconsole.log({ oneDark });\nconst customStyle = {\n ...oneDark,\n 'code[class*=\"language-\"]': {\n ...oneDark['code[class*=\"language-\"]'],\n background: \"none\",\n },\n 'pre[class*=\"language-\"]': {\n ...oneDark['pre[class*=\"language-\"]'],\n whiteSpace: \"pre-wrap\",\n background: \"#1a1b26\",\n padding: \"1.5rem\",\n borderRadius: \"0.5rem\",\n margin: \"1.5rem 0\",\n fontSize: \"10px\",\n width: \"80%\",\n position: \"relative\",\n },\n};\nexport function Markdown({ children, className = \"\" }: Props) {\n return (\n >\n \n {String(children).replace(/\\n$/, \"\")}\n <|fim_middle|>",
- "timestamp": "2025-01-03T11:05:21.749423Z",
- "message_id": "a5bd2d58-4339-4bbd-a5b0-8f65ff758b46"
- },
- "answer": null
- }
- ],
- "provider": "vllm",
- "type": "fim",
- "chat_id": "a5bd2d58-4339-4bbd-a5b0-8f65ff758b46",
- "conversation_timestamp": "2025-01-03T11:05:21.749423Z"
- },
- {
- "question_answers": [
- {
- "question": {
- "message": "<|fim_prefix|>// diff --git a/package.json b/package.json\n// index 42ed9d9..6b1ddde 100644\n// --- a/package.json\n// +++ b/package.json\n// @@ -25,6 +25,7 @@\n// \"class-variance-authority\": \"^0.7.1\",\n// \"clsx\": \"^2.1.1\",\n// \"date-fns\": \"^4.1.0\",\n// + \"highlight.js\": \"^11.11.1\",\n// \"lucide-react\": \"^0.462.0\",\n// \"prismjs\": \"^1.29.0\",\n// \"react\": \"19.0.0\",\n// diff --git a/src/components/ui/chat/chat-bubble.tsx b/src/components/ui/chat/chat-bubble.tsx\n// index b9d20ec..1be8760 100644\n// --- a/src/components/ui/chat/chat-bubble.tsx\n// +++ b/src/components/ui/chat/chat-bubble.tsx\n// @@ -107,7 +107,7 @@ const ChatBubbleMessage = React.forwardRef<\n// const customStyle = {\n ...oneDark,\n 'code[class*=\"language-\"]': {\n ...oneDark['code[class*=\"language-\"]'],\n background: \"none\",\n },\n 'pre[class*=\"language-\"]': {\n ...oneDark['pre[class*=\"language-\"]'],\n whiteSpace: \"pre-wrap\",\n background: \"#1a1b26\",\n padding: \"1.5rem\",\n borderRadius: \"0.5rem\",\n margin: \"1.5rem 0\",\n fontSize: \"10px\",\n width: \"80%\",\n position: \"relative\",\n },\n};\nexport function Markdown({ children, className = \"\" }: Props) {\n return (\n ",
- "timestamp": "2025-01-03T11:32:56.031157Z",
- "message_id": "63dee5cb-444e-484c-8259-83be0ea073ac"
- },
- "answer": null
- }
- ],
- "provider": "vllm",
- "type": "fim",
- "chat_id": "63dee5cb-444e-484c-8259-83be0ea073ac",
- "conversation_timestamp": "2025-01-03T11:32:56.031157Z"
- },
- {
- "question_answers": [
- {
- "question": {
- "message": "<|fim_prefix|>// diff --git a/package.json b/package.json\n// index 42ed9d9..6b1ddde 100644\n// --- a/package.json\n// +++ b/package.json\n// @@ -25,6 +25,7 @@\n// \"class-variance-authority\": \"^0.7.1\",\n// \"clsx\": \"^2.1.1\",\n// \"date-fns\": \"^4.1.0\",\n// + \"highlight.js\": \"^11.11.1\",\n// \"lucide-react\": \"^0.462.0\",\n// \"prismjs\": \"^1.29.0\",\n// \"react\": \"19.0.0\",\n// diff --git a/src/components/ui/chat/chat-bubble.tsx b/src/components/ui/chat/chat-bubble.tsx\n// index b9d20ec..1be8760 100644\n// --- a/src/components/ui/chat/chat-bubble.tsx\n// +++ b/src/components/ui/chat/chat-bubble.tsx\n// @@ -107,7 +107,7 @@ const ChatBubbleMessage = React.forwardRef<\n// \n} from \"react-syntax-highlighter\";\nimport { oneDark } from \"react-syntax-highlighter/dist/esm/styles/prism\";\nimport { cn } from \"@/lib/utils\";\nimport { CopyToClipboard } from \"./CopyToClipboard\";\nimport hljs from \"highlight.js\";\n\nconst LANGUAGES_SUBSET_DETECTION = [\n \"bash\",\n \"c\",\n \"cpp\",\n \"csharp\",\n \"css\",\n \"elixir\",\n \"go\",\n \"groovy\",\n \"haskell\",\n \"html\",\n \"java\",\n \"javascript\",\n \"json\",\n \"kotlin\",\n \"lua\",\n \"markdown\",\n \"perl\",\n \"php\",<|fim_middle|>",
- "timestamp": "2025-01-03T11:56:42.129289Z",
- "message_id": "cd2f0343-5b65-4848-a694-79acb3e4de7b"
- },
- "answer": null
- }
- ],
- "provider": "vllm",
- "type": "fim",
- "chat_id": "cd2f0343-5b65-4848-a694-79acb3e4de7b",
- "conversation_timestamp": "2025-01-03T11:56:42.129289Z"
- },
- {
- "question_answers": [
- {
- "question": {
- "message": "<|fim_prefix|>// diff --git a/package.json b/package.json\n// index 42ed9d9..6b1ddde 100644\n// --- a/package.json\n// +++ b/package.json\n// @@ -25,6 +25,7 @@\n// \"class-variance-authority\": \"^0.7.1\",\n// \"clsx\": \"^2.1.1\",\n// \"date-fns\": \"^4.1.0\",\n// + \"highlight.js\": \"^11.11.1\",\n// \"lucide-react\": \"^0.462.0\",\n// \"prismjs\": \"^1.29.0\",\n// \"react\": \"19.0.0\",\n// diff --git a/src/components/ui/chat/chat-bubble.tsx b/src/components/ui/chat/chat-bubble.tsx\n// index b9d20ec..1be8760 100644\n// --- a/src/components/ui/chat/chat-bubble.tsx\n// +++ b/src/components/ui/chat/chat-bubble.tsx\n// @@ -107,7 +107,7 @@ const ChatBubbleMessage = React.forwardRef<\n// /prism\";\nimport { cn } from \"@/lib/utils\";\nimport { CopyToClipboard } from \"./CopyToClipboard\";\n// import hljs from \"highlight.js\";\n\nconst LANGUAGES_SUBSET_DETECTION = [\n \"bash\",\n \"c\",\n \"cpp\",\n \"csharp\",\n \"css\",\n \"elixir\",\n \"go\",\n \"groovy\",\n \"haskell\",\n \"html\",\n \"java\",\n \"javascript\",\n \"json\",\n \"kotlin\",\n \"lua\",\n \"markdown\",\n \"perl\",\n \"php\",\n \"python\",\n \"ruby\",\n \"rust\",\n \"scala\",\n \"sql\",\n \"swift\",\n \"typescript\",<|fim_middle|>",
- "timestamp": "2025-01-03T12:10:18.944843Z",
- "message_id": "52bf2933-2a34-4d78-8368-9fccb26da0a2"
- },
- "answer": null
- }
- ],
- "provider": "vllm",
- "type": "fim",
- "chat_id": "52bf2933-2a34-4d78-8368-9fccb26da0a2",
- "conversation_timestamp": "2025-01-03T12:10:18.944843Z"
- },
- {
- "question_answers": [
- {
- "question": {
- "message": "<|fim_prefix|>// diff --git a/package.json b/package.json\n// index 42ed9d9..6b1ddde 100644\n// --- a/package.json\n// +++ b/package.json\n// @@ -25,6 +25,7 @@\n// \"class-variance-authority\": \"^0.7.1\",\n// \"clsx\": \"^2.1.1\",\n// \"date-fns\": \"^4.1.0\",\n// + \"highlight.js\": \"^11.11.1\",\n// \"lucide-react\": \"^0.462.0\",\n// \"prismjs\": \"^1.29.0\",\n// \"react\": \"19.0.0\",\n// diff --git a/src/components/ui/chat/chat-bubble.tsx b/src/components/ui/chat/chat-bubble.tsx\n// index b9d20ec..1be8760 100644\n// --- a/src/components/ui/chat/chat-bubble.tsx\n// +++ b/src/components/ui/chat/chat-bubble.tsx\n// @@ -107,7 +107,7 @@ const ChatBubbleMessage = React.forwardRef<\n// \n return (\n \n ",
- "timestamp": "2025-01-03T14:47:23.644901Z",
- "message_id": "b57a9d41-c022-4e72-9b80-e96eed86a6ba"
- },
- "answer": null
- }
- ],
- "provider": "vllm",
- "type": "fim",
- "chat_id": "b57a9d41-c022-4e72-9b80-e96eed86a6ba",
- "conversation_timestamp": "2025-01-03T14:47:23.644901Z"
- }
-]
\ No newline at end of file
diff --git a/src/mocks/msw/mockers/conversation.mock.ts b/src/mocks/msw/mockers/conversation.mock.ts
index e0461e68..9a0f16ca 100644
--- a/src/mocks/msw/mockers/conversation.mock.ts
+++ b/src/mocks/msw/mockers/conversation.mock.ts
@@ -37,7 +37,7 @@ export function mockConversation({
length:
typeof alertsConfig?.numAlerts === "number"
? alertsConfig?.numAlerts
- : faker.number.int({ min: 0, max: 5 }),
+ : faker.number.int({ min: 2, max: 5 }),
}).map(() =>
mockAlert({
type:
diff --git a/src/routes/__tests__/route-chat.test.tsx b/src/routes/__tests__/route-chat.test.tsx
index 60eb927a..9af830ef 100644
--- a/src/routes/__tests__/route-chat.test.tsx
+++ b/src/routes/__tests__/route-chat.test.tsx
@@ -1,7 +1,17 @@
import { render } from "@/lib/test-utils";
-import { screen, within } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
+import { screen, waitFor, within } from "@testing-library/react";
+import { expect, it, vi } from "vitest";
import { RouteChat } from "../route-chat";
+import { server } from "@/mocks/msw/node";
+import { http, HttpResponse } from "msw";
+import { mswEndpoint } from "@/test/msw-endpoint";
+import { mockConversation } from "@/mocks/msw/mockers/conversation.mock";
+import { getConversationTitle } from "@/features/dashboard-messages/lib/get-conversation-title";
+import { formatTime } from "@/lib/format-time";
+import userEvent from "@testing-library/user-event";
+import { getProviderString } from "@/features/dashboard-messages/lib/get-provider-string";
+import { isAlertMalicious } from "@/lib/is-alert-malicious";
+import { isAlertSecret } from "@/lib/is-alert-secret";
vi.mock("@stacklok/ui-kit", async (importOriginal) => {
return {
@@ -19,69 +29,211 @@ vi.mock("@/hooks/useCurrentPromptStore", () => ({
})),
}));
-// TODO: Replace this with MSW
-vi.mock("@/hooks/use-query-get-workspace-messages", () => ({
- useQueryGetWorkspaceMessages: vi.fn(() => ({
- data: [
- {
- question_answers: [
- {
- question: {
- message:
- '\n\n```tsx src/App.tsx (23-29)\n const apiKey = "REDACTED<$lCzMsqxUWElmZqd/qX4llR3pqsrBJVxkt6SB6WXXKKhYG37ZnscxPawjfZmgPVoSpcSR975hOIE2s/6iVr2JETpVdwdaG4hAYlzJ4tteJg==>";\n\n\n```\nDo you see any security issue?.',
- timestamp: "2025-01-02T13:42:48.721165Z",
- message_id: "031cf7a3-1ce6-435d-bbee-0f939b30cc20",
- },
- answer: {
- message:
- '**CodeGate Security Analysis**\n\nThe provided code snippet contains a string that is likely an encoded value, specifically a Base64 encoded string. Here is a detailed analysis:\n\n### Security Vulnerabilities and Potential Risks\n\n1. **Sensitive Data Handling**:\n - The string starts with "REDACTED", indicating that it contains sensitive information that has been masked or obfuscated. However, the actual value is still present and could be potentially revealing if decoded.\n - Using "REDACTED" is a good practice for hiding sensitive information in logs, but it\'s important to ensure that the actual sensitive data is not exposed.\n\n2. **Decoding Risks**:\n - If the string is Base64 encoded, decoding it could reveal sensitive information such as API keys, tokens, or other credentials.\n - Decoding and handling such sensitive data in client-side code (like `App.tsx`) can expose it to potential attackers if the data is transmitted or logged.\n\n3. **Potential for Injection**:\n - If the decoded string is used in any form of user input or external communication, there is a risk of injection attacks (e.g., SQL injection, cross-site scripting, etc.).\n\n### Best Practices for Secure Implementation\n\n1. **Avoid Hardcoding Sensitive Data**:\n - Never hardcode sensitive data such as API keys, tokens, or passwords directly in your source code. Use environment variables or secure vaults to manage such data.\n\n2. **Proper Encoding and Decoding**:\n - Ensure that encoding and decoding operations are performed securely and that the decoded data is handled with care to prevent unauthorized access or usage.\n\n3. **Data Validation and Sanitization**:\n - Always validate and sanitize any data that is used in your application. This includes checking for malicious content or unexpected formats.\n\n4. **Secure Logging**:\n - Avoid logging sensitive data directly. If logging is necessary, ensure that sensitive information is either sanitized or replaced with placeholders.\n\n### Recommendations for Security Improvements\n\n1. **Use Environment Variables**:\n - Replace the hardcoded string with an environment variable. For example:\n ```typescript\n const test = process.env.REACT_APP_REDACTED_TOKEN;\n ```\n - Ensure that environment variables are securely managed and not exposed in version control systems.\n\n2. **Implement Access Controls**:\n - Restrict access to sensitive data to only those parts of your application that require it. Use role-based access controls (RBAC) to manage permissions.\n\n3. **Regular Security Audits**:\n - Conduct regular security audits and code reviews to identify and address potential security vulnerabilities.\n\n4. **Stay Updated with Security Standards**:\n - Follow security best practices and guidelines such as those provided by OWASP (Open Web Application Security Project) and other relevant organizations.\n\n### References to Relevant Security Standards or Guidelines\n\n- **OWASP**: [OWASP Security Guidelines](https://owasp.org/)\n- **Secure Coding Practices**: [Secure Coding Guidelines](https://www.securecoding.org/)\n- **Environment Variables**: [12factor.net - Config](https://12factor.net/config)\n\nBy following these best practices and recommendations, you can help ensure that your application handles sensitive data securely and mitigates potential security risks.',
- timestamp: "2025-01-02T13:42:49.361714Z",
- message_id: "a542408b-d0bc-4f6f-8b71-64c93c1e388a",
- },
- },
- ],
- provider: "vllm",
- type: "chat",
- chat_id: "chatcmpl-7d87679de7ed41639eb91d8ebbaa6f72",
- conversation_timestamp: "2025-01-02T13:42:48.721165Z",
- },
- ],
- })),
-}));
+it("renders breadcrumbs", async () => {
+ const conversation = mockConversation();
-describe("Chat", () => {
- it("render secret issue chat", () => {
- render(
+ {getConversationTitle(conversation)}
+
+ {formatTime(new Date(conversation.conversation_timestamp))}
+
+
+ );
+}
export function RouteChat() {
- const { id } = useParams();
- const { data = [] } = useQueryGetWorkspaceAlertTable();
- const { data: prompts } = useQueryGetWorkspaceMessages();
- const chat = prompts?.find((prompt) => prompt.chat_id === id);
+ const { id } = useParams<"id">();
+ const { state } = useConversationSearchParams();
+
+ const { data: conversation, isLoading } = useConversationById(id ?? "");
const title =
- chat === undefined ||
- chat.question_answers?.[0]?.question?.message === undefined
+ conversation === undefined ||
+ conversation.question_answers?.[0]?.question?.message === undefined
? `Prompt ${id}`
: parsingPromptText(
sanitizeQuestionPrompt({
- question: chat.question_answers?.[0].question.message,
- answer: chat.question_answers?.[0]?.answer?.message ?? "",
+ question: conversation.question_answers?.[0].question.message,
+ answer: conversation.question_answers?.[0]?.answer?.message ?? "",
}),
- chat.conversation_timestamp,
+ conversation.conversation_timestamp,
);
- // we have an issue on BE, we received duplicated alerts
- const alertDetail = data.filter((alert) =>
- alert.conversation.question_answers.some(
- (item) => item.question.message_id === id,
- ),
- )[0];
+ if (isLoading)
+ return (
+
+
+ );
+ if (!id || !conversation) return
{title}
+
- {alertDetail && (
-
-
-
-
- )}
-
-
- {(chat?.question_answers ?? []).map(({ question, answer }, index) => (
-
-
-
-
- {sanitizeQuestionPrompt({
- question: question?.message ?? "",
- answer: answer?.message ?? "",
- })}
-
-
-
-
-
- {answer?.message ?? ""}
-
-
-
- ))}
-
-
+
+
);
}
diff --git a/src/routes/route-dashboard.tsx b/src/routes/route-dashboard.tsx
index 2625e332..fb291c9c 100644
--- a/src/routes/route-dashboard.tsx
+++ b/src/routes/route-dashboard.tsx
@@ -1,21 +1,22 @@
-import { TableAlerts } from "@/features/alerts/components/table-alerts";
-import { AlertsSummaryMaliciousPkg } from "@/features/alerts/components/alerts-summary-malicious-pkg";
-import { AlertsSummaryWorkspaceTokenUsage } from "@/features/alerts/components/alerts-summary-workspace-token-usage";
-import { AlertsSummaryMaliciousSecrets } from "@/features/alerts/components/alerts-summary-secrets";
-import { TabsAlerts } from "@/features/alerts/components/tabs-alerts";
+import { TableMessages } from "@/features/dashboard-messages/components/table-messages";
+import { AlertsSummaryMaliciousPkg } from "@/features/dashboard-alerts/components/alerts-summary-malicious-pkg";
+import { AlertsSummaryWorkspaceTokenUsage } from "@/features/dashboard-alerts/components/alerts-summary-workspace-token-usage";
+import { AlertsSummaryMaliciousSecrets } from "@/features/dashboard-alerts/components/alerts-summary-secrets";
+import { TabsMessages } from "@/features/dashboard-messages/components/tabs-messages";
+import { PageContainer } from "@/components/page-container";
export function RouteDashboard() {
return (
-
+
+
+
);
}
diff --git a/src/routes/route-providers.tsx b/src/routes/route-providers.tsx
index 7ea1aeea..3f0459cd 100644
--- a/src/routes/route-providers.tsx
+++ b/src/routes/route-providers.tsx
@@ -2,7 +2,6 @@ import { BreadcrumbHome } from "@/components/BreadcrumbHome";
import {
Breadcrumbs,
Breadcrumb,
- Heading,
Card,
LinkButton,
CardBody,
@@ -11,27 +10,28 @@ import { twMerge } from "tailwind-merge";
import { PlusSquare } from "@untitled-ui/icons-react";
import { TableProviders } from "@/features/providers/components/table-providers";
import { Outlet } from "react-router-dom";
+import { PageContainer } from "@/components/page-container";
+import { PageHeading } from "@/components/heading";
export function RouteProvider({ className }: { className?: string }) {
return (
- <>
+
Providers
-
- Providers
+
-
+
-
+
);
}
diff --git a/src/routes/route-workspace-creation.tsx b/src/routes/route-workspace-creation.tsx
index 1229bcfc..ad897e5b 100644
--- a/src/routes/route-workspace-creation.tsx
+++ b/src/routes/route-workspace-creation.tsx
@@ -1,19 +1,20 @@
import { BreadcrumbHome } from "@/components/BreadcrumbHome";
+import { PageContainer } from "@/components/page-container";
import { WorkspaceCreation } from "@/features/workspace/components/workspace-creation";
-import { WorkspaceHeading } from "@/features/workspace/components/workspace-heading";
+import { PageHeading } from "@/components/heading";
import { Breadcrumbs, Breadcrumb } from "@stacklok/ui-kit";
export function RouteWorkspaceCreation() {
return (
- <>
+
Manage Workspaces
Create Workspace
-
);
}
diff --git a/src/routes/route-workspace.tsx b/src/routes/route-workspace.tsx
index 76e9bf20..fea687e0 100644
--- a/src/routes/route-workspace.tsx
+++ b/src/routes/route-workspace.tsx
@@ -1,7 +1,7 @@
import { BreadcrumbHome } from "@/components/BreadcrumbHome";
import { ArchiveWorkspace } from "@/features/workspace/components/archive-workspace";
-import { WorkspaceHeading } from "@/features/workspace/components/workspace-heading";
+import { PageHeading } from "@/components/heading";
import { WorkspaceName } from "@/features/workspace/components/workspace-name";
import { Alert, Breadcrumb, Breadcrumbs } from "@stacklok/ui-kit";
import { useParams } from "react-router-dom";
@@ -9,6 +9,7 @@ import { useArchivedWorkspaces } from "@/features/workspace/hooks/use-archived-w
import { useRestoreWorkspaceButton } from "@/features/workspace/hooks/use-restore-workspace-button";
import { WorkspaceCustomInstructions } from "@/features/workspace/components/workspace-custom-instructions";
import { WorkspacePreferredModel } from "@/features/workspace/components/workspace-preferred-model";
+import { PageContainer } from "@/components/page-container";
function WorkspaceArchivedBanner({ name }: { name: string }) {
const restoreButtonProps = useRestoreWorkspaceButton({ workspaceName: name });
@@ -37,20 +38,14 @@ export function RouteWorkspace() {
});
return (
- <>
+
Manage Workspaces
Workspace Settings
-
- Workspace settings for {name}
-
Manage Workspaces
-
+
C
-
+
);
}
diff --git a/tsconfig.app.json b/tsconfig.app.json
index 3385eef8..0c42ab7d 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -23,6 +23,13 @@
},
"types": ["vitest/globals", "@testing-library/jest-dom/vitest"]
},
- "include": ["src/**/*.ts", "src/**/*.tsx"],
+ "include": [
+ "src/**/*",
+ "knip.ts",
+ "openapi-ts.config.ts",
+ "tailwind.config.ts",
+ "vitest.config.ts",
+ "vitest.setup.ts"
+ ],
"exclude": ["node_modules"]
}
| | | |