@surph_ai/sdk 0.0.1

package/base/vinely-base/src/client/components/assistant-ui/thread.tsx

@@ -0,0 +1,666 @@
+import React, { useMemo, useEffect } from "react"
+import { useHistory } from 'react-router-dom'
+import {
+  ThreadPrimitive,
+  ComposerPrimitive,
+  MessagePrimitive,
+  ActionBarPrimitive,
+  BranchPickerPrimitive,
+  ErrorPrimitive,
+  ToolCallMessagePartProps,
+  useMessage,
+  useThread,
+  useThreadListItem
+} from "@assistant-ui/react";
+import type { FC } from "react";
+import {
+  ArrowDownIcon,
+  ArrowUpIcon,
+  PlusIcon,
+  CopyIcon,
+  CheckIcon,
+  PencilIcon,
+  RefreshCwIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  Square,
+} from "lucide-react";
+import { motion } from "framer-motion";
+import { TooltipIconButton } from "./tooltip-icon-button";
+import { MarkdownText } from "./markdown-text";
+import { Button } from "../ui/button";
+import { cn, uploadFile, fetchSpace, updateSpace } from "../../lib/utils";
+// import { ToolFallback } from "./tool-fallback";
+// import { SessionContext } from '../../contexts/SessionContext'
+
+const { vineyard } = window.__CONTEXT__
+
+const removeClass = (selector: string, className: string) => {
+  Array.from(document.getElementsByClassName(selector)).forEach(el => {
+    el.classList.remove(className)
+  })
+}
+
+const addClass = (event: any, selector: string, className: string) => {
+  const els = Array.from(event.target.querySelectorAll(`.${selector}`))
+  els.forEach((el: any) => {
+    el.classList.add(className)
+  })
+}
+
+const parseDocname = (docPath: string): Record<string, string> => {
+  // console.log('DOC PATH: ' + docPath) // s3://vinely/sites/dans-test-12/storage/describe-econ-1012/econ1012.pdf
+  const parts = docPath.split('/')
+  const name = parts[parts.length-1]
+  const url = docPath.replace('s3://vinely/sites/', 'https://d24qxjs65cjbf1.cloudfront.net/')
+  return { name, url }
+}
+
+const parseVector = (vector: any, docs: any[]) => {
+  const { url, name } = parseDocname(vector.metadata['x-amz-bedrock-kb-source-uri'])
+  if (docs.find(doc => doc.url === url)) {
+    return
+  }
+
+  docs.push({ url, name })
+}
+
+export const Thread: FC = () => {
+  const thread = useThread()
+  const threadList = useThreadListItem()
+
+  useEffect(() => {
+    if (!thread) {
+      return
+    }
+
+    if (thread.isRunning) {
+      return
+    }
+
+    const msg = thread.messages.map(({ id, createdAt, role, content }: any) => {
+      const interactions = content.find((c: any) => c.type === 'text')
+      const text = interactions ? interactions.text : null
+
+      return ({
+        id,
+        createdAt,
+        role,
+        text
+      })
+    })
+
+    if (msg.length === 0) {
+      return
+    }
+
+    // console.log(JSON.stringify({ id: threadList.id, messages: msg }))
+    uploadFile({
+      folder: `sites/${vineyard.slug}`,
+      filedata: JSON.stringify({ id: threadList.id, messages: msg }),
+      filename: `threads/${threadList.id}.json`,
+      filetype: 'application/json'
+    })
+
+    const addThreadPreview = async (vyd: any) => {
+      // fetch space first because another session may be updating too:
+      const current = await fetchSpace(vyd)
+
+      const metadata = current.metadata || {}
+      const recentThreads = metadata.recentThreads || []
+      const found = recentThreads.find((t: any) => t.id === threadList.id)
+
+      // preview already found, this is a continuation of a thread:
+      if (found) {
+        return
+      }
+
+      const preview = msg.length > 1 ? msg[1].text : ''
+      recentThreads.unshift({
+        id: threadList.id,
+        initial: msg[0], // just send first message, not entire thread
+        preview: `${preview.substring(0, 275).trim()}...`
+      })
+
+      if (recentThreads.length === 7) { // max of 6 recent threads
+        recentThreads.pop()
+      }
+
+      await updateSpace(current, {
+        metadata: { ...metadata, recentThreads }
+      })
+    }
+
+    addThreadPreview(vineyard)
+  }, [thread])
+
+  return (
+    <ThreadPrimitive.Root
+      // aui-thread-root
+      className="bg-background flex h-full flex-col"
+      style={{
+        ["--thread-max-width" as string]: "54rem",
+        ["--thread-padding-x" as string]: "1rem",
+      }}
+    >
+      {/* aui-thread-viewport */}
+      <ThreadPrimitive.Viewport
+        className="relative flex min-w-0 flex-1 flex-col gap-6 overflow-y-scroll"
+        style={{ paddingTop: 80 }}
+        onScroll={(e: any) => {
+          const header = document.getElementById('nav-header')
+          if (!header) {
+            return
+          }
+
+          const offset = e.target.scrollTop
+          if (offset < 50) {
+            if (header.style.borderBottomColor !== '#191a1a') {
+              header.style.borderBottomColor = '#191a1a'
+            }
+
+            return
+          }
+
+          if (header.style.borderBottomColor !== '#ece6e70d') {
+            header.style.borderBottomColor = '#ece6e70d'
+          }
+        }}
+      >
+        <ThreadPrimitive.Messages
+          components={{
+            UserMessage,
+            EditComposer,
+            AssistantMessage,
+          }}
+        />
+
+        <ThreadPrimitive.If empty={false}>
+          {/* aui-thread-viewport-spacer */}
+          <motion.div className="min-h-6 min-w-6 shrink-0" />
+        </ThreadPrimitive.If>
+      </ThreadPrimitive.Viewport>
+
+      <Composer />
+    </ThreadPrimitive.Root>
+  );
+};
+
+const ThreadScrollToBottom: FC = () => {
+  return (
+    <ThreadPrimitive.ScrollToBottom asChild>
+      <TooltipIconButton
+        tooltip="Scroll to bottom"
+        variant="outline"
+        // aui-thread-scroll-to-bottom
+        className="dark:bg-background dark:hover:bg-accent absolute -top-12 z-10 self-center rounded-full p-4 disabled:invisible"
+        style={{ background: '#fff' }}
+      >
+        <ArrowDownIcon />
+      </TooltipIconButton>
+    </ThreadPrimitive.ScrollToBottom>
+  );
+};
+
+/*
+const ThreadWelcomeSuggestions: FC = () => {
+  return (
+    // aui-thread-welcome-suggestions
+    <div className="grid w-full gap-2 sm:grid-cols-2">
+      {[
+        {
+          title: "What are the advantages",
+          label: "of using Assistant Cloud?",
+          action: "What are the advantages of using Assistant Cloud?",
+        },
+        {
+          title: "Write code to",
+          label: `demonstrate topological sorting`,
+          action: `Write code to demonstrate topological sorting`,
+        },
+        {
+          title: "Help me write an essay",
+          label: `about AI chat applications`,
+          action: `Help me write an essay about AI chat applications`,
+        },
+        {
+          title: "What is the weather",
+          label: "in San Francisco?",
+          action: "What is the weather in San Francisco?",
+        },
+      ].map((suggestedAction, index) => (
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: 20 }}
+          transition={{ delay: 0.05 * index }}
+          key={`suggested-action-${suggestedAction.title}-${index}`}
+          // aui-thread-welcome-suggestion-display
+          className="[&:nth-child(n+3)]:hidden sm:[&:nth-child(n+3)]:block"
+        >
+          <ThreadPrimitive.Suggestion
+            prompt={suggestedAction.action}
+            method="replace"
+            autoSend
+            asChild
+          >
+            <Button
+              variant="ghost"
+              className="dark:hover:bg-accent/60 h-auto w-full flex-1 flex-wrap items-start justify-start gap-1 rounded-xl border px-4 py-3.5 text-left text-sm sm:flex-col"
+              aria-label={suggestedAction.action}
+            >
+              <span className="font-medium">{suggestedAction.title}</span>
+              <p className="text-muted-foreground">{suggestedAction.label}</p>
+            </Button>
+          </ThreadPrimitive.Suggestion>
+        </motion.div>
+      ))}
+    </div>
+  );
+};
+*/
+
+const RecentThreads = () => {
+  const history = useHistory()
+
+  useEffect(() => {
+    const threadPreviews = Array.from(document.getElementsByClassName('thread-preview'))
+    threadPreviews.forEach((preview: any, index: number) => {
+      const delay = (index * 200)
+      setTimeout(() => {
+        preview.style.opacity = '1'
+        preview.style.marginTop = '0px'
+      }, delay)
+    })
+  }, [])
+
+  const metadata = vineyard.metadata || {}
+  const threads = metadata.recentThreads || []
+
+  return (
+    <>
+      <h4 className="color-accent m-auto">Recent</h4>
+      <div className="grid w-full gap-4 sm:grid-cols-3">
+        {threads.map((thread: any) => (
+          <div
+            key={thread.id}
+            data-thread={thread.id}
+            className="thread-preview"
+            style={{ opacity: 0, marginTop: 8 }}
+            onClick={() => history.push(`thread/${thread.id}`)}
+          >
+            <div
+              className="card-preview"
+              onMouseEnter={(e: any) => {
+                removeClass('shine', 'effect-shine')
+                addClass(e, 'shine', 'effect-shine')
+              }}
+              onMouseLeave={(e: any) => {
+                removeClass('shine', 'effect-shine')
+              }}
+            >
+              <small className="color-accent">job market</small>
+              &nbsp;
+              <small>{thread.initial.createdAt}</small>
+              <h5 className="shine">{thread.initial.text}</h5>
+              <hr />
+              <p className="shine">{thread.preview}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </>
+  )
+}
+
+const Composer: FC = () => {
+  return (
+    // aui-composer-wrapper
+    <div className="bg-background relative mx-auto flex w-full max-w-[var(--thread-max-width)] flex-col gap-4 pb-4 md:pb-6">
+      <ThreadScrollToBottom />
+      <ThreadPrimitive.Empty>
+        {/* <ThreadWelcomeSuggestions /> */}
+        <RecentThreads />
+      </ThreadPrimitive.Empty>
+
+      {/* aui-composer-root */}
+      <ComposerPrimitive.Root className="focus-within::ring-offset-2 relative flex w-full flex-col rounded-2xl focus-within:ring-2 focus-within:ring-black dark:focus-within:ring-white">
+        {/* aui-composer-input */}
+        <ComposerPrimitive.Input
+          placeholder="Send a message..."
+          className={
+            "border-border dark:border-muted-foreground/15 focus:outline-primary placeholder:text-muted-foreground max-h-[calc(50dvh)] min-h-16 w-full resize-none rounded-t-2xl border-x border-t px-4 pt-2 pb-3 text-base outline-none"
+          }
+          rows={1}
+          autoFocus
+          aria-label="Message input"
+        />
+        <ComposerAction />
+      </ComposerPrimitive.Root>
+    </div>
+  );
+};
+
+const ComposerAction: FC = () => {
+  return (
+    // aui-composer-action-wrapper
+    <div className="border-border dark:border-muted-foreground/15 relative flex items-center justify-between rounded-b-2xl border-x border-b p-2" style={{ background: '#1f2121' }}>
+      <TooltipIconButton
+        tooltip="Attach file"
+        variant="ghost"
+        // aui-composer-attachment-button
+        className="hover:bg-foreground/15 dark:hover:bg-background/50 scale-115 p-3.5"
+        onClick={() => {
+          console.log("Attachment clicked - not implemented");
+        }}
+      >
+        <PlusIcon style={{ color:'#e8e8e3'}} />
+      </TooltipIconButton>
+
+      <ThreadPrimitive.If running={false}>
+        <ComposerPrimitive.Send asChild>
+          <Button
+            type="submit"
+            variant="default"
+            // aui-composer-send
+            className="dark:border-muted-foreground/90 border-muted-foreground/60 hover:bg-primary/75 size-8 rounded-full border"
+            aria-label="Send message"
+          >
+            {/* aui-composer-send-icon */}
+            <ArrowUpIcon className="size-5" />
+          </Button>
+        </ComposerPrimitive.Send>
+      </ThreadPrimitive.If>
+
+      <ThreadPrimitive.If running>
+        <ComposerPrimitive.Cancel asChild>
+          <Button
+            type="button"
+            variant="default"
+            // aui-composer-cancel
+            className="dark:border-muted-foreground/90 border-muted-foreground/60 hover:bg-primary/75 size-8 rounded-full border"
+            aria-label="Stop generating"
+          >
+            {/* aui-composer-cancel-icon */}
+            <Square className="size-3.5 fill-white dark:size-4 dark:fill-black" />
+          </Button>
+        </ComposerPrimitive.Cancel>
+      </ThreadPrimitive.If>
+    </div>
+  );
+};
+
+const MessageError: FC = () => {
+  return (
+    <MessagePrimitive.Error>
+      {/* aui-message-error-root */}
+      <ErrorPrimitive.Root className="border-destructive bg-destructive/10 dark:bg-destructive/5 text-destructive mt-2 rounded-md border p-3 text-sm dark:text-red-200">
+        {/* aui-message-error-message */}
+        <ErrorPrimitive.Message className="line-clamp-2" />
+      </ErrorPrimitive.Root>
+    </MessagePrimitive.Error>
+  );
+};
+
+const CustomToolFallback: FC<ToolCallMessagePartProps> = (toolInvocation: any) => {
+  const refs: any = useMemo(() => {
+    if (!toolInvocation.result) {
+      return null
+    }
+
+    if (!toolInvocation.result.content) {
+      return null
+    }
+
+    const { content } = toolInvocation.result
+    if (content.length === 0) {
+      return null
+    }
+
+    const payload = content[0]
+    if (!payload.text) {
+      return null
+    }
+
+    let parsed: any = {}
+    try {
+      parsed = JSON.parse(payload.text)
+    } catch (error) {
+      return null
+    }
+
+    if (parsed.vectors) {
+      const docs: any[] = []
+      parsed.vectors.forEach((vector: any) => parseVector(vector, docs))
+      return { vectors: parsed.vectors, docs }
+    }
+
+    if (!parsed.response) {
+      return null
+    }
+
+    const response = parsed.response
+    if (!response.vectors) {
+      return null
+    }
+
+    const { vectors } = response
+    const docs: any[] = []
+    vectors.forEach((vector: any) => parseVector(vector, docs))
+
+    return { vectors, docs }
+  }, [toolInvocation.result])
+
+  if (!refs) {
+    return null
+  }
+
+  return (
+    <>
+      {/* <ToolFallback { ...toolInvocation } /> */}
+      <div
+        className="space-y-2 mb-5 reference-container"
+        style={{ opacity: refs?.vectors === null ? 0 : 1 }}
+      >
+        {refs?.vectors === null
+          ? null
+          : <>
+              <small className="fw-600">Sources</small>
+              <ol style={{ marginTop: 6 }}>
+                {refs?.docs.map((doc: any) => (
+                  <li key={doc.url}>
+                    <a
+                      target="_blank"
+                      className="color-accent"
+                      href={doc.url}
+                    >
+                      <small>{doc.name}</small>
+                    </a>
+                  </li>
+                ))}
+              </ol>
+            </>
+        }
+      </div>
+    </>
+  );
+};
+
+const AssistantMessage: FC = () => {
+  return (
+    <MessagePrimitive.Root asChild>
+      <motion.div
+        // aui-assistant-message-root
+        className="relative mx-auto grid w-full max-w-[var(--thread-max-width)] grid-cols-[auto_auto_1fr] grid-rows-[auto_1fr] px-[var(--thread-padding-x)] py-4"
+        initial={{ y: 5, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        data-role="assistant"
+      >
+        {/* aui-assistant-message-avatar */}
+        {/* <div className="ring-border bg-background col-start-1 row-start-1 flex size-8 shrink-0 items-center justify-center rounded-full ring-1">
+          <StarIcon size={14} />
+        </div> */}
+
+        {/* aui-assistant-message-content */}
+        <div className="text-foreground col-span-2 col-start-2 row-start-1 ml-4 leading-7 break-words" style={{ color: '#e8e8e3' }}>
+          <MessagePrimitive.Content
+            components={{
+              Text: MarkdownText,
+              tools: { Fallback: CustomToolFallback }
+            }}
+          />
+          <MessageError />
+        </div>
+
+        <AssistantActionBar />
+
+        {/* aui-assistant-branch-picker */}
+        <BranchPicker className="col-start-2 row-start-2 mr-2 -ml-2" />
+      </motion.div>
+    </MessagePrimitive.Root>
+  );
+};
+
+const AssistantActionBar: FC = () => {
+  return (
+    <ActionBarPrimitive.Root
+      hideWhenRunning
+      autohide="not-last"
+      autohideFloat="single-branch"
+      // aui-assistant-action-bar-root
+      className="text-muted-foreground data-floating:bg-background col-start-3 row-start-2 mt-3 ml-3 flex gap-1 data-floating:absolute data-floating:mt-2 data-floating:rounded-md data-floating:border data-floating:p-1 data-floating:shadow-sm"
+    >
+      <ActionBarPrimitive.Copy asChild>
+        <TooltipIconButton tooltip="Copy">
+          <MessagePrimitive.If copied>
+            <CheckIcon />
+          </MessagePrimitive.If>
+          <MessagePrimitive.If copied={false}>
+            <CopyIcon />
+          </MessagePrimitive.If>
+        </TooltipIconButton>
+      </ActionBarPrimitive.Copy>
+      <ActionBarPrimitive.Reload asChild>
+        <TooltipIconButton tooltip="Refresh">
+          <RefreshCwIcon />
+        </TooltipIconButton>
+      </ActionBarPrimitive.Reload>
+    </ActionBarPrimitive.Root>
+  );
+};
+
+const UserMessage: FC = () => {
+  const { content } = useMessage()
+  const message = content[0]
+
+  if (message.type === 'text' && message.text === 'Please describe in plain english.') {
+    return null
+  }
+
+  return (
+    <MessagePrimitive.Root asChild>
+      <motion.div
+        // aui-user-message-root
+        className="mx-auto grid w-full max-w-[var(--thread-max-width)] auto-rows-auto grid-cols-[minmax(72px,1fr)_auto] gap-y-1 px-[var(--thread-padding-x)] py-4 [&:where(>*)]:col-start-2"
+        initial={{ y: 5, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        data-role="user"
+      >
+        <UserActionBar />
+
+        {/* aui-user-message-content */}
+        <div className="text-default col-start-2 rounded-3xl px-5 py-1 break-words" style={{ color: '#e8e8e3' }}>
+          <MessagePrimitive.Content
+            components={{ Text: MarkdownText }}
+          />
+          <small style={{ float: 'right', color: '#8c8c8c', fontSize: 12, marginTop: 6 }}>{`${new Date().toLocaleString('en-US')}`}</small>
+        </div>
+
+        {/* aui-user-branch-picker */}
+        <BranchPicker className="col-span-full col-start-1 row-start-3 -mr-1 justify-end" />
+      </motion.div>
+    </MessagePrimitive.Root>
+  );
+};
+
+const UserActionBar: FC = () => {
+  return (
+    <ActionBarPrimitive.Root
+      hideWhenRunning
+      autohide="not-last"
+      // aui-user-action-bar-root
+      className="col-start-1 mt-2.5 mr-3 flex flex-col items-end"
+    >
+      <ActionBarPrimitive.Edit asChild>
+        <TooltipIconButton tooltip="Edit?">
+          <PencilIcon style={{ color: '#fff' }} />
+        </TooltipIconButton>
+      </ActionBarPrimitive.Edit>
+    </ActionBarPrimitive.Root>
+  );
+};
+
+const EditComposer: FC = () => {
+  return (
+    // aui-edit-composer-wrapper
+    <div className="mx-auto flex w-full max-w-[var(--thread-max-width)] flex-col gap-4 px-[var(--thread-padding-x)]">
+      {/* aui-edit-composer-root */}
+      <ComposerPrimitive.Root
+        className="bg-muted ml-auto flex w-full max-w-7/8 flex-col rounded-xl"
+        style={{ background: '#1f2121' }}
+      >
+        {/* aui-edit-composer-input */}
+        <ComposerPrimitive.Input
+          className="text-foreground flex min-h-[60px] w-full resize-none bg-transparent p-4 outline-none"
+          autoFocus
+        />
+
+        {/* aui-edit-composer-footer */}
+        <div className="mx-3 mb-3 flex items-center justify-center gap-2 self-end">
+          <ComposerPrimitive.Cancel asChild>
+            <Button variant="ghost" size="sm" aria-label="Cancel edit">
+              Cancel
+            </Button>
+          </ComposerPrimitive.Cancel>
+          <ComposerPrimitive.Send asChild>
+            <Button size="sm" aria-label="Update message">
+              Update
+            </Button>
+          </ComposerPrimitive.Send>
+        </div>
+      </ComposerPrimitive.Root>
+    </div>
+  );
+};
+
+const BranchPicker: FC<BranchPickerPrimitive.Root.Props> = ({
+  className,
+  ...rest
+}) => {
+  return (
+    <BranchPickerPrimitive.Root
+      hideWhenSingleBranch
+      // aui-branch-picker-root
+      className={cn(
+        "text-muted-foreground inline-flex items-center text-xs",
+        className,
+      )}
+      {...rest}
+    >
+      <BranchPickerPrimitive.Previous asChild>
+        <TooltipIconButton tooltip="Previous">
+          <ChevronLeftIcon />
+        </TooltipIconButton>
+      </BranchPickerPrimitive.Previous>
+      {/* aui-branch-picker-state */}
+      <span className="font-medium">
+        <BranchPickerPrimitive.Number /> / <BranchPickerPrimitive.Count />
+      </span>
+      <BranchPickerPrimitive.Next asChild>
+        <TooltipIconButton tooltip="Next">
+          <ChevronRightIcon />
+        </TooltipIconButton>
+      </BranchPickerPrimitive.Next>
+    </BranchPickerPrimitive.Root>
+  );
+};

package/base/vinely-base/src/client/components/assistant-ui/tool-fallback.tsx

@@ -0,0 +1,44 @@
+import React, { useMemo, useState, useEffect } from "react";
+import { ToolCallContentPartComponent } from "@assistant-ui/react";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import { Button } from "../ui/button";
+
+export const ToolFallback: ToolCallContentPartComponent = ({
+  toolName,
+  argsText,
+  result,
+}) => {
+  const [isCollapsed, setIsCollapsed] = useState(true)
+
+  return (
+    <div className="mb-0 flex w-full flex-col gap-3 rounded-lg border py-3" style={{ cursor: 'pointer' }} onClick={() => setIsCollapsed(!isCollapsed)}>
+      <div className="flex items-center gap-2 px-4">
+        <CheckIcon className="size-4" />
+        <p>
+          Using tool: <b>{toolName}</b>
+        </p>
+        <div className="flex-grow" />
+        <Button onClick={() => setIsCollapsed(!isCollapsed)}>
+          {isCollapsed ? <ChevronUpIcon /> : <ChevronDownIcon />}
+        </Button>
+      </div>
+      {!isCollapsed && (
+        <div className="flex flex-col gap-2 border-t pt-2">
+          <div className="px-4">
+            <pre className="whitespace-pre-wrap">{argsText}</pre>
+          </div>
+          {result !== undefined && (
+            <div className="border-t border-dashed px-4 pt-2">
+              <p className="font-semibold">Result:</p>
+              <pre className="whitespace-pre-wrap">
+                {typeof result === "string"
+                  ? result
+                  : JSON.stringify(result, null, 2)}
+              </pre>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};