@vibe-forge/client 0.2.0-alpha.0

package/src/components/knowledge-base/components/SpecItem.tsx

@@ -0,0 +1,131 @@
+import './SpecItem.scss'
+
+import { Button, Empty, Popover, Tag, Tooltip } from 'antd'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import useSWR from 'swr'
+
+import type { SpecDetail, SpecSummary } from '#~/api.js'
+import { getSpecDetail } from '#~/api.js'
+import { MarkdownContent } from '#~/components/chat/MarkdownContent'
+import { LoadingState } from './LoadingState'
+import { MetaList } from './MetaList'
+
+type SpecItemProps = {
+  spec: SpecSummary
+}
+
+export function SpecItem({ spec }: SpecItemProps) {
+  const { t } = useTranslation()
+  const [expanded, setExpanded] = React.useState(false)
+  const { data, isLoading } = useSWR<{ spec: SpecDetail }>(
+    expanded ? ['spec-detail', spec.id] : null,
+    () => getSpecDetail(spec.id)
+  )
+  const detail = data?.spec
+  const body = detail?.body ?? ''
+  const tags = spec.tags ?? []
+  const skills = spec.skills ?? []
+  const rules = spec.rules ?? []
+
+  return (
+    <div className='knowledge-base-view__item'>
+      <div className='knowledge-base-view__item-row'>
+        <div className='knowledge-base-view__item-main'>
+          <div className='knowledge-base-view__item-title'>
+            <span className='material-symbols-rounded knowledge-base-view__item-icon'>account_tree</span>
+            <span>{spec.name}</span>
+          </div>
+          <div className='knowledge-base-view__item-desc'>{spec.description}</div>
+          {spec.params.length > 0 && (
+            <div className='knowledge-base-view__params'>
+              {spec.params.map(param => (
+                <div key={param.name} className='knowledge-base-view__param'>
+                  <span className='material-symbols-rounded knowledge-base-view__param-icon'>tune</span>
+                  <div className='knowledge-base-view__param-text'>
+                    <span className='knowledge-base-view__param-name'>{param.name}</span>
+                    {param.description && (
+                      <span className='knowledge-base-view__param-desc'>{param.description}</span>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+          {tags.length > 0 && (
+            <div className='knowledge-base-view__tag-list'>
+              {tags.map(tag => (
+                <Tag key={tag} className='knowledge-base-view__tag'>
+                  <span className='material-symbols-rounded knowledge-base-view__tag-icon'>sell</span>
+                  <span>{tag}</span>
+                </Tag>
+              ))}
+            </div>
+          )}
+        </div>
+        <div className='knowledge-base-view__item-meta'>
+          {spec.always && (
+            <Tag color='blue'>{t('knowledge.meta.always')}</Tag>
+          )}
+          <div className='knowledge-base-view__meta-pills'>
+            <Popover
+              content={<MetaList items={skills} />}
+              title={t('knowledge.meta.skills')}
+              trigger='click'
+              placement='bottomRight'
+            >
+              <Button
+                type='text'
+                className='knowledge-base-view__meta-pill'
+                disabled={skills.length === 0}
+              >
+                <span className='material-symbols-rounded knowledge-base-view__meta-pill-icon'>psychology</span>
+                <span>{t('knowledge.meta.skillsCount', { count: skills.length })}</span>
+              </Button>
+            </Popover>
+            <Popover
+              content={<MetaList items={rules} />}
+              title={t('knowledge.meta.rules')}
+              trigger='click'
+              placement='bottomRight'
+            >
+              <Button
+                type='text'
+                className='knowledge-base-view__meta-pill'
+                disabled={rules.length === 0}
+              >
+                <span className='material-symbols-rounded knowledge-base-view__meta-pill-icon'>gavel</span>
+                <span>{t('knowledge.meta.rulesCount', { count: rules.length })}</span>
+              </Button>
+            </Popover>
+          </div>
+          <Tooltip title={expanded ? t('knowledge.actions.collapse') : t('knowledge.actions.expand')}>
+            <Button
+              type='text'
+              className='knowledge-base-view__icon-button'
+              onClick={() => setExpanded(prev => !prev)}
+              icon={
+                <span className='material-symbols-rounded'>
+                  {expanded ? 'expand_less' : 'expand_more'}
+                </span>
+              }
+            />
+          </Tooltip>
+        </div>
+      </div>
+      {expanded && (
+        <div className='knowledge-base-view__detail'>
+          {isLoading && <LoadingState />}
+          {!isLoading && body.trim() === '' && (
+            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={t('knowledge.flows.noContent')} />
+          )}
+          {!isLoading && body.trim() !== '' && (
+            <div className='knowledge-base-view__markdown'>
+              <MarkdownContent content={body} />
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/knowledge-base/components/SpecList.scss

@@ -0,0 +1,5 @@
+.knowledge-base-view__spec-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}

package/src/components/knowledge-base/components/SpecList.tsx

@@ -0,0 +1,70 @@
+import './SpecList.scss'
+
+import { List } from 'antd'
+import { useTranslation } from 'react-i18next'
+
+import type { SpecSummary } from '#~/api.js'
+import { EmptyState } from './EmptyState'
+import { KnowledgeList } from './KnowledgeList'
+import { LoadingState } from './LoadingState'
+import { SpecItem } from './SpecItem'
+
+type SpecListProps = {
+  isLoading: boolean
+  specs: SpecSummary[]
+  filteredSpecs: SpecSummary[]
+  onCreate: () => void
+}
+
+export function SpecList({
+  isLoading,
+  specs,
+  filteredSpecs,
+  onCreate
+}: SpecListProps) {
+  const { t } = useTranslation()
+
+  if (isLoading) {
+    return (
+      <div className='knowledge-base-view__spec-list'>
+        <LoadingState />
+      </div>
+    )
+  }
+
+  if (specs.length === 0) {
+    return (
+      <div className='knowledge-base-view__spec-list'>
+        <EmptyState
+          description={t('knowledge.flows.empty')}
+          actionLabel={t('knowledge.flows.create')}
+          onAction={onCreate}
+        />
+      </div>
+    )
+  }
+
+  if (filteredSpecs.length === 0) {
+    return (
+      <div className='knowledge-base-view__spec-list'>
+        <EmptyState
+          description={t('knowledge.filters.noResults')}
+          variant='simple'
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div className='knowledge-base-view__spec-list'>
+      <KnowledgeList
+        data={filteredSpecs}
+        renderItem={(spec) => (
+          <List.Item className='knowledge-base-view__list-item'>
+            <SpecItem spec={spec} />
+          </List.Item>
+        )}
+      />
+    </div>
+  )
+}

package/src/components/knowledge-base/components/TabContent.scss

@@ -0,0 +1,8 @@
+.knowledge-base-view__content {
+  height: 100%;
+  overflow: auto;
+  padding: 16px 24px 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}

package/src/components/knowledge-base/components/TabContent.tsx

@@ -0,0 +1,17 @@
+import './TabContent.scss'
+
+import type { ReactNode } from 'react'
+
+type TabContentProps = {
+  children: ReactNode
+  className?: string
+}
+
+export function TabContent({ children, className }: TabContentProps) {
+  const mergedClassName = ['knowledge-base-view__content', className].filter(Boolean).join(' ')
+  return (
+    <div className={mergedClassName}>
+      {children}
+    </div>
+  )
+}

package/src/components/knowledge-base/components/TabLabel.scss

@@ -0,0 +1,10 @@
+.knowledge-base-view__tab-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.knowledge-base-view__tab-icon {
+  font-size: 18px;
+  color: var(--sub-text-color);
+}

package/src/components/knowledge-base/components/TabLabel.tsx

@@ -0,0 +1,15 @@
+import './TabLabel.scss'
+
+type TabLabelProps = {
+  icon: string
+  label: string
+}
+
+export function TabLabel({ icon, label }: TabLabelProps) {
+  return (
+    <span className='knowledge-base-view__tab-label'>
+      <span className='material-symbols-rounded knowledge-base-view__tab-icon'>{icon}</span>
+      <span>{label}</span>
+    </span>
+  )
+}

package/src/components/knowledge-base/index.tsx

@@ -0,0 +1 @@
+export { KnowledgeBaseView } from './KnowledgeBaseView.js'

package/src/components/sidebar/SessionItem.scss

@@ -0,0 +1,256 @@
+.session-item {
+  color: var(--text-color);
+  cursor: pointer;
+  padding: 12px !important;
+  position: relative;
+  border: 1px solid var(--border-color) !important;
+  border-radius: 12px;
+  transition: all .2s ease;
+  background-color: var(--bg-color);
+
+  &:hover {
+    background-color: var(--sidebar-hover-bg);
+    border-color: var(--sidebar-hover-bg) !important;
+
+    .session-item-actions {
+      opacity: 1;
+    }
+  }
+
+  &.active {
+    background-color: var(--sidebar-active-bg) !important;
+    border-color: var(--sidebar-active-text) !important;
+    color: var(--sidebar-active-text) !important;
+
+    .session-item-actions {
+      opacity: 1;
+    }
+  }
+
+  &.selected {
+    background-color: var(--sidebar-active-bg) !important;
+    border-color: var(--sidebar-active-text) !important;
+  }
+
+  .session-item-content {
+    display: flex;
+    align-items: flex-start;
+    width: 100%;
+    gap: 12px;
+
+    .status-dot {
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background-color: var(--sub-text-color); // Default gray
+      opacity: .3;
+      flex-shrink: 0;
+      margin-top: 5px;
+      margin-right: -4px; // Pull closer to the text
+      transition: all .2s;
+
+      &.active {
+        background-color: var(--sidebar-active-text); // Active blue
+        opacity: 1;
+      }
+    }
+
+    .batch-checkbox-wrapper {
+      width: 32px;
+      height: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+
+    .status-indicator {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 20px;
+      height: 20px;
+      flex-shrink: 0;
+      margin-top: 2px;
+
+      .status-icon {
+        &.spin {
+          animation: spin 1.5s linear infinite;
+        }
+      }
+
+      .waiting-input-indicator {
+        width: 14px;
+        height: 14px;
+        background-color: #faad14;
+        border-radius: 50%;
+        position: relative;
+        animation: pulse-yellow 2s infinite;
+
+        &::after {
+          content: '';
+          position: absolute;
+          top: -4px;
+          left: -4px;
+          right: -4px;
+          bottom: -4px;
+          border: 1px dashed #faad14;
+          border-radius: 50%;
+          animation: spin 3s linear infinite;
+        }
+      }
+    }
+
+    .session-info {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+
+      &.with-actions {
+        padding-right: 0; // Remove padding as actions are positioned differently
+      }
+
+      .session-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        gap: 8px;
+
+        .session-title {
+          flex: 1;
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          min-width: 0;
+
+          .session-title-text {
+            font-weight: 500;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            font-size: 14px;
+          }
+        }
+      }
+
+      .last-message {
+        font-size: 12px;
+        color: var(--sub-text-color);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        line-height: 1.5;
+      }
+
+      .session-meta {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 4px;
+
+        .time-display {
+          font-size: 11px;
+          color: var(--sub-text-color);
+        }
+      }
+
+      .tags-container {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 4px;
+        align-items: center;
+
+        .session-tag {
+          font-size: 10px;
+          margin: 0;
+          padding: 0 4px;
+          line-height: 14px;
+          border-radius: 2px;
+
+          &--automation {
+            padding: 0 6px;
+          }
+
+          &__link {
+            color: var(--primary-color);
+            text-decoration: none;
+          }
+        }
+      }
+
+    }
+  }
+
+  .session-item-badge {
+    position: absolute;
+    top: -6px;
+    right: -6px;
+    z-index: 20;
+
+    .ant-badge-count {
+      background-color: var(--sub-text-color) !important;
+      color: #fff;
+      box-shadow: none;
+    }
+  }
+
+  .session-item-actions {
+    display: flex;
+    gap: 4px;
+    opacity: 0;
+    transition: opacity .2s ease;
+
+    .action-btn {
+      color: var(--sub-text-color);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 20px;
+      height: 20px;
+      padding: 0;
+
+      &:hover {
+        background-color: transparent;
+        color: #3b82f6; // Blue on hover
+      }
+
+      &.starred {
+        .material-symbols-rounded {
+          color: #f59e0b; // Amber for starred
+          font-variation-settings: 'FILL' 1; // Always filled for starred state
+
+          &.filled {
+            font-variation-settings: 'FILL' 1;
+          }
+        }
+      }
+
+      .material-symbols-rounded {
+        font-size: 18px;
+      }
+    }
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes pulse-yellow {
+  0% {
+    box-shadow: 0 0 0 0 rgba(250, 173, 20, .4);
+  }
+  70% {
+    box-shadow: 0 0 0 6px rgba(250, 173, 20, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(250, 173, 20, 0);
+  }
+}