@gram-ai/elements 1.25.1 → 1.26.0

package/src/components/assistant-ui/thread.tsx

@@ -23,10 +23,16 @@ import {
   useAssistantState,
 } from '@assistant-ui/react'
 
-import { LazyMotion, MotionConfig, domAnimation } from 'motion/react'
+import {
+  AnimatePresence,
+  LazyMotion,
+  MotionConfig,
+  domAnimation,
+} from 'motion/react'
 import * as m from 'motion/react-m'
 import {
   createContext,
+  useCallback,
   useContext,
   useEffect,
   useMemo,
@@ -34,7 +40,6 @@ import {
   useState,
   type FC,
 } from 'react'
-import { AnimatePresence } from 'motion/react'
 
 import {
   ComposerAddAttachment,
@@ -43,25 +48,27 @@ import {
 } from '@/components/assistant-ui/attachment'
 import { FollowOnSuggestions } from '@/components/assistant-ui/follow-on-suggestions'
 import { MarkdownText } from '@/components/assistant-ui/markdown-text'
+import { MentionedToolsBadges } from '@/components/assistant-ui/mentioned-tools-badges'
 import { MessageFeedback } from '@/components/assistant-ui/message-feedback'
 import { Reasoning, ReasoningGroup } from '@/components/assistant-ui/reasoning'
 import { ToolFallback } from '@/components/assistant-ui/tool-fallback'
 import { ToolMentionAutocomplete } from '@/components/assistant-ui/tool-mention-autocomplete'
-import { MentionedToolsBadges } from '@/components/assistant-ui/mentioned-tools-badges'
 import { TooltipIconButton } from '@/components/assistant-ui/tooltip-icon-button'
 import { Button } from '@/components/ui/button'
-import { useToolMentions } from '@/hooks/useToolMentions'
-
+import { useChatId } from '@/contexts/ChatIdContext'
+import { useReplayContext } from '@/contexts/ReplayContext'
+import { useAuth } from '@/hooks/useAuth'
 import { useDensity } from '@/hooks/useDensity'
 import { useElements } from '@/hooks/useElements'
+import { isLocalThreadId } from '@/hooks/useGramThreadListAdapter'
 import { useRadius } from '@/hooks/useRadius'
+import { useRecordCassette } from '@/hooks/useRecordCassette'
 import { useThemeProps } from '@/hooks/useThemeProps'
+import { useToolMentions } from '@/hooks/useToolMentions'
+import { getApiUrl } from '@/lib/api'
 import { EASE_OUT_QUINT } from '@/lib/easing'
 import { MODELS } from '@/lib/models'
 import { cn } from '@/lib/utils'
-import { useRecordCassette } from '@/hooks/useRecordCassette'
-import { useReplayContext } from '@/contexts/ReplayContext'
-import { ConnectionStatusIndicatorSafe } from './connection-status-indicator'
 import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover'
 import {
   Tooltip,
@@ -69,8 +76,11 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from '../ui/tooltip'
+import { ConnectionStatusIndicatorSafe } from './connection-status-indicator'
 import { ToolGroup } from './tool-group'
 
+type Feedback = 'success' | 'failure'
+
 // Context for chat resolution state
 const ChatResolutionContext = createContext<{
   isResolved: boolean
@@ -78,12 +88,14 @@ const ChatResolutionContext = createContext<{
   setResolved: () => void
   setUnresolved: () => void
   resetFeedbackHidden: () => void
+  submitFeedback: (feedback: Feedback) => Promise<void>
 }>({
   isResolved: false,
   feedbackHidden: false,
   setResolved: () => {},
   setUnresolved: () => {},
   resetFeedbackHidden: () => {},
+  submitFeedback: async () => {},
 })
 
 const useChatResolution = () => useContext(ChatResolutionContext)
@@ -113,9 +125,16 @@ export const Thread: FC<ThreadProps> = ({ className }) => {
   const { config } = useElements()
   const components = config.components ?? {}
   const showStaticSessionWarning = config.api && 'sessionToken' in config.api
-  const showFeedback = config.thread?.experimental_showFeedback ?? false
+  const showFeedback = config.thread?.showFeedback ?? false
   const [isResolved, setIsResolved] = useState(false)
   const [feedbackHidden, setFeedbackHidden] = useState(false)
+  const chatId = useChatId()
+
+  const apiUrl = getApiUrl(config)
+  const auth = useAuth({
+    auth: config.api,
+    projectSlug: config.projectSlug,
+  })
 
   const setResolved = () => setIsResolved(true)
   const setUnresolved = () => {
@@ -124,6 +143,38 @@ export const Thread: FC<ThreadProps> = ({ className }) => {
   }
   const resetFeedbackHidden = () => setFeedbackHidden(false)
 
+  // Submit feedback to the API
+  const submitFeedback = useCallback(
+    async (feedback: Feedback) => {
+      if (!chatId) return
+      if (isLocalThreadId(chatId)) {
+        console.error("Local thread ID, can't submit feedback")
+        return
+      }
+
+      try {
+        const response = await fetch(`${apiUrl}/rpc/chat.submitFeedback`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            ...auth.headers,
+          },
+          body: JSON.stringify({
+            id: chatId,
+            feedback,
+          }),
+        })
+
+        if (!response.ok) {
+          console.error('Failed to submit feedback:', response.statusText)
+        }
+      } catch (error) {
+        console.error('Failed to submit feedback:', error)
+      }
+    },
+    [chatId, apiUrl, auth.headers]
+  )
+
   return (
     <ChatResolutionContext.Provider
       value={{
@@ -132,6 +183,7 @@ export const Thread: FC<ThreadProps> = ({ className }) => {
         setResolved,
         setUnresolved,
         resetFeedbackHidden,
+        submitFeedback,
       }}
     >
       <LazyMotion features={domAnimation}>
@@ -448,7 +500,16 @@ const FeedbackHiddenResetter: FC = () => {
 }
 
 const ComposerFeedback: FC = () => {
-  const { isResolved, feedbackHidden, setResolved } = useChatResolution()
+  const { isResolved, feedbackHidden, setResolved, submitFeedback } =
+    useChatResolution()
+
+  const handleFeedback = useCallback(
+    async (type: 'like' | 'dislike') => {
+      const feedback = type === 'like' ? 'success' : 'failure'
+      await submitFeedback(feedback)
+    },
+    [submitFeedback]
+  )
 
   return (
     <ThreadPrimitive.If empty={false}>
@@ -466,7 +527,11 @@ const ComposerFeedback: FC = () => {
               transition={{ duration: 0.2, ease: EASE_OUT_QUINT }}
               className="mb-3"
             >
-              <MessageFeedback className="mx-auto" onResolved={setResolved} />
+              <MessageFeedback
+                className="mx-auto"
+                onResolved={setResolved}
+                onFeedback={handleFeedback}
+              />
             </m.div>
           )}
         </AnimatePresence>

package/src/components/ui/charts.stories.tsx

@@ -0,0 +1,246 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import {
+  AreaChart,
+  BarChart,
+  LineChart,
+  PieChart,
+  DonutChart,
+  RadarChart,
+  ScatterChart,
+} from '@/plugins/chart/ui'
+
+// Wrapper component to render different chart types
+const ChartWrapper = ({ children }: { children: React.ReactNode }) => (
+  <div className="w-full">{children}</div>
+)
+
+const meta: Meta = {
+  title: 'Components/Charts',
+  parameters: {
+    layout: 'fullscreen',
+  },
+  decorators: [
+    (Story) => (
+      <div className="bg-background text-foreground min-h-screen p-6">
+        <div className="max-w-2xl">
+          <Story />
+        </div>
+      </div>
+    ),
+  ],
+}
+
+export default meta
+
+// Sample data for time series charts
+const timeSeriesData = [
+  { label: 'Jan', value: 4000, revenue: 2400, profit: 1200 },
+  { label: 'Feb', value: 3000, revenue: 1398, profit: 900 },
+  { label: 'Mar', value: 2000, revenue: 9800, profit: 2100 },
+  { label: 'Apr', value: 2780, revenue: 3908, profit: 1500 },
+  { label: 'May', value: 1890, revenue: 4800, profit: 1800 },
+  { label: 'Jun', value: 2390, revenue: 3800, profit: 1400 },
+  { label: 'Jul', value: 3490, revenue: 4300, profit: 2000 },
+]
+
+// Sample data for category charts
+const categoryData = [
+  { label: 'Electronics', value: 4500 },
+  { label: 'Clothing', value: 3200 },
+  { label: 'Home & Garden', value: 2800 },
+  { label: 'Sports', value: 2100 },
+  { label: 'Books', value: 1500 },
+]
+
+// Sample data for pie/donut charts
+const pieData = [
+  { label: 'Desktop', value: 45 },
+  { label: 'Mobile', value: 35 },
+  { label: 'Tablet', value: 15 },
+  { label: 'Other', value: 5 },
+]
+
+// Sample data for radar chart
+const radarData = [
+  { label: 'Speed', value: 85 },
+  { label: 'Reliability', value: 90 },
+  { label: 'Comfort', value: 78 },
+  { label: 'Safety', value: 95 },
+  { label: 'Efficiency', value: 82 },
+]
+
+// Sample data for scatter chart
+const scatterData = [
+  { x: 10, y: 30, label: 'A' },
+  { x: 40, y: 50, label: 'B' },
+  { x: 20, y: 80, label: 'C' },
+  { x: 60, y: 40, label: 'D' },
+  { x: 80, y: 90, label: 'E' },
+  { x: 30, y: 60, label: 'F' },
+  { x: 50, y: 20, label: 'G' },
+  { x: 70, y: 70, label: 'H' },
+]
+
+/**
+ * Area chart showing trends over time with filled areas.
+ */
+export const Area: StoryObj = {
+  render: () => (
+    <ChartWrapper>
+      <AreaChart
+        title="Revenue Over Time"
+        data={timeSeriesData}
+        series={['value', 'revenue']}
+        showGrid
+        showLegend
+      />
+    </ChartWrapper>
+  ),
+}
+
+/**
+ * Stacked area chart comparing multiple data series.
+ */
+export const AreaStacked: StoryObj = {
+  render: () => (
+    <ChartWrapper>
+      <AreaChart
+        title="Stacked Revenue Breakdown"
+        data={timeSeriesData}
+        series={['revenue', 'profit']}
+        stacked
+        showGrid
+        showLegend
+      />
+    </ChartWrapper>
+  ),
+}
+
+/**
+ * Vertical bar chart for comparing categories.
+ */
+export const Bar: StoryObj = {
+  render: () => (
+    <ChartWrapper>
+      <BarChart
+        title="Sales by Category"
+        data={categoryData}
+        showGrid
+        showLegend
+      />
+    </ChartWrapper>
+  ),
+}
+
+/**
+ * Horizontal bar chart layout.
+ */
+export const BarHorizontal: StoryObj = {
+  render: () => (
+    <ChartWrapper>
+      <BarChart
+        title="Sales by Category"
+        data={categoryData}
+        layout="horizontal"
+        showGrid
+      />
+    </ChartWrapper>
+  ),
+}
+
+/**
+ * Line chart for tracking trends over time.
+ */
+export const Line: StoryObj = {
+  render: () => (
+    <ChartWrapper>
+      <LineChart
+        title="Monthly Performance"
+        data={timeSeriesData}
+        series={['value', 'revenue']}
+        showGrid
+        showLegend
+        showDots
+      />
+    </ChartWrapper>
+  ),
+}
+
+/**
+ * Curved line chart with smooth interpolation.
+ */
+export const LineCurved: StoryObj = {
+  render: () => (
+    <ChartWrapper>
+      <LineChart
+        title="Smooth Trend Line"
+        data={timeSeriesData}
+        series={['value']}
+        showGrid
+        curved
+        showDots
+      />
+    </ChartWrapper>
+  ),
+}
+
+/**
+ * Pie chart showing proportional data.
+ */
+export const Pie: StoryObj = {
+  render: () => (
+    <ChartWrapper>
+      <PieChart
+        title="Traffic by Device"
+        data={pieData}
+        showLegend
+        showLabels
+      />
+    </ChartWrapper>
+  ),
+}
+
+/**
+ * Donut chart with center label.
+ */
+export const Donut: StoryObj = {
+  render: () => (
+    <ChartWrapper>
+      <DonutChart
+        title="Traffic by Device"
+        data={pieData}
+        showLegend
+        innerLabel="Total"
+        innerValue="100%"
+      />
+    </ChartWrapper>
+  ),
+}
+
+/**
+ * Radar chart for multi-dimensional comparison.
+ */
+export const Radar: StoryObj = {
+  render: () => (
+    <ChartWrapper>
+      <RadarChart title="Product Metrics" data={radarData} showLegend />
+    </ChartWrapper>
+  ),
+}
+
+/**
+ * Scatter chart for showing correlation between variables.
+ */
+export const Scatter: StoryObj = {
+  render: () => (
+    <ChartWrapper>
+      <ScatterChart
+        title="Price vs. Performance"
+        data={scatterData}
+        xLabel="Price"
+        yLabel="Performance"
+        showGrid
+      />
+    </ChartWrapper>
+  ),
+}