@surph_ai/sdk 0.0.1

package/base/vinely-base/src/client/components/ui/skeleton.tsx

@@ -0,0 +1,14 @@
+import React from "react"
+import { cn } from "../../lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-accent animate-pulse rounded-md", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

package/base/vinely-base/src/client/components/ui/tooltip.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+import { cn } from "../../lib/utils";
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  );
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  );
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/base/vinely-base/src/client/components/vines-sidebar.tsx

@@ -0,0 +1,182 @@
+import axios from 'axios'
+import React, { useContext, useState, useEffect } from "react"
+import { MessagesSquare } from "lucide-react"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarRail,
+} from "./ui/sidebar"
+import { SessionContext } from '../contexts/SessionContext'
+import { useAssistantRuntime } from '@assistant-ui/react'
+
+const convertToArray = (data: Record<string, any> | undefined): any[] => {
+  if (!data) {
+    return []
+  }
+
+  const _array: any[] = []
+  for (const key of Object.keys(data)) {
+    const datasource = data[key]
+    if (datasource.index === '') {
+      continue
+    }
+
+    _array.push(datasource)
+  }
+
+  return _array
+}
+
+const contextRequest = async (datasource: Record<string, any>): Promise<void> => {
+  try {
+    await axios({
+      url: '/context',
+      method: 'post',
+      // data: { context: datasource },
+      headers: { Accept: 'application/json' },
+      data: {
+        context: {
+          vine: datasource.slug
+        }
+      },
+    })
+  } catch (error) {
+
+  }
+}
+
+const VinesSidebar = ({ items }: any) => {
+  const { context, dispatch } = useContext(SessionContext)
+  const { currentSpace, currentDatasource } = context
+  const [ indexed, setIndexed ] = useState<Record<string, any>[] | null>(null)
+
+  const assistantRuntime = useAssistantRuntime() as any
+
+  useEffect(() => {
+    if (indexed) {
+      return
+    }
+
+    if (!items) {
+      return
+    }
+
+    const _indexed = convertToArray(items).filter(datasource => datasource.index !== '')
+    setIndexed(_indexed)
+
+    if (currentDatasource) {
+      return
+    }
+
+    const datasource = _indexed[0]
+    dispatch({ type: 'SET_CURRENT_DATASOURCE', data: datasource })
+  }, [])
+
+  useEffect(() => {
+    if (!currentDatasource) {
+      return
+    }
+
+    contextRequest(currentDatasource)
+  }, [currentDatasource])
+
+  const selectItem = async (e: any): Promise<void> => {
+    if (e) {
+      e.preventDefault()
+    }
+
+    const threadId = e.target.getAttribute('data-thread')
+    const datasourceSlug = e.target.getAttribute('data-source')
+    const datasource = items[datasourceSlug]
+
+    if (currentDatasource.slug === datasource.slug) { // ignore
+      return
+    }
+
+    const { threadIds } = assistantRuntime.threads._core._state._baseValue
+    if (threadIds.length === 0) { // no conversation started, user toggling between options.
+      dispatch({ type: 'SET_CURRENT_DATASOURCE', data: datasource })
+      return
+    }
+
+    const previous = document.getElementById(`menu-${currentDatasource.slug}`)
+    if (previous?.getAttribute('data-thread') === '-1') {
+      const _threadId = threadIds[0]
+      const items = Array.from(document.getElementsByClassName('datasource-menu-item'))
+      let found = false
+      for (const item of items) {
+        const dataThread = item.getAttribute('data-thread')
+        if (dataThread === _threadId) {
+          found = true
+          break
+        }
+      }
+
+      if (found === false)
+        previous?.setAttribute('data-thread', _threadId)
+    }
+
+    if (threadId === '-1') {
+      // console.log('Assign thread id: ' + JSON.stringify(threadIds))
+      await assistantRuntime.threads.switchToNewThread()
+      dispatch({ type: 'SET_CURRENT_DATASOURCE', data: datasource })
+      return
+    }
+
+    await assistantRuntime.threads.switchToThread(threadId)
+    dispatch({ type: 'SET_CURRENT_DATASOURCE', data: datasource })
+  }
+
+  return (
+    <Sidebar>
+      <SidebarContent>
+        {/* <ThreadList /> */}
+        <div className="p-4">
+          <ul className="sidebar-list">
+            {indexed ? indexed.map((ds: any) => (
+              <li key={ds.slug}>
+                <a
+                  href="#"
+                  className="datasource-menu-item"
+                  onClick={selectItem}
+                  id={`menu-${ds.slug}`}
+                  data-source={ds.slug}
+                  data-thread="-1"
+                  style={{
+                    color: currentDatasource
+                      ? (ds.slug === currentDatasource.slug) ? '#fff' : '#555'
+                      : '#333'
+                  }}
+                >
+                  {ds.name}
+                </a>
+              </li>
+            )): null}
+          </ul>
+        </div>
+      </SidebarContent>
+      
+      <SidebarRail />
+      <SidebarFooter>
+        <SidebarMenu>
+          <SidebarMenuItem style={{ paddingLeft: 10, paddingBottom: 6 }}>
+            <a
+              href="https://vinely.ai"
+              style={{ fontSize: 12, color: '#fff' }}
+              target="_blank"
+            >
+              Powered by <span className="color-accent">Vinely</span>
+            </a>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarFooter>
+    </Sidebar>
+  )
+}
+
+export { VinesSidebar }

