Feature: Usage counters for messages/chat threads

src/components/ChatContent/AssistantInput.tsx

@@ -7,6 +7,7 @@ import { ToolContent } from "./ToolsContent";
 import { fallbackCopying } from "../../utils/fallbackCopying";
 import { telemetryApi } from "../../services/refact/telemetry";
 import { LikeButton } from "./LikeButton";
+import { UsageCounter } from "./UsageCounter";
 
 type ChatInputProps = {
   message: string | null;
@@ -58,6 +59,7 @@ export const AssistantInput: React.FC<ChatInputProps> = ({
 
   return (
     <Container position="relative">
+      <UsageCounter />
       {message && (
         <Box py="4">
           <Markdown canHaveInteractiveElements={true} onCopyClick={handleCopy}>

src/components/ChatContent/UsageCounter/UsageCounter.module.css

@@ -0,0 +1,11 @@
+.usageCounterContainer {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  padding: var(--space-2) var(--space-3);
+  gap: 8px;
+  max-width: max-content;
+  opacity: 0.7;
+}

src/components/ChatContent/UsageCounter/UsageCounter.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Provider } from "react-redux";
+
+import { setUpStore } from "../../../app/store";
+import { Theme } from "../../Theme";
+import { AbortControllerProvider } from "../../../contexts/AbortControllers";
+
+import { UsageCounter } from ".";
+
+const MockedStore: React.FC = () => {
+  const store = setUpStore({
+    config: {
+      themeProps: {
+        appearance: "dark",
+      },
+      host: "web",
+      lspPort: 8001,
+    },
+  });
+
+  return (
+    <Provider store={store}>
+      <AbortControllerProvider>
+        <Theme accentColor="gray">
+          <UsageCounter />
+        </Theme>
+      </AbortControllerProvider>
+    </Provider>
+  );
+};
+
+const meta: Meta<typeof MockedStore> = {
+  title: "UsageCounter",
+  component: MockedStore,
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof UsageCounter> = {};

src/components/ChatContent/UsageCounter/UsageCounter.tsx

@@ -0,0 +1,18 @@
+import { Card, Flex, Text } from "@radix-ui/themes";
+import styles from "./UsageCounter.module.css";
+import { ArrowDownIcon, ArrowUpIcon } from "@radix-ui/react-icons";
+
+export const UsageCounter = () => {
+  return (
+    <Card className={styles.usageCounterContainer}>
+      <Flex align="center">
+        <ArrowUpIcon width="12" height="12" />
+        <Text size="1">1.2k</Text>
+      </Flex>
+      <Flex align="center">
+        <ArrowDownIcon width="12" height="12" />
+        <Text size="1">12k</Text>
+      </Flex>
+    </Card>
+  );
+};

src/components/ChatContent/UsageCounter/index.ts

@@ -0,0 +1 @@
+export { UsageCounter } from "./UsageCounter";