BYO-UI. No CSS necessary. Inspired by react-table.
const {
getLeftNavProps,
getRightNavProps,
<artifacts_info> | |
The assistant can create and reference artifacts during conversations. Artifacts are for substantial, self-contained content that users might modify or reuse, displayed in a separate UI window for clarity. | |
# Good artifacts are... | |
- Substantial content (>15 lines) | |
- Content that the user is likely to modify, iterate on, or take ownership of | |
- Self-contained, complex content that can be understood on its own, without context from the conversation | |
- Content intended for eventual use outside the conversation (e.g., reports, emails, presentations) | |
- Content likely to be referenced or reused multiple times |
Image.js
from the source below (it is almost a copy of Image.js from tiptap-extensions
except that it has a constructor that accepts uploadFunc
(function to be called with image
being uploaded) and additional logic if(upload) { ... } else { ... previous base64 logic .. }
in the new Plugin
section.import {Node, Plugin} from 'tiptap'
import {nodeInputRule} from 'tiptap-commands'
/**
* Matches following attributes in Markdown-typed image: [, alt, src, title]
*
// JSX Version by Adam Wathan: https://gist.github.com/adamwathan/e0a791aa0419098a7ece70028b2e641e | |
import React, { ReactNode } from "react"; | |
import { CSSTransition as ReactCSSTransition } from "react-transition-group"; | |
import { useRef, useEffect, useContext } from "react"; | |
interface TransitionProps { | |
show?: boolean; | |
enter?: string; | |
enterFrom?: string; |
import * as React from "react"; | |
type ThemeConfig = "system" | "light" | "dark"; | |
type ThemeName = "light" | "dark"; | |
// Custom themes are keyed by a unique id. | |
type KeyedThemes = { | |
[k: string]: { | |
config: ThemeConfig; | |
themeName: ThemeName; | |
}; |
import React, { Component } from "react"; | |
import UserProfileMenu from "./UserProfileMenu"; | |
function classNames(...classes) { return classes.filter(Boolean).join(" "); } | |
class App extends Component { | |
constructor(props) { | |
super(props); | |
this.state = { isToggleOn: false }; | |
} |