package/base/vinely-base/src/client/contexts/SessionContext.tsx

@@ -0,0 +1,28 @@
+import React, { createContext, useReducer } from 'react'
+import sessionReducer from './SessionReducer'
+
+interface ContextProps {
+  children: any,
+  initial: any
+}
+
+export const SessionContext: React.Context<any> = createContext({})
+
+const SessionContextProvider = ({ children, initial }: ContextProps) => {
+  const initialContext = {
+    ...initial,
+    settings: initial.config
+  }
+
+  const [context, dispatch] = useReducer(sessionReducer, {
+    ...initialContext
+  })
+
+  return (
+    <SessionContext.Provider value={{context, dispatch}}>
+      {children}
+    </SessionContext.Provider>
+  )
+}
+
+export default SessionContextProvider

package/base/vinely-base/src/client/contexts/SessionReducer.tsx

@@ -0,0 +1,32 @@
+export default (context: any, action: any) => {
+  const { data, type } = action;
+  switch (type) {
+    // case 'SET_CURRENT_USER': {
+    //   console.log('SET_CURRENT_USER: ' + JSON.stringify(data))
+    //   return {
+    //     ...context,
+    //     user: data
+    //   }
+    // }
+
+    case 'SET_CURRENT_SPACE': {
+      console.log('SET_CURRENT_SPACE: ' + JSON.stringify(data))
+      return {
+        ...context,
+        currentSpace: data,
+        currentDatasource: null
+      }
+    }
+
+    case 'SET_CURRENT_DATASOURCE': {
+      console.log('SET_CURRENT_DATASOURCE: ' + JSON.stringify(data))
+      return {
+        ...context,
+        currentDatasource: data
+      }
+    }
+
+    default:
+      return context;
+  }
+}

package/base/vinely-base/src/client/hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

package/base/vinely-base/src/client/index.tsx

