- {alert.trigger_string}
-
- );
- }
-
- if (isAlertMalicious(alert) && typeof alert.trigger_string === "object") {
- const maliciousPkg = alert.trigger_string as MaliciousPkgType;
-
- return (
-
-
-
-
- {maliciousPkg.type}/{maliciousPkg.name}
-
- {maliciousPkg.status && (
- <>
-
- {maliciousPkg.status} - - )} - {maliciousPkg.description && ( - <> -
- {" "} - {maliciousPkg.description} - - )} -
- );
- }
- return null;
-}
diff --git a/src/components/BreadcrumbHome.tsx b/src/components/BreadcrumbHome.tsx
index 86d69b21..914fcd47 100644
--- a/src/components/BreadcrumbHome.tsx
+++ b/src/components/BreadcrumbHome.tsx
@@ -1,5 +1,5 @@
-import { Breadcrumb } from "@stacklok/ui-kit";
+import { Breadcrumb } from '@stacklok/ui-kit'
export function BreadcrumbHome() {
- return - {maliciousPkg.status} - - )} - {maliciousPkg.description && ( - <> -
- {" "} - {maliciousPkg.description} - - )} -
- 
;
+ return
},
}}
remarkPlugins={[remarkGfm]}
>
{children}
- );
+ )
}
diff --git a/src/components/PromptList.tsx b/src/components/PromptList.tsx
deleted file mode 100644
index 2e989ded..00000000
--- a/src/components/PromptList.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { Link } from "react-router-dom";
-import {
- parsingPromptText,
- groupPromptsByRelativeDate,
- sanitizeQuestionPrompt,
-} from "@/lib/utils";
-import { useCurrentPromptStore } from "@/hooks/useCurrentPromptStore";
-import clsx from "clsx";
-import { Conversation } from "@/api/generated";
-
-export function PromptList({ prompts }: { prompts: Conversation[] }) {
- const { currentPromptId, setCurrentPromptId } = useCurrentPromptStore();
-
- const groupedPrompts = groupPromptsByRelativeDate(prompts);
-
- return (
-
-
- Prompt History
-
-
-
- {Array.from({ length: 20 }).map((_, index) => (
-
-
- ))}
-
-
-
- );
- }
-
- return (
-
-
- Prompt History
-
-
- {children}
-
-
- );
-}
diff --git a/src/components/SortableArea.tsx b/src/components/SortableArea.tsx
new file mode 100644
index 00000000..a9596183
--- /dev/null
+++ b/src/components/SortableArea.tsx
@@ -0,0 +1,106 @@
+import {
+ closestCenter,
+ DndContext,
+ DragEndEvent,
+ KeyboardSensor,
+ PointerSensor,
+ UniqueIdentifier,
+ useSensor,
+ useSensors,
+} from '@dnd-kit/core'
+import {
+ arrayMove,
+ SortableContext,
+ sortableKeyboardCoordinates,
+ verticalListSortingStrategy,
+} from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+import { useSortable } from '@dnd-kit/sortable'
+import { Drag } from './icons'
+
+type Props = {
+ children: (item: T, index: number) => React.ReactNode
+ setItems: (items: T[]) => void
+ items: T[]
+ disableDragByIndex?: number
+}
+
+function ItemWrapper({
+ children,
+ id,
+ hasDragDisabled,
+}: {
+ children: React.ReactNode
+ id: UniqueIdentifier
+ hasDragDisabled: boolean
+}) {
+ const { attributes, listeners, setNodeRef, transform, transition } =
+ useSortable({ id })
+ const style = {
+ transform: CSS.Transform.toString(transform),
+ transition,
+ }
+
+ return (
+ ({
+ children,
+ setItems,
+ items,
+ disableDragByIndex,
+}: Props) {
+ const sensors = useSensors(
+ useSensor(PointerSensor),
+ useSensor(KeyboardSensor, {
+ coordinateGetter: sortableKeyboardCoordinates,
+ })
+ )
+
+ function handleDragEnd(event: DragEndEvent) {
+ const { active, over } = event
+
+ if (over == null) {
+ // The item was dropped in it's original place
+ return
+ }
+
+ if (active.id !== over.id) {
+ const oldIndex = items.findIndex(({ id }) => id === active.id)
+ const newIndex = items.findIndex(({ id }) => id === over.id)
+
+ setItems(arrayMove(items, oldIndex, newIndex))
+ }
+ }
+
+ return (
+
+
+ {items.map((item, index) => (
+
+ {children(item, index)}
+
+ ))}
+
+
+ )
+}
diff --git a/src/components/__tests__/CopyToClipboard.test.tsx b/src/components/__tests__/CopyToClipboard.test.tsx
index 2d948ef0..2a853427 100644
--- a/src/components/__tests__/CopyToClipboard.test.tsx
+++ b/src/components/__tests__/CopyToClipboard.test.tsx
@@ -1,29 +1,29 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { describe, it, vi, expect } from "vitest";
-import { CopyToClipboard } from "../CopyToClipboard";
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, it, vi, expect } from 'vitest'
+import { CopyToClipboard } from '../CopyToClipboard'
-describe("CopyToClipboard", () => {
- it("renders the button with the correct icon", () => {
- render( ```tsx // filepath: /tests/my-test.tsx import",
- expected: /Prompt on file\/\/ filepath: \/tests\/my-test.tsx/i,
- },
- ],
- [
- "render snippet",
- {
- message:
- 'Compare this snippet from src/test.ts: // import { fakePkg } from "fake-pkg";',
- expected: /Prompt from snippet compare this snippet from src\/test.ts:/i,
- },
- ],
- [
- "render default",
- {
- message:
- "I know that this local proxy can forward requests to api.foo.com.\n\napi.foo.com will validate whether the connection si trusted using a certificate authority added on the local machine, specifically whether they allow SSL and x.509 basic policy.\n\nI need to be able to validate the proxys ability to make requests to api.foo.com. I only have access to code that can run in the browser. I can infer this based on a successful request. Be creative.",
- expected:
- "I know that this local proxy can forward requests to api.foo.com. api.foo.com will validate whether the connection si trusted using a certificate authority added on the local machine, specifically whether they allow SSL and x.509 basic policy. I need to be able to validate the proxys ability to make requests to api.foo.com. I only have access to code that can run in the browser. I can infer this based on a successful request. Be creative.",
- },
- ],
-];
-
-describe("PromptList", () => {
- it("render prompt", () => {
- render() => JSX.Element;
- title: string;
- body: string;
- actions: [ReactNode, ReactNode?] | null;
+ illustration: (props: SVGProps) => JSX.Element
+ title: string
+ body: string
+ actions: [ReactNode, ReactNode?] | null
}) {
return (
-
-
-
-
- {
public state: State = {
hasError: false,
- };
+ }
public static getDerivedStateFromError(): State {
- return { hasError: true };
+ return { hasError: true }
}
public componentDidCatch() {
@@ -25,9 +25,9 @@ export default class ErrorBoundary extends Component {
public render() {
if (this.state.hasError) {
- return this.props.fallback;
+ return this.props.fallback
}
- return this.props.children;
+ return this.props.children
}
}
diff --git a/src/components/FormButtons.tsx b/src/components/FormButtons.tsx
new file mode 100644
index 00000000..2b9049db
--- /dev/null
+++ b/src/components/FormButtons.tsx
@@ -0,0 +1,43 @@
+import { FormState } from '@/hooks/useFormState'
+import { Button } from '@stacklok/ui-kit'
+import { FlipBackward } from '@untitled-ui/icons-react'
+
+type Props = {
+ canSubmit: boolean
+ formErrorMessage?: string
+ formSideNote?: string
+ formState: FormState
+ children?: React.ReactNode
+ isPending: boolean
+}
+export function FormButtons({
+ formErrorMessage,
+ formState,
+ canSubmit,
+ isPending,
+ children,
+ formSideNote,
+}: Props) {
+ return (
+
@@ -33,5 +33,5 @@ export function DropdownMenu({
- );
+ )
}
diff --git a/src/components/Markdown.tsx b/src/components/Markdown.tsx
index 5e4f348c..dd3b7511 100644
--- a/src/components/Markdown.tsx
+++ b/src/components/Markdown.tsx
@@ -1,114 +1,172 @@
-import remarkGfm from "remark-gfm";
-import ReactMarkdown from "react-markdown";
-import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
-import { CopyToClipboard } from "./CopyToClipboard";
-import hljs from "highlight.js";
+import remarkGfm from 'remark-gfm'
+import ReactMarkdown from 'react-markdown'
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
+import hljs from 'highlight.js'
+import { JSX } from 'react'
+import type { Element } from 'hast'
+import { tv } from 'tailwind-variants'
+import { CopyToClipboard } from './CopyToClipboard'
const LANGUAGES_SUBSET_DETECTION = [
- "c",
- "cpp",
- "csharp",
- "css",
- "elixir",
- "go",
- "groovy",
- "haskell",
- "html",
- "java",
- "javascript",
- "json",
- "kotlin",
- "markdown",
- "php",
- "python",
- "ruby",
- "rust",
- "scala",
- "sql",
- "typescript",
- "yaml",
-];
+ 'c',
+ 'cpp',
+ 'csharp',
+ 'css',
+ 'elixir',
+ 'go',
+ 'groovy',
+ 'haskell',
+ 'html',
+ 'java',
+ 'javascript',
+ 'json',
+ 'kotlin',
+ 'markdown',
+ 'php',
+ 'python',
+ 'ruby',
+ 'rust',
+ 'scala',
+ 'sql',
+ 'typescript',
+ 'yaml',
+]
interface Props {
- children: string;
- isInverted?: boolean;
+ children: string
+ isInverted?: boolean
}
-const customStyle = {
- ...oneDark,
- 'code[class*="language-"]': {
- ...oneDark['code[class*="language-"]'],
- background: "none",
- },
- 'pre[class*="language-"]': {
- ...oneDark['pre[class*="language-"]'],
- background: "#1a1b26",
- padding: "1.5rem",
- borderRadius: "0.5rem",
- width: "100%",
- position: "relative",
- boxSizing: "border-box",
+const CodeBlock = ({
+ language,
+ children,
+}: {
+ language: string
+ children: string
+}) => {
+ if (!children) return null
+
+ return (
+
+ {String(children).replace(/\n$/, '')}
+
+ )
+}
+
+function Code({
+ children,
+ className = '',
+ node,
+}: JSX.IntrinsicElements['code'] & { node?: Element | undefined }) {
+ if (!node?.position || !children || typeof children !== 'string') {
+ console.error('Could not parse code node', node)
+ return <>{children}
+ }
+
+ const detectedLanguage =
+ hljs.highlightAuto(children, LANGUAGES_SUBSET_DETECTION).language ??
+ 'plaintext'
+ const match = /language-(\w+)/.exec(className || '')
+ const language: string = (match ? match[1] : detectedLanguage) ?? 'plaintext'
+
+ if (node.position.start.line === node.position.end.line) {
+ return {children}
+ }
+
+ return {children}
+}
+
+const markdownStyles = tv({
+ base: [
+ 'prose',
+ 'prose-h1:mb-2 prose-h1:text-lg prose-h1:font-semibold',
+ 'prose-h2:mb-2 prose-h2:text-lg prose-h2:font-semibold',
+ 'prose-h3:mb-2 prose-h3:text-lg prose-h3:font-semibold',
+ 'prose-h4:mb-2 prose-h4:text-lg prose-h4:font-semibold',
+ 'prose-h5:mb-2 prose-h5:text-lg prose-h5:font-semibold',
+ 'prose-h6:mb-2 prose-h6:text-lg prose-h6:font-semibold',
+ 'prose-p:text-base',
+ 'prose max-w-none prose-p:leading-relaxed',
+ '[--tw-prose-pre-code:theme(textColor.secondary)]',
+ '[--tw-prose-pre-bg:theme(colors.gray.200)]',
+ // 'prose-pre:p-4 prose-pre:shadow-md',
+ ],
+ variants: {
+ isInverted: {
+ true: 'prose-invert',
+ false: '',
+ },
},
-};
+})
export function Markdown({ children, isInverted = false }: Props) {
return (
-
- {String(children).replace(/\n$/, "")}
-
- {language && (
-
- );
- },
- pre({ children }) {
- return children;
- },
+ code: Code,
a({ children, ...props }) {
return (
{children}
- );
+ )
},
+ pre: ({ children }) => children,
img({ src, alt }) {
- return
- An error occurred
-
-
- If this issue persists, please reach out to us on{" "}
-
+
-
+ Github issues
+
+
+ )
+}
+
+export function Error() {
+ return (
+
+
- );
+ )
}
diff --git a/src/components/ErrorBoundary.tsx b/src/components/ErrorBoundary.tsx
index acd1ee61..d888f406 100644
--- a/src/components/ErrorBoundary.tsx
+++ b/src/components/ErrorBoundary.tsx
@@ -1,22 +1,22 @@
-import type { ReactNode } from "react";
-import { Component } from "react";
+import type { ReactNode } from 'react'
+import { Component } from 'react'
interface Props {
- children?: ReactNode;
- fallback: ReactNode;
+ children?: ReactNode
+ fallback: ReactNode
}
interface State {
- hasError: boolean;
+ hasError: boolean
}
export default class ErrorBoundary extends Component
+
+
+ {formSideNote &&
+ )
+}
diff --git a/src/components/HoverPopover.tsx b/src/components/HoverPopover.tsx
index 18255ae9..580f9568 100644
--- a/src/components/HoverPopover.tsx
+++ b/src/components/HoverPopover.tsx
@@ -4,24 +4,24 @@ import {
MenuTrigger,
OptionsSchema,
Popover,
-} from "@stacklok/ui-kit";
-import { OverlayTriggerStateContext } from "react-aria-components";
-import { ReactNode, useContext } from "react";
-import { ChevronDown, ChevronUp } from "@untitled-ui/icons-react";
+} from '@stacklok/ui-kit'
+import { OverlayTriggerStateContext } from 'react-aria-components'
+import { ReactNode, useContext } from 'react'
+import { ChevronDown, ChevronUp } from '@untitled-ui/icons-react'
function PopoverIcon() {
- const { isOpen = false } = useContext(OverlayTriggerStateContext) ?? {};
+ const { isOpen = false } = useContext(OverlayTriggerStateContext) ?? {}
- return isOpen ? {formSideNote}
}
+ {formErrorMessage && (
+ {formErrorMessage}
+ )}
+ {formState.isDirty && (
+
+ )}
+ {children}
+
+
+
+ {String(children).replace(/\n$/, '')}
+
+ {language && (
+
+ )
+}
+
+const CodeInline = ({
+ language,
+ children,
+}: {
+ language: string
+ children: string
+}) => {
+ if (!children) return null
+
+ return (
+
- {Object.entries(groupedPrompts).map(([group, prompts]) => (
-
- );
-}
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
deleted file mode 100644
index bd9bc002..00000000
--- a/src/components/Sidebar.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import {
- Sidebar as SidebarUI,
- SidebarContent,
- SidebarFooter,
- SidebarGroup,
- SidebarHeader,
- SidebarMenu,
- SidebarMenuItem,
- SidebarMenuSkeleton,
-} from "@/components/ui/sidebar";
-
-export function Sidebar({
- children,
- loading,
-}: {
- loading: boolean;
- children: React.ReactNode;
-}) {
- if (loading) {
- return (
-
-
- ))}
- - {group} -
--
- {prompts.map((prompt) => (
-
- - setCurrentPromptId(prompt.chat_id)} - to={`/prompt/${prompt.chat_id}`} - className={clsx( - `text-secondary text-sm truncate hover:text-gray-500`, - { "font-bold": currentPromptId === prompt.chat_id }, - )} - > - {parsingPromptText( - sanitizeQuestionPrompt({ - question: - prompt.question_answers?.[0]?.question.message ?? "", - answer: - prompt.question_answers?.[0]?.answer?.message ?? "", - }), - prompt.conversation_timestamp, - )} - - - ))} -
+ {hasDragDisabled ? (
+
+ ) : (
+
+ )
+}
+
+export function SortableArea
+
+ )}
+ {children}
+ {actions}
- );
+ )
}
export function EmptyState({
@@ -24,19 +24,22 @@ export function EmptyState({
illustration: Illustration,
title,
}: {
- illustration: (props: SVGProps
-
+ ['level']
+ title: React.ReactNode
+ children?: React.ReactNode
+}) {
+ return (
+
+ {title}
+ {children}
+
+ )
+}
diff --git a/src/components/icons/Continue.tsx b/src/components/icons/Continue.tsx
index cb9cd6fa..52799a35 100644
--- a/src/components/icons/Continue.tsx
+++ b/src/components/icons/Continue.tsx
@@ -1,4 +1,4 @@
-import type { SVGProps } from "react";
+import type { SVGProps } from 'react'
const SvgContinue = (props: SVGProps) => (
-);
-export default SvgContinue;
+)
+export default SvgContinue
diff --git a/src/components/icons/Copilot.tsx b/src/components/icons/Copilot.tsx
index 9479811e..910dbfae 100644
--- a/src/components/icons/Copilot.tsx
+++ b/src/components/icons/Copilot.tsx
@@ -1,4 +1,4 @@
-import type { SVGProps } from "react";
+import type { SVGProps } from 'react'
const SvgCopilot = (props: SVGProps) => (
-);
-export default SvgCopilot;
+)
+export default SvgCopilot
diff --git a/src/components/icons/Discord.tsx b/src/components/icons/Discord.tsx
index d040b49f..55f459d6 100644
--- a/src/components/icons/Discord.tsx
+++ b/src/components/icons/Discord.tsx
@@ -1,4 +1,4 @@
-import type { SVGProps } from "react";
+import type { SVGProps } from 'react'
const SvgDiscord = (props: SVGProps) => (
-);
-export default SvgDiscord;
+)
+export default SvgDiscord
diff --git a/src/components/icons/Drag.tsx b/src/components/icons/Drag.tsx
new file mode 100644
index 00000000..2363a7f0
--- /dev/null
+++ b/src/components/icons/Drag.tsx
@@ -0,0 +1,15 @@
+import type { SVGProps } from "react";
+const SvgDrag = (props: SVGProps) => (
+
+);
+export default SvgDrag;
diff --git a/src/components/icons/Github.tsx b/src/components/icons/Github.tsx
index da690ebd..09b924a2 100644
--- a/src/components/icons/Github.tsx
+++ b/src/components/icons/Github.tsx
@@ -1,4 +1,4 @@
-import type { SVGProps } from "react";
+import type { SVGProps } from 'react'
const SvgGithub = (props: SVGProps) => (
-);
-export default SvgGithub;
+)
+export default SvgGithub
diff --git a/src/components/icons/Youtube.tsx b/src/components/icons/Youtube.tsx
index b474b895..d92299f3 100644
--- a/src/components/icons/Youtube.tsx
+++ b/src/components/icons/Youtube.tsx
@@ -1,4 +1,4 @@
-import type { SVGProps } from "react";
+import type { SVGProps } from 'react'
const SvgYoutube = (props: SVGProps) => (
-);
-export default SvgYoutube;
+)
+export default SvgYoutube
diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts
index b1107dfe..0448acf4 100644
--- a/src/components/icons/index.ts
+++ b/src/components/icons/index.ts
@@ -1,5 +1,6 @@
-export { default as Continue } from "./Continue";
-export { default as Copilot } from "./Copilot";
-export { default as Discord } from "./Discord";
-export { default as Github } from "./Github";
-export { default as Youtube } from "./Youtube";
+export { default as Continue } from './Continue'
+export { default as Copilot } from './Copilot'
+export { default as Discord } from './Discord'
+export { default as Github } from './Github'
+export { default as Youtube } from './Youtube'
+export { default as Drag } from "./Drag";
diff --git a/src/components/page-container.tsx b/src/components/page-container.tsx
new file mode 100644
index 00000000..89a7567f
--- /dev/null
+++ b/src/components/page-container.tsx
@@ -0,0 +1,9 @@
+import { ReactNode } from 'react'
+
+export function PageContainer({ children }: { children: ReactNode }) {
+ return (
+
+ {children}
+
+ )
+}
diff --git a/src/components/react-query-provider.tsx b/src/components/react-query-provider.tsx
index f4a7f3c7..567ce905 100644
--- a/src/components/react-query-provider.tsx
+++ b/src/components/react-query-provider.tsx
@@ -1,12 +1,12 @@
-import { V1ListActiveWorkspacesResponse } from "@/api/generated";
-import { v1ListActiveWorkspacesQueryKey } from "@/api/generated/@tanstack/react-query.gen";
-import { getQueryCacheConfig } from "@/lib/react-query-utils";
+import { V1ListActiveWorkspacesResponse } from '@/api/generated'
+import { v1ListActiveWorkspacesQueryKey } from '@/api/generated/@tanstack/react-query.gen'
+import { getQueryCacheConfig } from '@/lib/react-query-utils'
import {
QueryCacheNotifyEvent,
QueryClient,
QueryClientProvider as VendorQueryClientProvider,
-} from "@tanstack/react-query";
-import { ReactNode, useState, useEffect } from "react";
+} from '@tanstack/react-query'
+import { ReactNode, useState, useEffect } from 'react'
/**
* Responsible for determining whether a queryKey attached to a queryCache event
@@ -16,7 +16,7 @@ function isActiveWorkspacesQueryKey(queryKey: unknown): boolean {
return (
Array.isArray(queryKey) &&
queryKey[0]._id === v1ListActiveWorkspacesQueryKey()[0]?._id
- );
+ )
}
/**
@@ -24,69 +24,69 @@ function isActiveWorkspacesQueryKey(queryKey: unknown): boolean {
* nested payload attached to a queryCache event.
*/
function getWorkspaceName(event: QueryCacheNotifyEvent): string | null {
- if ("action" in event === false || "data" in event.action === false)
- return null;
+ if ('action' in event === false || 'data' in event.action === false)
+ return null
return (
(event.action.data as V1ListActiveWorkspacesResponse | undefined | null)
?.workspaces[0]?.name ?? null
- );
+ )
}
export function QueryClientProvider({ children }: { children: ReactNode }) {
const [activeWorkspaceName, setActiveWorkspaceName] = useState(
- null,
- );
+ null
+ )
const [queryClient] = useState(
() =>
new QueryClient({
defaultOptions: {
queries: {
- ...getQueryCacheConfig("no-cache"),
- refetchOnMount: true,
+ ...getQueryCacheConfig('no-cache'),
+ refetchOnMount: false, // additional instances of a query shouldn't trigger background refetch
refetchOnReconnect: true,
refetchOnWindowFocus: true,
},
},
- }),
- );
+ })
+ )
useEffect(() => {
- const queryCache = queryClient.getQueryCache();
+ const queryCache = queryClient.getQueryCache()
const unsubscribe = queryCache.subscribe((event) => {
if (
- event.type === "updated" &&
- event.action.type === "success" &&
+ event.type === 'updated' &&
+ event.action.type === 'success' &&
isActiveWorkspacesQueryKey(event.query.options.queryKey)
) {
- const newWorkspaceName: string | null = getWorkspaceName(event);
+ const newWorkspaceName: string | null = getWorkspaceName(event)
if (
newWorkspaceName === activeWorkspaceName ||
newWorkspaceName === null
)
- return;
+ return
- setActiveWorkspaceName(newWorkspaceName);
+ setActiveWorkspaceName(newWorkspaceName)
// eslint-disable-next-line no-restricted-syntax
void queryClient.invalidateQueries({
- refetchType: "all",
+ refetchType: 'all',
// Avoid a continuous loop
predicate(query) {
- return !isActiveWorkspacesQueryKey(query.queryKey);
+ return !isActiveWorkspacesQueryKey(query.queryKey)
},
- });
+ })
}
- });
+ })
return () => {
- return unsubscribe();
- };
- }, [activeWorkspaceName, queryClient]);
+ return unsubscribe()
+ }
+ }, [activeWorkspaceName, queryClient])
return (
{children}
- );
+ )
}
diff --git a/src/components/ui/chat/chat-bubble.tsx b/src/components/ui/chat/chat-bubble.tsx
index 73cfa0fd..52f3b364 100644
--- a/src/components/ui/chat/chat-bubble.tsx
+++ b/src/components/ui/chat/chat-bubble.tsx
@@ -1,31 +1,31 @@
-import * as React from "react";
-import MessageLoading from "./message-loading";
-import { Avatar, Button } from "@stacklok/ui-kit";
-import { tv } from "tailwind-variants";
-import { twMerge } from "tailwind-merge";
+import * as React from 'react'
+import MessageLoading from './message-loading'
+import { Avatar, Button } from '@stacklok/ui-kit'
+import { tv } from 'tailwind-variants'
+import { twMerge } from 'tailwind-merge'
// ChatBubble
const chatBubbleVariant = tv({
- base: "flex gap-2 max-w-[60%] items-end relative group",
+ base: 'group relative flex max-w-[60%] items-end gap-2 text-sm',
variants: {
variant: {
- received: "self-start",
- sent: "self-end flex-row-reverse",
+ received: 'self-start',
+ sent: 'flex-row-reverse self-end',
},
layout: {
- default: "",
- ai: "max-w-full w-full items-center",
+ default: '',
+ ai: 'w-full max-w-full items-center',
},
},
defaultVariants: {
- variant: "received",
- layout: "default",
+ variant: 'received',
+ layout: 'default',
},
-});
+})
interface ChatBubbleProps extends React.HTMLAttributes {
- variant: "received" | "sent";
- layout?: "default" | "ai";
+ variant: 'received' | 'sent'
+ layout?: 'default' | 'ai'
}
const ChatBubble = React.forwardRef(
@@ -33,29 +33,29 @@ const ChatBubble = React.forwardRef(
{
- src?: string;
- fallback?: string;
- className?: string;
+ src?: string
+ fallback?: string
+ className?: string
}
const ChatBubbleAvatar: React.FC = ({
@@ -67,34 +67,34 @@ const ChatBubbleAvatar: React.FC = ({
{
- variant: "received" | "sent";
- layout?: "default" | "ai";
- isLoading?: boolean;
+ variant: 'received' | 'sent'
+ layout?: 'default' | 'ai'
+ isLoading?: boolean
}
const ChatBubbleMessage = React.forwardRef<
@@ -103,12 +103,12 @@ const ChatBubbleMessage = React.forwardRef<
>(
(
{ className, variant, layout, isLoading = false, children, ...props },
- ref,
+ ref
) => (
+
{title}
- );
+ )
}
diff --git a/src/components/heading.tsx b/src/components/heading.tsx
new file mode 100644
index 00000000..d9bd29fb
--- /dev/null
+++ b/src/components/heading.tsx
@@ -0,0 +1,22 @@
+import { Heading as UIKitHeading } from '@stacklok/ui-kit'
+import React, { ComponentProps } from 'react'
+
+export function PageHeading({
+ title,
+ children,
+ level,
+}: {
+ level: ComponentProps{body}
{actions ?
{React.Children.map(children, (child) =>
- React.isValidElement(child) && typeof child.type !== "string"
+ React.isValidElement(child) && typeof child.type !== 'string'
? React.cloneElement(child, {
variant,
layout,
} as React.ComponentProps)
- : child,
+ : child
)}
- ),
-);
-ChatBubble.displayName = "ChatBubble";
+ )
+)
+ChatBubble.displayName = 'ChatBubble'
// ChatBubbleAvatar
interface ChatBubbleAvatarProps extends React.ComponentProps
- ),
-);
-ChatBubbleMessage.displayName = "ChatBubbleMessage";
+ )
+)
+ChatBubbleMessage.displayName = 'ChatBubbleMessage'
// ChatBubbleTimestamp
interface ChatBubbleTimestampProps
extends React.HTMLAttributes {
- timestamp: string;
+ timestamp: string
}
const ChatBubbleTimestamp: React.FC = ({
@@ -136,21 +136,21 @@ const ChatBubbleTimestamp: React.FC = ({
className,
...props
}) => (
-
+ & {
- icon: React.ReactNode;
-};
+ icon: React.ReactNode
+}
const ChatBubbleAction: React.FC = ({
icon,
onPress,
className,
- variant = "tertiary",
+ variant = 'tertiary',
isIcon = true,
...props
}) => (
@@ -163,12 +163,12 @@ const ChatBubbleAction: React.FC = ({
>
{icon}
-);
+)
interface ChatBubbleActionWrapperProps
extends React.HTMLAttributes {
- variant?: "sent" | "received";
- className?: string;
+ variant?: 'sent' | 'received'
+ className?: string
}
const ChatBubbleActionWrapper = React.forwardRef<
@@ -178,18 +178,19 @@ const ChatBubbleActionWrapper = React.forwardRef<
;
+type ChatMessageListProps = React.HTMLAttributes
const ChatMessageList = React.forwardRef(
({ className, children, ...props }, ref) => (
,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
- {
- side: "top" | "left" | "right" | "bottom";
-}
-
-const SheetContent = React.forwardRef<
- React.ElementRef,
- SheetContentProps
->(({ side = "right", className, children, ...props }, ref) => (
-
-
- {children}
-
-
-
-
-));
-SheetContent.displayName = SheetPrimitive.Content.displayName;
-
-const SheetHeader = ({
- className,
- ...props
-}: React.HTMLAttributes) => (
-
-);
-SheetHeader.displayName = "SheetHeader";
-
-const SheetFooter = ({
- className,
- ...props
-}: React.HTMLAttributes) => (
-
-);
-SheetFooter.displayName = "SheetFooter";
-
-const SheetTitle = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
- ,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
- (null);
-
-function useSidebar() {
- const context = React.useContext(SidebarContext);
- if (!context) {
- throw new Error("useSidebar must be used within a SidebarProvider.");
- }
-
- return context;
-}
-
-const SidebarProvider = React.forwardRef<
- HTMLDivElement,
- React.ComponentProps<"div"> & {
- defaultOpen?: boolean;
- open?: boolean;
- onOpenChange?: (open: boolean) => void;
- }
->(
- (
- {
- defaultOpen = true,
- open: openProp,
- onOpenChange: setOpenProp,
- className,
- style,
- children,
- ...props
- },
- ref,
- ) => {
- const isMobile = useIsMobile();
- const [openMobile, setOpenMobile] = React.useState(false);
-
- // This is the internal state of the sidebar.
- // We use openProp and setOpenProp for control from outside the component.
- const [_open, _setOpen] = React.useState(defaultOpen);
- const open = openProp ?? _open;
- const setOpen = React.useCallback(
- (value: boolean | ((value: boolean) => boolean)) => {
- const openState = typeof value === "function" ? value(open) : value;
- if (setOpenProp) {
- setOpenProp(openState);
- } else {
- _setOpen(openState);
- }
-
- // This sets the cookie to keep the sidebar state.
- document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
- },
- [setOpenProp, open],
- );
-
- // Helper to toggle the sidebar.
- const toggleSidebar = React.useCallback(() => {
- return isMobile
- ? setOpenMobile((open) => !open)
- : setOpen((open) => !open);
- }, [isMobile, setOpen, setOpenMobile]);
-
- // Adds a keyboard shortcut to toggle the sidebar.
- React.useEffect(() => {
- const handleKeyDown = (event: KeyboardEvent) => {
- if (
- event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
- (event.metaKey || event.ctrlKey)
- ) {
- event.preventDefault();
- toggleSidebar();
- }
- };
-
- window.addEventListener("keydown", handleKeyDown);
- return () => window.removeEventListener("keydown", handleKeyDown);
- }, [toggleSidebar]);
-
- // We add a state so that we can do data-state="expanded" or "collapsed".
- // This makes it easier to style the sidebar with Tailwind classes.
- const state = open ? "expanded" : "collapsed";
-
- const contextValue = React.useMemo(
- () => ({
- state,
- open,
- setOpen,
- isMobile,
- openMobile,
- setOpenMobile,
- toggleSidebar,
- }),
- [
- state,
- open,
- setOpen,
- isMobile,
- openMobile,
- setOpenMobile,
- toggleSidebar,
- ],
- );
-
- return (
-
-
{timestamp}
-);
+)
// ChatBubbleAction
type ChatBubbleActionProps = React.ComponentProps
{children}
-));
-ChatBubbleActionWrapper.displayName = "ChatBubbleActionWrapper";
+))
+ChatBubbleActionWrapper.displayName = 'ChatBubbleActionWrapper'
export {
ChatBubble,
@@ -200,4 +201,4 @@ export {
chatBubbleMessageVariants,
ChatBubbleAction,
ChatBubbleActionWrapper,
-};
+}
diff --git a/src/components/ui/chat/chat-message-list.tsx b/src/components/ui/chat/chat-message-list.tsx
index a469796c..33dc75d9 100644
--- a/src/components/ui/chat/chat-message-list.tsx
+++ b/src/components/ui/chat/chat-message-list.tsx
@@ -1,23 +1,23 @@
-import * as React from "react";
-import { twMerge } from "tailwind-merge";
+import * as React from 'react'
+import { twMerge } from 'tailwind-merge'
-type ChatMessageListProps = React.HTMLAttributes
{children}
- ),
-);
+ )
+)
-ChatMessageList.displayName = "ChatMessageList";
+ChatMessageList.displayName = 'ChatMessageList'
-export { ChatMessageList };
+export { ChatMessageList }
diff --git a/src/components/ui/chat/message-loading.tsx b/src/components/ui/chat/message-loading.tsx
index 40a1de7f..51755312 100644
--- a/src/components/ui/chat/message-loading.tsx
+++ b/src/components/ui/chat/message-loading.tsx
@@ -1,45 +1,45 @@
-// @hidden
-export default function MessageLoading() {
- return (
-
- );
-}
+// @hidden
+export default function MessageLoading() {
+ return (
+
+ )
+}
diff --git a/src/components/ui/sheet.tsx b/src/components/ui/sheet.tsx
deleted file mode 100644
index 35ee8813..00000000
--- a/src/components/ui/sheet.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as SheetPrimitive from "@radix-ui/react-dialog";
-
-import { tv } from "tailwind-variants";
-import { twMerge } from "tailwind-merge";
-import { XClose } from "@untitled-ui/icons-react";
-
-const Sheet = SheetPrimitive.Root;
-
-const SheetTrigger = SheetPrimitive.Trigger;
-
-const SheetClose = SheetPrimitive.Close;
-
-const SheetPortal = SheetPrimitive.Portal;
-
-const SheetOverlay = React.forwardRef<
- React.ElementRef