11 |
12 |
25 |
29 | database.openDashboard()}
32 | placeholder={userEmail}
33 | authorized={authorized}
34 | />
35 |
37 | )
38 | }
39 |
--------------------------------------------------------------------------------
/src/components/ConfirmButton.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react'
2 |
3 | export function ConfirmButton({
4 | onConfirm,
5 | initialText = 'Submit',
6 | confirmText = 'Confirm'
7 | }: {
8 | onConfirm: () => void
9 | initialText?: string
10 | confirmText?: string
11 | }) {
12 | const [confirm, setConfirm] = useState(false)
13 |
14 | useEffect(() => {
15 | if (confirm) {
16 | const timeout = setTimeout(() => {
17 | setConfirm(false)
18 | }, 5000)
19 | return () => clearTimeout(timeout)
20 | }
21 | }, [confirm])
22 |
23 | const handleClick = (e: { preventDefault: () => void }) => {
24 | e.preventDefault()
25 | if (confirm) {
26 | onConfirm()
27 | setConfirm(false)
28 | } else {
29 | setConfirm(true)
30 | }
31 | }
32 |
33 | const baseStyle = `px-4 py-2 m-2 rounded text-white ${confirm ? '' : 'transition duration-500'}`
34 | const initialStyle = 'bg-slate-500 hover:bg-slate-600'
35 | const confirmStyle = 'bg-yellow-500 hover:bg-yellow-600'
36 |
37 | return (
38 |
44 | )
45 | }
46 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "smart-book",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "start": "vite",
9 | "build": "vite build",
10 | "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
11 | "preview": "vite preview"
12 | },
13 | "dependencies": {
14 | "@clerk/backend": "^0.33.0",
15 | "@clerk/clerk-react": "^4.27.2",
16 | "@fireproof/partykit": "^0.14.2",
17 | "@types/react-router-dom": "^5.3.3",
18 | "openai": "^4.15.4",
19 | "partysocket": "0.0.12",
20 | "react": "^18.2.0",
21 | "react-dom": "^18.2.0",
22 | "react-hook-form": "^7.48.2",
23 | "react-router-dom": "^6.17.0",
24 | "use-fireproof": "^0.14.0"
25 | },
26 | "devDependencies": {
27 | "@tailwindcss/typography": "^0.5.10",
28 | "@types/react": "^18.2.28",
29 | "@types/react-dom": "^18.2.13",
30 | "@typescript-eslint/eslint-plugin": "^6.8.0",
31 | "@typescript-eslint/parser": "^6.8.0",
32 | "@vitejs/plugin-react": "^4.1.0",
33 | "autoprefixer": "^10.4.16",
34 | "eslint": "^8.51.0",
35 | "eslint-plugin-react-hooks": "^4.6.0",
36 | "eslint-plugin-react-refresh": "^0.4.3",
37 | "partykit": "0.0.32",
38 | "postcss": "^8.4.31",
39 | "tailwindcss": "^3.3.3",
40 | "typescript": "^5.2.2",
41 | "vite": "^4.4.11"
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
1 | import './App.css'
2 | import React, { useEffect } from 'react'
3 | import { Route, Routes } from 'react-router-dom'
4 | import { Home } from './pages/Home'
5 | import { Profile } from './pages/Profile'
6 | import { Chat } from './pages/Chat'
7 | import { ClerkProvider, SignedIn, SignedOut, RedirectToSignIn } from '@clerk/clerk-react'
8 |
9 | const CLERK_PUBLISHABLE_KEY = import.meta.env.VITE_PUBLIC_CLERK_PUBLISHABLE_KEY
10 |
11 | function Layout({ children }: { children: React.ReactNode }) {
12 | return {children}
13 | }
14 |
15 | function App() {
16 |
17 | const routes = [
18 | { path: '/chat/:id', component: (Login
56 | {
60 | setNewValue(topic?.[field]?.toString() || '')
61 | setIsEditing(true)
62 | }}
63 | >
64 | {children ? children :
66 | )
67 | }
68 |
--------------------------------------------------------------------------------
/party/index.ts:
--------------------------------------------------------------------------------
1 | import type * as Party from 'partykit/server'
2 | import { verifyToken } from "@clerk/backend";
3 |
4 | import { AI } from './ai'
5 |
6 | const DEFAULT_CLERK_ENDPOINT = "https://divine-mule-93.clerk.accounts.dev";
7 |
8 | export default class Server implements Party.Server {
9 | ai: AI
10 |
11 | constructor(readonly party: Party.Party) {
12 | this.ai = new AI(this.party.env['OPEN_AI_API_KEY'] as string)
13 | }
14 |
15 | static async onBeforeConnect(request: Party.Request, lobby: Party.Lobby) {
16 | try {
17 | // get authentication server url from environment variables (optional)
18 | const issuer = lobby.env.CLERK_ENDPOINT || DEFAULT_CLERK_ENDPOINT
19 | // get token from request query string
20 | const token = new URL(request.url).searchParams.get("token") ?? "";
21 | // verify the JWT (in this case using clerk)
22 | const session = await verifyToken(token, { issuer });
23 | // pass any information to the onConnect handler in headers (optional)
24 | request.headers.set("X-User-ID", session.sub);
25 | // forward the request onwards on onConnect
26 | return request;
27 | } catch (e) {
28 | // authentication failed!
29 | // short-circuit the request before it's forwarded to the party
30 | return new Response("Unauthorized", { status: 401 });
31 | }
32 | }
33 |
34 | onConnect(conn: Party.Connection, ctx: Party.ConnectionContext) {
35 | // A websocket just connected!
36 | console.log(
37 | `Connected:
38 | id: ${conn.id}
39 | room: ${this.party.id}
40 | url: ${new URL(ctx.request.url).pathname}`
41 | )
42 |
43 | }
44 |
45 | async onMessage(
46 | message: string //sender: Party.Connection
47 | ) {
48 | // let's log the message
49 | const data = JSON.parse(message)
50 | // console.log('message', message)
51 |
52 | await this.ai.userMessage(data.msg, data.history || [], async data => {
53 | // console.log('data', data._id)
54 | // sender.send(JSON.stringify(data))
55 | this.party.broadcast(JSON.stringify(data))
56 | })
57 | }
58 | }
59 |
60 | Server satisfies Party.Worker
61 |
--------------------------------------------------------------------------------
/src/components/Login.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react'
2 |
3 | export function Login({
4 | onLogin,
5 | placeholder,
6 | authorized,
7 | accountClicked,
8 | }: {
9 | authorized: boolean
10 | placeholder?: string,
11 | accountClicked: () => void,
12 | onLogin: (email: `${string}@${string}`) => void
13 | }) {
14 | const [email, setEmail] = useState<`${string}@${string}`>()
15 | const [didSubmit, setDidSubmit] = useState(false)
16 |
17 | const onSubmit = (event: React.FormEvent{topic?.[field]?.toString()}
} 65 |
27 | {authorized ? (
28 |
34 | ) : didSubmit ? (
35 |
63 | )
64 | }
65 |
--------------------------------------------------------------------------------
/src/components/Topics.tsx:
--------------------------------------------------------------------------------
1 | import { useFireproof } from 'use-fireproof'
2 | import { Link } from 'react-router-dom'
3 | import { TopicDoc } from '../pages/Profile'
4 | import { useState } from 'react'
5 | import { AutoFocusInput } from './AutoFocusInput'
6 |
7 | export function Topics() {
8 | const { database, useLiveQuery } = useFireproof('topics')
9 | const [isCreating, setIsCreating] = useState(false)
10 | const [topicName, setTopicName] = useState('')
11 |
12 | const topics = useLiveQuery(
13 | (doc, emit) => {
14 | if (doc.type === 'topic') {
15 | emit(doc.title)
16 | }
17 | },
18 | { descending: false }
19 | ).docs as TopicDoc[]
20 |
21 | const handleCreateClick = async () => {
22 | const topicDoc: TopicDoc = {
23 | type: 'topic',
24 | title: topicName,
25 | created: Date.now(),
26 | updated: Date.now()
27 | }
28 | await database.put(topicDoc)
29 | setIsCreating(false)
30 | setTopicName('')
31 | }
32 | return (
33 | 36 | Please check your email at {email} for a verification 37 | message from web3.storage. If you are logging into an existing account, please log in on 38 | your original device as well, to allow account certification. This process can take up to 39 | a minute, make a tea (or{' '} 40 | add websockets here). 41 |
42 | ) : ( 43 | <> 44 |Login to save:
45 | 60 | 61 | )} 62 |
34 |
77 | )
78 | }
79 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Starter Kit: Fireproof + React + TypeScript + Vite
2 |
3 | This template provides a ready-to-go setup to start building useful apps with Fireproof, React, and Vite.
4 |
5 | Develop with `npm start` and build with `npm run build`. It should be able to deploy to any static host.
6 |
7 | Topics
35 |-
36 |
- 37 | {isCreating ? ( 38 | 55 | ) : ( 56 | <> 57 | + 58 | setIsCreating(true)} className="inline-block ml-2"> 59 | Create new topic 60 | 61 | 62 | )} 63 | 64 | {topics.map(doc => ( 65 |
- 66 | 70 | {doc.title} 71 | {new Date(doc.updated).toLocaleString()} 72 | 73 | 74 | ))} 75 |
46 |
89 | )
90 | }
91 |
--------------------------------------------------------------------------------
/party/ai.ts:
--------------------------------------------------------------------------------
1 | import OpenAI from 'openai'
2 |
3 | type MsgData = {
4 | _id: string
5 | msgId?: string
6 | img?: string
7 | prompt?: string
8 | msg?: string
9 | done?: boolean
10 | sent: number
11 | }
12 |
13 | type History = { msg: string; role: string }[]
14 |
15 | export class AI {
16 | openai: OpenAI
17 | constructor(apiKey: string) {
18 | this.openai = new OpenAI({ apiKey, organization: 'org-Ke48QiDoEsESbWg4SZjQQx1e' })
19 | }
20 |
21 | async userMessage(message: string, history: History, callback: (data: MsgData) => PromiseItems
47 |-
48 |
- 49 | {isCreating ? ( 50 | 67 | ) : ( 68 | <> 69 | + 70 | setIsCreating(true)} className="inline-block ml-2"> 71 | Create new item 72 | 73 | 74 | )} 75 | 76 | {items.map(doc => ( 77 |
- 78 | 82 | {doc.name} 83 | 84 | {new Date(doc.updated).toLocaleString()} 85 | 86 | ))} 87 |
16 | {imgSrc && 
}
17 | {imgFile &&
20 | )
21 | }
22 | type ImageCircleProps = {
23 | imgSrc?: string
24 | imgFile?: DocFileMeta
25 | alt?: string
26 | }
27 |
28 | export const ImageCircle: React.FC📷
}
19 |
35 | {imgSrc && }
36 | {imgFile &&
38 | )
39 | }
40 |
41 | type ChatBubbleProps = {
42 | message: string
43 | when?: string
44 | imgSrc?: string
45 | imgFile?: DocFileMeta
46 | }
47 | export const ChatBubble: React.FC
50 |
58 | )
59 | }
60 | type UserBubbleProps = {
61 | message: string
62 | when?: string
63 | imgSrc?: string
64 | imgFile?: DocFileMeta
65 | }
66 | export const UserBubble: React.FC
52 |
57 |
53 |
55 | {when}
56 | {message}
54 |
69 |
77 | )
78 | }
79 | function ImgFile({
80 | meta,
81 | alt,
82 | className
83 | }: {
84 | alt: string
85 | meta: DocFileMeta
86 | className?: string
87 | cache?: boolean
88 | }) {
89 | const [imgDataUrl, setImgDataUrl] = useState('')
90 |
91 | useEffect(() => {
92 | if (meta.file && /image/.test(meta.type)) {
93 | meta.file().then(file => {
94 | const src = URL.createObjectURL(file)
95 | setImgDataUrl(src)
96 | return () => {
97 | URL.revokeObjectURL(src)
98 | }
99 | })
100 | }
101 | }, [meta])
102 |
103 | if (imgDataUrl) {
104 | return
70 |
75 |
76 |
71 |
73 | {when}
74 | {message}
72 |
141 |
143 | Cat Chat
142 |
147 | {rmessages.map((message: MsgDoc) => {
148 | // console.log('message', message)
149 | if (message.role === 'user') {
150 | return (
151 |
183 |
184 |
185 |
200 |
201 |
202 | )
203 | }
204 |
--------------------------------------------------------------------------------