@@ -0,0 +1,154 @@
+import React, { useMemo, useEffect, useState } from 'react'
+import ReactDOM from 'react-dom/client'
+import Markdown from 'react-markdown'
+import { BrowserRouter as Router, Route, Switch, useParams } from 'react-router-dom'
+import { AssistantRuntimeProvider } from "@assistant-ui/react"
+import { useChatRuntime } from "@assistant-ui/react-ai-sdk"
+import { Thread } from "./components/assistant-ui/thread"
+import {
+  SidebarInset,
+  SidebarProvider,
+  // SidebarTrigger,
+} from "./components/ui/sidebar"
+import { VinesSidebar } from "./components/vines-sidebar"
+import SessionContextProvider from './contexts/SessionContext'
+import { fetchMessages } from './lib/utils'
+import "katex/dist/katex.min.css";
+
+declare global {
+  interface Window {
+    __CONTEXT__: Record<string, any>
+  }
+}
+
+const { vineyard } = window.__CONTEXT__
+
+const PlainText = () => {
+  const [ messages, setMessages ] = useState<Record<string, string>[] | null>(null)
+  const { thread_id } = useParams() as any
+
+  useEffect(() => {
+    const _fetchMessages = async () => {
+      try {
+        const payload = await fetchMessages(vineyard.slug, thread_id)
+        setMessages(payload.messages)
+      } catch (error: any) {
+        console.log('FETCH MESSAGES ERR: ' + error.message)
+      }
+    }
+
+    _fetchMessages()
+  }, [])
+
+  return (
+    <div className="markdown" style={{ overflow: 'scroll' }}>
+      {messages?.map(msg => {
+        if (msg.role === 'user') {
+          return (
+            <div key={msg.id} className="message-user">
+              <div style={{ textAlign: 'right'}}>
+                <small>{msg.createdAt}</small>
+                <p>{msg.text}</p>
+              </div>
+            </div>
+          )
+        }
+
+        return (
+          <Markdown key={msg.id}>
+            {msg.text}
+          </Markdown>
+        )
+      })}
+    </div>
+  )
+}
+
+const Entry = () => {
+  const runtime = useChatRuntime()
+
+  const metadata = useMemo(() => (vineyard.metadata || {}), [])
+
+  // useEffect(() => {
+  //   console.log('THREAD: ' + JSON.stringify(thread))
+  // }, [thread])
+
+  return (
+    <Router>
+      <AssistantRuntimeProvider runtime={runtime}>
+        <SidebarProvider>
+          <div className="flex h-dvh w-full pr-0.5">
+            <VinesSidebar items={vineyard.datasources} />
+            <SidebarInset>
+              <header id="nav-header" className="flex h-16 shrink-0 items-center px-4 header">
+                <div style={{ flex: 1 }}></div>
+                <div style={{ flex: 1, textAlign: 'center', color: '#e8e8e3', paddingTop: 12 }}>
+                  {metadata.logo
+                    ? <img
+                        src={metadata.logo}
+                        style={{ maxWidth: 220, margin: 'auto', transition: 'all 0.25s linear' }}
+                        onMouseEnter={(e: any) => {
+                          e.target.style.opacity = '0.6'
+                          if (e.target.classList.contains('effect-shine')) {
+                            return
+                          }
+
+                          setTimeout(() => {
+                            e.target.style.transition = 'none'
+                            e.target.style.opacity = '1'
+                            e.target.classList.add('effect-shine')
+                          }, 750)
+                        }}
+                        onMouseLeave={(e: any) => {
+                          e.target.style.transition = 'all 0.25s linear'
+                          e.target.style.opacity = '0.6'
+
+                          if (!e.target.classList.contains('effect-shine')) {
+                            return
+                          }
+
+                          setTimeout(() => {
+                            e.target.style.opacity = '1'
+                            e.target.classList.remove('effect-shine')
+                          }, (350))
+                        }}
+                      />
+                    : vineyard.name
+                  }
+                </div>
+                <div style={{ flex: 1 }}></div>
+              </header>
+              {/* <div className="flex-1 overflow-hidden"> */}
+                <Switch>
+                  <Route exact path="/">
+                    <Thread />
+                  </Route>
+
+                  <Route exact path="/thread/:thread_id">
+                    <PlainText />
+                  </Route>
+                </Switch>
+              {/* </div> */}
+            </SidebarInset>
+          </div>
+        </SidebarProvider>
+      </AssistantRuntimeProvider>
+    </Router>
+  )
+}
+
+const RootLayout = ({ children }: any) => {
+  return (
+    <SessionContextProvider
+      initial={{
+        currentSpace: vineyard,
+        currentDatasource: null
+      }}
+    >
+      <Entry />
+    </SessionContextProvider>
+  )
+}
+
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
+root.render(<RootLayout children={null} />)

package/base/vinely-base/src/client/lib/API.ts

