Skip to content

Commit

Permalink
Merge pull request #73 from indexnetwork/bugfixes
Browse files Browse the repository at this point in the history 
various bugfixes
  • Loading branch information
@serefyarar
serefyarar authored Apr 3, 2024
2 parents 7964a02 + bea79d2 commit 64cf7ae
Show file tree
Hide file tree
Showing 9 changed files with 251 additions and 79 deletions.
9 changes: 9 additions & 0 deletions web-app/public/images/ic_zapier.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 7 additions & 1 deletion web-app/src/components/ai/chat-message.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,13 @@ export function ChatMessage({
<Col className="idxflex-grow-1 mx-5" style={{ overflow: "auto" }}>
<div style={{ overflowWrap: "break-word" }}>
{editingMessage?.id && index === editingIndex ? (
<Flex alignitems="center" flexdirection="row">
<Flex
alignitems="center"
flexdirection="row"
style={{
marginBottom: "14px",
}}
>
<Input
autoFocus
style={{
Expand Down
131 changes: 74 additions & 57 deletions web-app/src/components/base/Input/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,67 +6,84 @@ import IconVisible from "../Icon/IconVisible";
import IconInvisible from "../Icon/IconInvisible";
import Text from "../Text";

export interface InputProps extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
error?: string;
inputSize?: InputSizeType;
block?: boolean;
ghost?: boolean;
addOnBefore?: React.ReactNode;
addOnAfter?: React.ReactNode;
type?: PropType<React.InputHTMLAttributes<HTMLInputElement>, "type">;
export interface InputProps
extends React.DetailedHTMLProps<
React.InputHTMLAttributes<HTMLInputElement>,
HTMLInputElement
> {
error?: string;
inputSize?: InputSizeType;
block?: boolean;
ghost?: boolean;
addOnBefore?: React.ReactNode;
addOnAfter?: React.ReactNode;
type?: PropType<React.InputHTMLAttributes<HTMLInputElement>, "type">;
}

const Input = (
{
className,
addOnBefore,
addOnAfter,
disabled,
readOnly,
type,
block = true,
inputSize = "md",
ghost = false,
error,
...inputProps
}: InputProps,
) => {
const inputRef = useRef<HTMLInputElement>(null);
const [showPw, setShowPw] = useState(false);
const Input = ({
className,
addOnBefore,
addOnAfter,
disabled,
readOnly,
type,
block = true,
inputSize = "md",
ghost = false,
error,
...inputProps
}: InputProps) => {
const inputRef = useRef<HTMLInputElement>(null);
const [showPw, setShowPw] = useState(false);

const handleTogglePw = () => {
setShowPw((oldVal) => !oldVal);
};
const renderVisible = () => (showPw ? <IconInvisible onClick={handleTogglePw} /> : <IconVisible onClick={handleTogglePw} />);
const handleTogglePw = () => {
setShowPw((oldVal) => !oldVal);
};
const renderVisible = () =>
showPw ? (
<IconInvisible onClick={handleTogglePw} />
) : (
<IconVisible onClick={handleTogglePw} />
);

return (
<>
<Flex className={cc(
[
"input",
`input-${inputSize}`,
ghost ? "input-ghost" : "",
block ? "input-block" : "",
disabled ? "input-disabled" : "",
readOnly ? "input-readonly" : "",
addOnBefore ? "input-add-on-before" : "",
addOnAfter ? "input-add-on-after" : "",
className,
],
)}>
{addOnBefore}
<input
ref={inputRef}
{...inputProps}
disabled={disabled}
readOnly={readOnly}
type={type === "password" && showPw ? "text" : type}
className={"input__input"} />
return (
<>
<Flex
className={cc([
"input",
`input-${inputSize}`,
ghost ? "input-ghost" : "",
block ? "input-block" : "",
disabled ? "input-disabled" : "",
readOnly ? "input-readonly" : "",
addOnBefore ? "input-add-on-before" : "",
addOnAfter ? "input-add-on-after" : "",
className,
])}
>
{addOnBefore}
<input
ref={inputRef}
{...inputProps}
disabled={disabled}
readOnly={readOnly}
type={type === "password" && showPw ? "text" : type}
className={"input__input"}
style={{
fontSize: "1.4rem",
padding: "0",
margin: "0",
}}
/>

{type === "password" ? renderVisible() : addOnAfter}
</Flex>
{error && <Text className={"mt-3"} theme="error" size={inputSize} >{error}</Text>}
</>
);
{type === "password" ? renderVisible() : addOnAfter}
</Flex>
{error && (
<Text className={"mt-3"} theme="error" size={inputSize}>
{error}
</Text>
)}
</>
);
};
export default Input;
2 changes: 1 addition & 1 deletion web-app/src/components/sections/IndexConversation/TabContainer/SettingsTab/SaveYourKey.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const SaveYourKey: FC<SaveYourKeyProps> = ({ secretKey, onDone }) => (
gap: "1.5rem",
}}
>
<h2>Save Your Key</h2>
{/* <h2>Save Your Key</h2> */}
<div
style={{
display: "flex",
Expand Down
18 changes: 17 additions & 1 deletion web-app/src/components/sections/IndexConversation/TabContainer/SettingsTab/SettingsModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,23 @@ const SettingsModal: FC<SettingsModalProps> = ({
return <></>;
}
};
return visible && <Modal visible={visible} body={renderStep()} />;

let header;
if (step === "waiting") {
header = <h2>Waiting for transaction</h2>;
} else if (step === "done") {
header = <h2>Save your key</h2>;
}
return (
visible && (
<Modal
onClose={onCancel}
header={header}
visible={visible}
body={renderStep()}
/>
)
);
};

export default SettingsModal;
4 changes: 2 additions & 2 deletions .../components/sections/IndexConversation/TabContainer/SettingsTab/WaitingForTransaction.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const WaitingForTransaction: FC<WaitingForTransactionProps> = ({
}}
>
<div className="">
<h2>Waiting for transaction</h2>
{/* <h2>Waiting for transaction</h2> */}
<p>
Please wait while the transaction is being processed. This may take a
few minutes.
Expand All @@ -45,7 +45,7 @@ const WaitingForTransaction: FC<WaitingForTransactionProps> = ({
>
<Button
onClick={onCancel}
className="mt-7 pl-8 pr-8 "
className="pl-6 pr-6"
size="lg"
theme="clear"
>
Expand Down
105 changes: 101 additions & 4 deletions web-app/src/components/sections/IndexConversation/TabContainer/SettingsTab/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import Header from "components/base/Header";
import Text from "components/base/Text";
import Col from "components/layout/base/Grid/Col";
import FlexRow from "components/layout/base/Grid/FlexRow";
import Image from "next/image";
import React, { useCallback, useEffect, useMemo, useState } from "react";
import toast from "react-hot-toast";
import SettingsModal, { SettingsModalStep } from "./SettingsModal";
Expand Down Expand Up @@ -128,10 +129,15 @@ const IndexSettingsTabSection: React.FC<IndexSettingsTabSectionProps> = () => {
visible={showModal}
/>
<FlexRow className={"mt-6"}>
<Col xs={12}>
<Header className="mb-4">API Keys</Header>
<Col
xs={12}
style={{
marginBottom: "16px",
}}
>
<Header>API Keys</Header>
</Col>
<Col className="mt-6" xs={8}>
<Col xs={8}>
<div
style={{
display: "flex",
Expand Down Expand Up @@ -182,7 +188,7 @@ const IndexSettingsTabSection: React.FC<IndexSettingsTabSectionProps> = () => {
border: "1px solid #E2E8F0",
color: "#1E293B",
padding: "0.5rem",
borderRadius: "0.125rem",
borderRadius: "2px",
fontWeight: 500,
width: "fit-content",
}}
Expand All @@ -194,6 +200,97 @@ const IndexSettingsTabSection: React.FC<IndexSettingsTabSectionProps> = () => {
</div>
</Col>
</FlexRow>
<FlexRow className="mt-8">
<Col
xs={12}
style={{
marginBottom: "16px",
}}
>
<Header>Integrations</Header>
</Col>

<Col>
<div
style={{
display: "flex",
flexDirection: "column",
gap: "24px",
}}
>
<Text
theme={"primary"}
size="md"
style={{
maxWidth: "80%",
}}
>
You can connect Index Network with lots of popular apps easily.
This lets you make indexing automatic.
</Text>
<div
style={{
display: "flex",
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
gap: "1.2rem",
padding: "16px",
border: "1px solid #E2E8F0",
borderRadius: "4px",
maxWidth: "500px",
}}
>
<Image
alt="Zapier"
src="/images/ic_zapier.svg"
width="40"
height="40"
/>
<div
style={{
display: "flex",
gap: "0.25rem",
flexDirection: "column",
}}
>
<p
style={{
margin: "0",
}}
>
<b>Zapier</b>
</p>
<p
style={{
margin: "0",
color: "#475569",
fontSize: "12px",
}}
>
Create integrations between Index Network and your favorite
apps using Zapier!{" "}
</p>
</div>
<a
style={{
background: "none",
border: "1px solid #E2E8F0",
color: "#1E293B",
padding: "0.5rem",
borderRadius: "2px",
fontWeight: 500,
width: "fit-content",
whiteSpace: "nowrap",
}}
href="https://www.zapier.com"
>
Configure on Zapier
</a>
</div>
</div>
</Col>
</FlexRow>
</>
);
};
Expand Down
31 changes: 20 additions & 11 deletions web-app/src/components/sections/UserConversation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { useRouteParams } from "hooks/useRouteParams";

export default function UserConversationSection() {
const { id } = useRouteParams();
const { chatID, leftSectionIndexes } = useApp();
const { chatID } = useApp();

if (!chatID || !id) {
return null;
Expand All @@ -14,18 +14,27 @@ export default function UserConversationSection() {
<div
style={{
display: "flex",
justifyContent: "stretch",
alignItems: "start",
flex: 1,
overflowY: "auto",
maxHeight: "calc(100dvh - 12em)",
justifyContent: "center",
height: "100%",
}}
>
<AskIndexes
// indexIds={leftSectionIndexes.map((i) => i.id)}
chatID={chatID}
did={id}
/>
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "start",
flex: 1,
overflowY: "auto",
maxHeight: "calc(100dvh - 12em)",
height: "100%",
}}
>
<AskIndexes
// indexIds={leftSectionIndexes.map((i) => i.id)}
chatID={chatID}
did={id}
/>
</div>
</div>
);
}
Loading

0 comments on commit 64cf7ae

Please sign in to comment.