Merge pull request #672 from openchatai/new-chat-handling-logic

new chat handling logic

copilot-widget/index.html

@@ -63,9 +63,9 @@ <h2>
     <div id="opencopilot-root"></div>
 
     <script>
-      const token = "D3BCYwikexJ0hF1Z";
-      const apiUrl = "https://api.opencopilot.so/backend";
-      const socketUrl = "https://api.opencopilot.so";
+      const token = "iPbHD69kEpB8X5jd";
+      const apiUrl = "http://localhost:8888/backend";
+      const socketUrl = "http://localhost:8888";
       const sharedConfig = {
         initialMessage: "Welcome back! How can I help you today?", // optional
         token: token, // required

copilot-widget/lib/@components/Fallback.component.tsx

@@ -0,0 +1,18 @@
+import type { ComponentProps } from "../contexts/componentRegistery";
+
+type Props = ComponentProps<unknown>;
+
+/**
+ * The Basic Text component
+ */
+export function Fallback(props: Props) {
+  return (
+    <div className="space-y-2 flex-1">
+      <div className="w-full max-w-full overflow-auto">
+        <code dir="auto" className="text-xs leading-tight">
+          {JSON.stringify(props, null, 1)}
+        </code>
+      </div>
+    </div>
+  );
+}

copilot-widget/lib/@components/Form.component/index.tsx

@@ -0,0 +1,33 @@
+import validator from "@rjsf/validator-ajv8";
+import Form from "./rjfs";
+import type { ComponentProps } from "../../contexts/componentRegistery";
+
+type Props = ComponentProps<{
+  schema: any;
+  submitUrl: string;
+  method?: "POST" | "GET";
+}>;
+
+/**
+ * The Basic Form component
+ */
+export function FormComponent(props: Props) {
+  const {
+    id,
+    data: { schema, submitUrl, method },
+  } = props;
+  return (
+    <div className="space-y-2 flex-1">
+      <div className="w-full">
+        <div dir="auto" className="bg-accent w-full rounded-lg p-2">
+          <Form
+            action={submitUrl}
+            method={method ?? "POST"}
+            schema={schema}
+            validator={validator}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

copilot-widget/lib/@components/Form.component/rjfs/AddButton.tsx

@@ -0,0 +1,26 @@
+import {
+  FormContextType,
+  IconButtonProps,
+  RJSFSchema,
+  StrictRJSFSchema,
+  TranslatableString,
+} from "@rjsf/utils";
+import { PlusIcon } from "lucide-react";
+
+export default function AddButton<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>({ uiSchema, registry, ...props }: IconButtonProps<T, S, F>) {
+  const { translateString } = registry;
+  return (
+    <button
+      {...props}
+      style={{ width: "100%" }}
+      className={`ml-1 grid justify-items-center bg-blue-500 px-4 py-2 text-base font-normal text-white hover:bg-blue-700 ${props.className}`}
+      title={translateString(TranslatableString.AddItemButton)}
+    >
+      <PlusIcon className="size-5"/>
+    </button>
+  );
+}

copilot-widget/lib/@components/Form.component/rjfs/ArrayFieldItemTemplate.tsx

@@ -0,0 +1,98 @@
+import {
+  ArrayFieldTemplateItemType,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from "@rjsf/utils"
+import { CSSProperties } from "react"
+
+export default function ArrayFieldItemTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: ArrayFieldTemplateItemType<T, S, F>) {
+  const {
+    children,
+    disabled,
+    hasToolbar,
+    hasCopy,
+    hasMoveDown,
+    hasMoveUp,
+    hasRemove,
+    index,
+    onCopyIndexClick,
+    onDropIndexClick,
+    onReorderClick,
+    readonly,
+    registry,
+    uiSchema,
+  } = props
+
+  const { CopyButton, MoveDownButton, MoveUpButton, RemoveButton } =
+    registry.templates.ButtonTemplates
+  const btnStyle: CSSProperties = {
+    flex: 1,
+    paddingLeft: 6,
+    paddingRight: 6,
+    fontWeight: "bold",
+  }
+
+  return (
+    <div>
+      <div className="mb-2 flex items-center">
+        <div className="w-3/4 flex-none lg:w-3/4">{children}</div>
+        <div className="w-1/4 flex-none px-4 py-6 lg:w-1/4">
+          {hasToolbar && (
+            <div className="flex ">
+              {(hasMoveUp || hasMoveDown) && (
+                <div className="m-0 p-0">
+                  <MoveUpButton
+                    className="array-item-move-up"
+                    style={btnStyle}
+                    disabled={disabled || readonly || !hasMoveUp}
+                    onClick={onReorderClick(index, index - 1)}
+                    uiSchema={uiSchema}
+                    registry={registry}
+                  />
+                </div>
+              )}
+              {(hasMoveUp || hasMoveDown) && (
+                <div className="m-0 p-0">
+                  <MoveDownButton
+                    style={btnStyle}
+                    disabled={disabled || readonly || !hasMoveDown}
+                    onClick={onReorderClick(index, index + 1)}
+                    uiSchema={uiSchema}
+                    registry={registry}
+                  />
+                </div>
+              )}
+              {hasCopy && (
+                <div className="m-0 p-0">
+                  <CopyButton
+                    style={btnStyle}
+                    disabled={disabled || readonly}
+                    onClick={onCopyIndexClick(index)}
+                    uiSchema={uiSchema}
+                    registry={registry}
+                  />
+                </div>
+              )}
+              {hasRemove && (
+                <div className="m-0 p-0">
+                  <RemoveButton
+                    style={btnStyle}
+                    disabled={disabled || readonly}
+                    onClick={onDropIndexClick(index)}
+                    uiSchema={uiSchema}
+                    registry={registry}
+                  />
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

copilot-widget/lib/@components/Form.component/rjfs/ArrayFieldTemplate.tsx

@@ -0,0 +1,102 @@
+import {
+  ArrayFieldTemplateItemType,
+  ArrayFieldTemplateProps,
+  FormContextType,
+  getTemplate,
+  getUiOptions,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from "@rjsf/utils"
+
+export default function ArrayFieldTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: ArrayFieldTemplateProps<T, S, F>) {
+  const {
+    canAdd,
+    disabled,
+    idSchema,
+    uiSchema,
+    items,
+    onAddClick,
+    readonly,
+    registry,
+    required,
+    schema,
+    title,
+  } = props
+  const uiOptions = getUiOptions<T, S, F>(uiSchema)
+  const ArrayFieldDescriptionTemplate = getTemplate<
+    "ArrayFieldDescriptionTemplate",
+    T,
+    S,
+    F
+  >("ArrayFieldDescriptionTemplate", registry, uiOptions)
+  const ArrayFieldItemTemplate = getTemplate<"ArrayFieldItemTemplate", T, S, F>(
+    "ArrayFieldItemTemplate",
+    registry,
+    uiOptions,
+  )
+  const ArrayFieldTitleTemplate = getTemplate<
+    "ArrayFieldTitleTemplate",
+    T,
+    S,
+    F
+  >("ArrayFieldTitleTemplate", registry, uiOptions)
+  // Button templates are not overridden in the uiSchema
+  const {
+    ButtonTemplates: { AddButton },
+  } = registry.templates
+
+  return (
+    <div>
+      <div className="m-0 flex p-0">
+        <div className="m-0 w-full p-0">
+          <ArrayFieldTitleTemplate
+            idSchema={idSchema}
+            title={uiOptions.title || title}
+            schema={schema}
+            uiSchema={uiSchema}
+            required={required}
+            registry={registry}
+          />
+          <ArrayFieldDescriptionTemplate
+            idSchema={idSchema}
+            description={uiOptions.description || schema.description}
+            schema={schema}
+            uiSchema={uiSchema}
+            registry={registry}
+          />
+          <div className="m-0 w-full p-0">
+            {items &&
+              items.map(
+                ({
+                  key,
+                  ...itemProps
+                }: ArrayFieldTemplateItemType<T, S, F>) => (
+                  <ArrayFieldItemTemplate key={key} {...itemProps} />
+                ),
+              )}
+            {canAdd && (
+              <div className="">
+                <div className="mt-2 flex">
+                  <div className="w-3/4"></div>
+                  <div className="w-1/4 px-4 py-6">
+                    <AddButton
+                      className="array-item-add"
+                      onClick={onAddClick}
+                      disabled={disabled || readonly}
+                      uiSchema={uiSchema}
+                      registry={registry}
+                    />
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

copilot-widget/lib/@components/Form.component/rjfs/BaseInputTemplate.tsx

@@ -0,0 +1,86 @@
+import cn from "@lib/utils/cn";
+import {
+  ariaDescribedByIds,
+  BaseInputTemplateProps,
+  examplesId,
+  FormContextType,
+  getInputProps,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from "@rjsf/utils";
+import { ChangeEvent, FocusEvent } from "react";
+
+export default function BaseInputTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>({
+  id,
+  placeholder,
+  required,
+  readonly,
+  disabled,
+  type,
+  value,
+  onChange,
+  onChangeOverride,
+  onBlur,
+  onFocus,
+  autofocus,
+  options,
+  schema,
+  rawErrors = [],
+  children,
+  extraProps,
+}: BaseInputTemplateProps<T, S, F>) {
+  const inputProps = {
+    ...extraProps,
+    ...getInputProps<T, S, F>(schema, type, options),
+  };
+  const _onChange = ({ target: { value } }: ChangeEvent<HTMLInputElement>) =>
+    onChange(value === "" ? options.emptyValue : value);
+  const _onBlur = ({ target: { value } }: FocusEvent<HTMLInputElement>) =>
+    onBlur(id, value);
+  const _onFocus = ({ target: { value } }: FocusEvent<HTMLInputElement>) =>
+    onFocus(id, value);
+
+  return (
+    <>
+      <input
+        id={id}
+        name={id}
+        type={type}
+        placeholder={placeholder}
+        autoFocus={autofocus}
+        required={required}
+        disabled={disabled}
+        readOnly={readonly}
+        className={cn(
+          "border rounded-md text-sm p-2 focus:border-primary focus:outline-none w-full bg-background",
+          rawErrors.length > 0 ? "border-red-500" : "border-muted-foreground"
+        )}
+        list={schema.examples ? examplesId<T>(id) : undefined}
+        {...inputProps}
+        value={value || value === 0 ? value : ""}
+        onChange={onChangeOverride || _onChange}
+        onBlur={_onBlur}
+        onFocus={_onFocus}
+        aria-describedby={ariaDescribedByIds<T>(id, !!schema.examples)}
+      />
+      {children}
+      {Array.isArray(schema.examples) ? (
+        <datalist id={examplesId<T>(id)}>
+          {(schema.examples as string[])
+            .concat(
+              schema.default && !schema.examples.includes(schema.default)
+                ? ([schema.default] as string[])
+                : []
+            )
+            .map((example: any) => {
+              return <option key={example} value={example} />;
+            })}
+        </datalist>
+      ) : null}
+    </>
+  );
+}