@@ -0,0 +1,155 @@
+import axios from 'axios'
+
+type ReqHeaders = Record<string, string>
+type ReqBody = Record<string, any>
+
+const queryParamsToString = (query: any) => {
+  const keys = Object.keys(query)
+  const lastIndex = keys.length - 1
+  let queryString = ''
+  keys.forEach((key, i) => {
+    queryString += `${key}=${query[key]}`
+    if (i !== lastIndex)
+      queryString += '&'
+  })
+
+  return queryString
+}
+
+const parseError = (err: any) => {
+  if (!err.response) {
+    return err
+  }
+
+  if (!err.response.data) {
+    return err
+  }
+
+  const { status, data } =  err.response
+  const error = new Error(JSON.stringify({
+    ...data,
+    status,
+  }))
+
+  error.name = data.type
+  return error
+}
+
+const API_VERSION = '/api'
+// const API_VERSION = `http://localhost:3000/rest`
+
+const DEFAULT_HEADERS = {
+  'Accept': 'application/json',
+  'Content-Type': 'application/json',
+  'X-Requested-With': 'XMLHttpRequest',
+  // 'Cache-Control': 'no-cache',
+  // 'Pragma': 'no-cache',
+}
+
+class API {
+  constructor() {
+
+  }
+
+  defaultHeaders(reqHeaders: any) {
+    const headers: any = {
+      ...DEFAULT_HEADERS,
+      // 'Client-TzOffset': tzOffsetHeader(),
+    }
+
+    if (!reqHeaders)
+      return headers
+
+    Object.keys(reqHeaders).forEach((headerName: string) => {
+      headers[headerName] = reqHeaders[headerName]
+    })
+
+    return headers
+  }
+
+  async get(endpoint: string, query?: ReqBody, reqHeaders?: ReqHeaders) {
+    const headers = this.defaultHeaders(reqHeaders)
+
+    const url = query === null
+      ? `${API_VERSION}${endpoint}`
+      : `${API_VERSION}${endpoint}?${queryParamsToString(query)}`
+
+    try {
+      const { data } = await axios({
+        url,
+        method: 'get',
+        headers,
+      })
+
+      return data
+    } catch (error) {
+      throw parseError(error)
+    }
+  }
+
+  async post(endpoint: string, body: ReqBody, reqHeaders?: ReqHeaders) {
+    const headers = this.defaultHeaders(reqHeaders)
+
+    try {
+      const { data } = await axios({
+        url: `${API_VERSION}${endpoint}`,
+        method: 'post',
+        data: body,
+        headers,
+      })
+
+      return data
+    } catch (error) {
+      throw parseError(error)
+    }
+  }
+
+  async put(endpoint: string, body: ReqBody, reqHeaders: ReqHeaders | null, isFormData?: boolean) {
+    try {
+      const headers = this.defaultHeaders(reqHeaders)
+
+      if (isFormData === true) {
+        const resp = await axios.put(`${API_VERSION}${endpoint}`, body, {
+          responseType: 'blob',
+          headers: {
+            ...headers,
+            'content-type': 'multipart/form-data',
+          },
+        })
+
+        return resp.data
+      }
+
+      const { data } = await axios({
+        url: `${API_VERSION}${endpoint}`,
+        method: 'put',
+        data: body,
+        headers,
+      })
+
+      return data
+    } catch (error) {
+      throw parseError(error)
+    }
+  }
+
+  /*
+  async delete(endpoint, body, reqHeaders) {
+    const headers = this.defaultHeaders(reqHeaders)
+
+    try {
+      const { data } = await axios({
+        url: `${API_VERSION}${endpoint}`,
+        method: 'delete',
+        headers,
+      })
+
+      return data
+    } catch (error) {
+      throw parseError(error)
+    }
+  }
+  */
+}
+
+export default new API()

package/base/vinely-base/src/client/lib/RPC.ts

@@ -0,0 +1,49 @@
+import axios from 'axios'
+
+class RPC {
+  constructor() {
+
+  }
+
+  /*
+  defaultHeaders(reqHeaders: any) {
+    const headers: any = {
+      ...DEFAULT_HEADERS,
+      // 'Client-TzOffset': tzOffsetHeader(),
+    }
+
+    if (!reqHeaders)
+      return headers
+
+    Object.keys(reqHeaders).forEach((headerName: string) => {
+      headers[headerName] = reqHeaders[headerName]
+    })
+
+    return headers
+  }
+  */
+
+  async call(
+    service: string,
+    action: string | null,
+    args: Record<any, any>
+  ): Promise<Record<any, any>> {
+
+    const url = action === null
+      ? `/rpc/${service}`
+      : `/rpc/${service}/${action}`
+
+    const { data } = await axios({
+      url,
+      method: 'post',
+      data: args,
+      headers: {
+        Accept: 'application/json'
+      }
+    })
+
+    return data
+  }
+}
+
+export default new RPC()