oxios 1.5.2

Oxios Agent OS — Agent Operating System powered by oxi-sdk
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

import { Brain } from 'lucide-react'
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import { EmptyState } from '@/components/shared/empty-state'
import { ErrorState } from '@/components/shared/error-state'
import { LoadingCards } from '@/components/shared/loading'
import { Select } from '@/components/ui/select'
import { useMemoryList } from '@/hooks/use-memory'
import type { MemoryDetail } from '@/types/memory'
import { MemoryCard } from './memory-card'

interface MemoryBrowserProps {
  onSelect: (memory: MemoryDetail) => void
}

export function MemoryBrowser({ onSelect }: MemoryBrowserProps) {
  const { t } = useTranslation()
  const [tier, setTier] = useState<string>('all')
  const [type, setType] = useState<string>('all')
  const { data, isLoading, isError, refetch } = useMemoryList(
    tier !== 'all' ? tier : undefined,
    type !== 'all' ? type : undefined,
  )

  if (isError) return <ErrorState onRetry={() => refetch()} />

  const items = Array.isArray(data?.items) ? data.items : []

  const tierOptions = [
    { label: t('common.all'), value: 'all' },
    { label: t('memory.hot'), value: 'hot' },
    { label: t('memory.warm'), value: 'warm' },
    { label: t('memory.cold'), value: 'cold' },
  ]

  const typeOptions = [
    { label: t('common.all'), value: 'all' },
    { label: t('memory.fact'), value: 'fact' },
    { label: t('memory.episode'), value: 'episode' },
    { label: t('memory.knowledge'), value: 'knowledge' },
    { label: t('memory.decision'), value: 'decision' },
    { label: t('memory.skill'), value: 'skill' },
    { label: t('memory.preference'), value: 'preference' },
    { label: t('memory.conversation'), value: 'conversation' },
    { label: t('memory.session'), value: 'session' },
    { label: t('memory.procedure'), value: 'procedure' },
  ]

  return (
    <div className="space-y-4">
      <div className="flex gap-3 flex-wrap">
        <Select
          value={tier}
          onValueChange={setTier}
          options={tierOptions}
          placeholder={t('memory.filterByTier')}
          className="w-full sm:w-40"
        />
        <Select
          value={type}
          onValueChange={setType}
          options={typeOptions}
          placeholder={t('memory.filterByType')}
          className="w-full sm:w-40"
        />
      </div>
      {isLoading ? (
        <LoadingCards count={6} />
      ) : items.length === 0 ? (
        <EmptyState
          icon={<Brain className="h-10 w-10" />}
          title={t('memory.noMemories')}
          description={t('memory.description')}
        />
      ) : (
        <div className="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
          {items.map((m) => (
            <MemoryCard key={m.id} memory={m} onClick={() => onSelect(m)} />
          ))}
        </div>
      )}
    </div>
  )
}