mirror of
https://github.com/deiucanta/chatpad.git
synced 2026-03-11 09:04:31 +00:00
launch
This commit is contained in:
Andrei Canta
commit
6830e88843
35 changed files with 14538 additions and 0 deletions
4
.gitignore
vendored
Normal file
4
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
/node_modules
|
||||
/.parcel-cache
|
||||
/dist
|
||||
notes.txt
|
||||
661
LICENSE
Normal file
661
LICENSE
Normal file
|
|
@ -0,0 +1,661 @@
|
|||
GNU AFFERO GENERAL PUBLIC LICENSE
|
||||
Version 3, 19 November 2007
|
||||
|
||||
Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
|
||||
Everyone is permitted to copy and distribute verbatim copies
|
||||
of this license document, but changing it is not allowed.
|
||||
|
||||
Preamble
|
||||
|
||||
The GNU Affero General Public License is a free, copyleft license for
|
||||
software and other kinds of works, specifically designed to ensure
|
||||
cooperation with the community in the case of network server software.
|
||||
|
||||
The licenses for most software and other practical works are designed
|
||||
to take away your freedom to share and change the works. By contrast,
|
||||
our General Public Licenses are intended to guarantee your freedom to
|
||||
share and change all versions of a program--to make sure it remains free
|
||||
software for all its users.
|
||||
|
||||
When we speak of free software, we are referring to freedom, not
|
||||
price. Our General Public Licenses are designed to make sure that you
|
||||
have the freedom to distribute copies of free software (and charge for
|
||||
them if you wish), that you receive source code or can get it if you
|
||||
want it, that you can change the software or use pieces of it in new
|
||||
free programs, and that you know you can do these things.
|
||||
|
||||
Developers that use our General Public Licenses protect your rights
|
||||
with two steps: (1) assert copyright on the software, and (2) offer
|
||||
you this License which gives you legal permission to copy, distribute
|
||||
and/or modify the software.
|
||||
|
||||
A secondary benefit of defending all users' freedom is that
|
||||
improvements made in alternate versions of the program, if they
|
||||
receive widespread use, become available for other developers to
|
||||
incorporate. Many developers of free software are heartened and
|
||||
encouraged by the resulting cooperation. However, in the case of
|
||||
software used on network servers, this result may fail to come about.
|
||||
The GNU General Public License permits making a modified version and
|
||||
letting the public access it on a server without ever releasing its
|
||||
source code to the public.
|
||||
|
||||
The GNU Affero General Public License is designed specifically to
|
||||
ensure that, in such cases, the modified source code becomes available
|
||||
to the community. It requires the operator of a network server to
|
||||
provide the source code of the modified version running there to the
|
||||
users of that server. Therefore, public use of a modified version, on
|
||||
a publicly accessible server, gives the public access to the source
|
||||
code of the modified version.
|
||||
|
||||
An older license, called the Affero General Public License and
|
||||
published by Affero, was designed to accomplish similar goals. This is
|
||||
a different license, not a version of the Affero GPL, but Affero has
|
||||
released a new version of the Affero GPL which permits relicensing under
|
||||
this license.
|
||||
|
||||
The precise terms and conditions for copying, distribution and
|
||||
modification follow.
|
||||
|
||||
TERMS AND CONDITIONS
|
||||
|
||||
0. Definitions.
|
||||
|
||||
"This License" refers to version 3 of the GNU Affero General Public License.
|
||||
|
||||
"Copyright" also means copyright-like laws that apply to other kinds of
|
||||
works, such as semiconductor masks.
|
||||
|
||||
"The Program" refers to any copyrightable work licensed under this
|
||||
License. Each licensee is addressed as "you". "Licensees" and
|
||||
"recipients" may be individuals or organizations.
|
||||
|
||||
To "modify" a work means to copy from or adapt all or part of the work
|
||||
in a fashion requiring copyright permission, other than the making of an
|
||||
exact copy. The resulting work is called a "modified version" of the
|
||||
earlier work or a work "based on" the earlier work.
|
||||
|
||||
A "covered work" means either the unmodified Program or a work based
|
||||
on the Program.
|
||||
|
||||
To "propagate" a work means to do anything with it that, without
|
||||
permission, would make you directly or secondarily liable for
|
||||
infringement under applicable copyright law, except executing it on a
|
||||
computer or modifying a private copy. Propagation includes copying,
|
||||
distribution (with or without modification), making available to the
|
||||
public, and in some countries other activities as well.
|
||||
|
||||
To "convey" a work means any kind of propagation that enables other
|
||||
parties to make or receive copies. Mere interaction with a user through
|
||||
a computer network, with no transfer of a copy, is not conveying.
|
||||
|
||||
An interactive user interface displays "Appropriate Legal Notices"
|
||||
to the extent that it includes a convenient and prominently visible
|
||||
feature that (1) displays an appropriate copyright notice, and (2)
|
||||
tells the user that there is no warranty for the work (except to the
|
||||
extent that warranties are provided), that licensees may convey the
|
||||
work under this License, and how to view a copy of this License. If
|
||||
the interface presents a list of user commands or options, such as a
|
||||
menu, a prominent item in the list meets this criterion.
|
||||
|
||||
1. Source Code.
|
||||
|
||||
The "source code" for a work means the preferred form of the work
|
||||
for making modifications to it. "Object code" means any non-source
|
||||
form of a work.
|
||||
|
||||
A "Standard Interface" means an interface that either is an official
|
||||
standard defined by a recognized standards body, or, in the case of
|
||||
interfaces specified for a particular programming language, one that
|
||||
is widely used among developers working in that language.
|
||||
|
||||
The "System Libraries" of an executable work include anything, other
|
||||
than the work as a whole, that (a) is included in the normal form of
|
||||
packaging a Major Component, but which is not part of that Major
|
||||
Component, and (b) serves only to enable use of the work with that
|
||||
Major Component, or to implement a Standard Interface for which an
|
||||
implementation is available to the public in source code form. A
|
||||
"Major Component", in this context, means a major essential component
|
||||
(kernel, window system, and so on) of the specific operating system
|
||||
(if any) on which the executable work runs, or a compiler used to
|
||||
produce the work, or an object code interpreter used to run it.
|
||||
|
||||
The "Corresponding Source" for a work in object code form means all
|
||||
the source code needed to generate, install, and (for an executable
|
||||
work) run the object code and to modify the work, including scripts to
|
||||
control those activities. However, it does not include the work's
|
||||
System Libraries, or general-purpose tools or generally available free
|
||||
programs which are used unmodified in performing those activities but
|
||||
which are not part of the work. For example, Corresponding Source
|
||||
includes interface definition files associated with source files for
|
||||
the work, and the source code for shared libraries and dynamically
|
||||
linked subprograms that the work is specifically designed to require,
|
||||
such as by intimate data communication or control flow between those
|
||||
subprograms and other parts of the work.
|
||||
|
||||
The Corresponding Source need not include anything that users
|
||||
can regenerate automatically from other parts of the Corresponding
|
||||
Source.
|
||||
|
||||
The Corresponding Source for a work in source code form is that
|
||||
same work.
|
||||
|
||||
2. Basic Permissions.
|
||||
|
||||
All rights granted under this License are granted for the term of
|
||||
copyright on the Program, and are irrevocable provided the stated
|
||||
conditions are met. This License explicitly affirms your unlimited
|
||||
permission to run the unmodified Program. The output from running a
|
||||
covered work is covered by this License only if the output, given its
|
||||
content, constitutes a covered work. This License acknowledges your
|
||||
rights of fair use or other equivalent, as provided by copyright law.
|
||||
|
||||
You may make, run and propagate covered works that you do not
|
||||
convey, without conditions so long as your license otherwise remains
|
||||
in force. You may convey covered works to others for the sole purpose
|
||||
of having them make modifications exclusively for you, or provide you
|
||||
with facilities for running those works, provided that you comply with
|
||||
the terms of this License in conveying all material for which you do
|
||||
not control copyright. Those thus making or running the covered works
|
||||
for you must do so exclusively on your behalf, under your direction
|
||||
and control, on terms that prohibit them from making any copies of
|
||||
your copyrighted material outside their relationship with you.
|
||||
|
||||
Conveying under any other circumstances is permitted solely under
|
||||
the conditions stated below. Sublicensing is not allowed; section 10
|
||||
makes it unnecessary.
|
||||
|
||||
3. Protecting Users' Legal Rights From Anti-Circumvention Law.
|
||||
|
||||
No covered work shall be deemed part of an effective technological
|
||||
measure under any applicable law fulfilling obligations under article
|
||||
11 of the WIPO copyright treaty adopted on 20 December 1996, or
|
||||
similar laws prohibiting or restricting circumvention of such
|
||||
measures.
|
||||
|
||||
When you convey a covered work, you waive any legal power to forbid
|
||||
circumvention of technological measures to the extent such circumvention
|
||||
is effected by exercising rights under this License with respect to
|
||||
the covered work, and you disclaim any intention to limit operation or
|
||||
modification of the work as a means of enforcing, against the work's
|
||||
users, your or third parties' legal rights to forbid circumvention of
|
||||
technological measures.
|
||||
|
||||
4. Conveying Verbatim Copies.
|
||||
|
||||
You may convey verbatim copies of the Program's source code as you
|
||||
receive it, in any medium, provided that you conspicuously and
|
||||
appropriately publish on each copy an appropriate copyright notice;
|
||||
keep intact all notices stating that this License and any
|
||||
non-permissive terms added in accord with section 7 apply to the code;
|
||||
keep intact all notices of the absence of any warranty; and give all
|
||||
recipients a copy of this License along with the Program.
|
||||
|
||||
You may charge any price or no price for each copy that you convey,
|
||||
and you may offer support or warranty protection for a fee.
|
||||
|
||||
5. Conveying Modified Source Versions.
|
||||
|
||||
You may convey a work based on the Program, or the modifications to
|
||||
produce it from the Program, in the form of source code under the
|
||||
terms of section 4, provided that you also meet all of these conditions:
|
||||
|
||||
a) The work must carry prominent notices stating that you modified
|
||||
it, and giving a relevant date.
|
||||
|
||||
b) The work must carry prominent notices stating that it is
|
||||
released under this License and any conditions added under section
|
||||
7. This requirement modifies the requirement in section 4 to
|
||||
"keep intact all notices".
|
||||
|
||||
c) You must license the entire work, as a whole, under this
|
||||
License to anyone who comes into possession of a copy. This
|
||||
License will therefore apply, along with any applicable section 7
|
||||
additional terms, to the whole of the work, and all its parts,
|
||||
regardless of how they are packaged. This License gives no
|
||||
permission to license the work in any other way, but it does not
|
||||
invalidate such permission if you have separately received it.
|
||||
|
||||
d) If the work has interactive user interfaces, each must display
|
||||
Appropriate Legal Notices; however, if the Program has interactive
|
||||
interfaces that do not display Appropriate Legal Notices, your
|
||||
work need not make them do so.
|
||||
|
||||
A compilation of a covered work with other separate and independent
|
||||
works, which are not by their nature extensions of the covered work,
|
||||
and which are not combined with it such as to form a larger program,
|
||||
in or on a volume of a storage or distribution medium, is called an
|
||||
"aggregate" if the compilation and its resulting copyright are not
|
||||
used to limit the access or legal rights of the compilation's users
|
||||
beyond what the individual works permit. Inclusion of a covered work
|
||||
in an aggregate does not cause this License to apply to the other
|
||||
parts of the aggregate.
|
||||
|
||||
6. Conveying Non-Source Forms.
|
||||
|
||||
You may convey a covered work in object code form under the terms
|
||||
of sections 4 and 5, provided that you also convey the
|
||||
machine-readable Corresponding Source under the terms of this License,
|
||||
in one of these ways:
|
||||
|
||||
a) Convey the object code in, or embodied in, a physical product
|
||||
(including a physical distribution medium), accompanied by the
|
||||
Corresponding Source fixed on a durable physical medium
|
||||
customarily used for software interchange.
|
||||
|
||||
b) Convey the object code in, or embodied in, a physical product
|
||||
(including a physical distribution medium), accompanied by a
|
||||
written offer, valid for at least three years and valid for as
|
||||
long as you offer spare parts or customer support for that product
|
||||
model, to give anyone who possesses the object code either (1) a
|
||||
copy of the Corresponding Source for all the software in the
|
||||
product that is covered by this License, on a durable physical
|
||||
medium customarily used for software interchange, for a price no
|
||||
more than your reasonable cost of physically performing this
|
||||
conveying of source, or (2) access to copy the
|
||||
Corresponding Source from a network server at no charge.
|
||||
|
||||
c) Convey individual copies of the object code with a copy of the
|
||||
written offer to provide the Corresponding Source. This
|
||||
alternative is allowed only occasionally and noncommercially, and
|
||||
only if you received the object code with such an offer, in accord
|
||||
with subsection 6b.
|
||||
|
||||
d) Convey the object code by offering access from a designated
|
||||
place (gratis or for a charge), and offer equivalent access to the
|
||||
Corresponding Source in the same way through the same place at no
|
||||
further charge. You need not require recipients to copy the
|
||||
Corresponding Source along with the object code. If the place to
|
||||
copy the object code is a network server, the Corresponding Source
|
||||
may be on a different server (operated by you or a third party)
|
||||
that supports equivalent copying facilities, provided you maintain
|
||||
clear directions next to the object code saying where to find the
|
||||
Corresponding Source. Regardless of what server hosts the
|
||||
Corresponding Source, you remain obligated to ensure that it is
|
||||
available for as long as needed to satisfy these requirements.
|
||||
|
||||
e) Convey the object code using peer-to-peer transmission, provided
|
||||
you inform other peers where the object code and Corresponding
|
||||
Source of the work are being offered to the general public at no
|
||||
charge under subsection 6d.
|
||||
|
||||
A separable portion of the object code, whose source code is excluded
|
||||
from the Corresponding Source as a System Library, need not be
|
||||
included in conveying the object code work.
|
||||
|
||||
A "User Product" is either (1) a "consumer product", which means any
|
||||
tangible personal property which is normally used for personal, family,
|
||||
or household purposes, or (2) anything designed or sold for incorporation
|
||||
into a dwelling. In determining whether a product is a consumer product,
|
||||
doubtful cases shall be resolved in favor of coverage. For a particular
|
||||
product received by a particular user, "normally used" refers to a
|
||||
typical or common use of that class of product, regardless of the status
|
||||
of the particular user or of the way in which the particular user
|
||||
actually uses, or expects or is expected to use, the product. A product
|
||||
is a consumer product regardless of whether the product has substantial
|
||||
commercial, industrial or non-consumer uses, unless such uses represent
|
||||
the only significant mode of use of the product.
|
||||
|
||||
"Installation Information" for a User Product means any methods,
|
||||
procedures, authorization keys, or other information required to install
|
||||
and execute modified versions of a covered work in that User Product from
|
||||
a modified version of its Corresponding Source. The information must
|
||||
suffice to ensure that the continued functioning of the modified object
|
||||
code is in no case prevented or interfered with solely because
|
||||
modification has been made.
|
||||
|
||||
If you convey an object code work under this section in, or with, or
|
||||
specifically for use in, a User Product, and the conveying occurs as
|
||||
part of a transaction in which the right of possession and use of the
|
||||
User Product is transferred to the recipient in perpetuity or for a
|
||||
fixed term (regardless of how the transaction is characterized), the
|
||||
Corresponding Source conveyed under this section must be accompanied
|
||||
by the Installation Information. But this requirement does not apply
|
||||
if neither you nor any third party retains the ability to install
|
||||
modified object code on the User Product (for example, the work has
|
||||
been installed in ROM).
|
||||
|
||||
The requirement to provide Installation Information does not include a
|
||||
requirement to continue to provide support service, warranty, or updates
|
||||
for a work that has been modified or installed by the recipient, or for
|
||||
the User Product in which it has been modified or installed. Access to a
|
||||
network may be denied when the modification itself materially and
|
||||
adversely affects the operation of the network or violates the rules and
|
||||
protocols for communication across the network.
|
||||
|
||||
Corresponding Source conveyed, and Installation Information provided,
|
||||
in accord with this section must be in a format that is publicly
|
||||
documented (and with an implementation available to the public in
|
||||
source code form), and must require no special password or key for
|
||||
unpacking, reading or copying.
|
||||
|
||||
7. Additional Terms.
|
||||
|
||||
"Additional permissions" are terms that supplement the terms of this
|
||||
License by making exceptions from one or more of its conditions.
|
||||
Additional permissions that are applicable to the entire Program shall
|
||||
be treated as though they were included in this License, to the extent
|
||||
that they are valid under applicable law. If additional permissions
|
||||
apply only to part of the Program, that part may be used separately
|
||||
under those permissions, but the entire Program remains governed by
|
||||
this License without regard to the additional permissions.
|
||||
|
||||
When you convey a copy of a covered work, you may at your option
|
||||
remove any additional permissions from that copy, or from any part of
|
||||
it. (Additional permissions may be written to require their own
|
||||
removal in certain cases when you modify the work.) You may place
|
||||
additional permissions on material, added by you to a covered work,
|
||||
for which you have or can give appropriate copyright permission.
|
||||
|
||||
Notwithstanding any other provision of this License, for material you
|
||||
add to a covered work, you may (if authorized by the copyright holders of
|
||||
that material) supplement the terms of this License with terms:
|
||||
|
||||
a) Disclaiming warranty or limiting liability differently from the
|
||||
terms of sections 15 and 16 of this License; or
|
||||
|
||||
b) Requiring preservation of specified reasonable legal notices or
|
||||
author attributions in that material or in the Appropriate Legal
|
||||
Notices displayed by works containing it; or
|
||||
|
||||
c) Prohibiting misrepresentation of the origin of that material, or
|
||||
requiring that modified versions of such material be marked in
|
||||
reasonable ways as different from the original version; or
|
||||
|
||||
d) Limiting the use for publicity purposes of names of licensors or
|
||||
authors of the material; or
|
||||
|
||||
e) Declining to grant rights under trademark law for use of some
|
||||
trade names, trademarks, or service marks; or
|
||||
|
||||
f) Requiring indemnification of licensors and authors of that
|
||||
material by anyone who conveys the material (or modified versions of
|
||||
it) with contractual assumptions of liability to the recipient, for
|
||||
any liability that these contractual assumptions directly impose on
|
||||
those licensors and authors.
|
||||
|
||||
All other non-permissive additional terms are considered "further
|
||||
restrictions" within the meaning of section 10. If the Program as you
|
||||
received it, or any part of it, contains a notice stating that it is
|
||||
governed by this License along with a term that is a further
|
||||
restriction, you may remove that term. If a license document contains
|
||||
a further restriction but permits relicensing or conveying under this
|
||||
License, you may add to a covered work material governed by the terms
|
||||
of that license document, provided that the further restriction does
|
||||
not survive such relicensing or conveying.
|
||||
|
||||
If you add terms to a covered work in accord with this section, you
|
||||
must place, in the relevant source files, a statement of the
|
||||
additional terms that apply to those files, or a notice indicating
|
||||
where to find the applicable terms.
|
||||
|
||||
Additional terms, permissive or non-permissive, may be stated in the
|
||||
form of a separately written license, or stated as exceptions;
|
||||
the above requirements apply either way.
|
||||
|
||||
8. Termination.
|
||||
|
||||
You may not propagate or modify a covered work except as expressly
|
||||
provided under this License. Any attempt otherwise to propagate or
|
||||
modify it is void, and will automatically terminate your rights under
|
||||
this License (including any patent licenses granted under the third
|
||||
paragraph of section 11).
|
||||
|
||||
However, if you cease all violation of this License, then your
|
||||
license from a particular copyright holder is reinstated (a)
|
||||
provisionally, unless and until the copyright holder explicitly and
|
||||
finally terminates your license, and (b) permanently, if the copyright
|
||||
holder fails to notify you of the violation by some reasonable means
|
||||
prior to 60 days after the cessation.
|
||||
|
||||
Moreover, your license from a particular copyright holder is
|
||||
reinstated permanently if the copyright holder notifies you of the
|
||||
violation by some reasonable means, this is the first time you have
|
||||
received notice of violation of this License (for any work) from that
|
||||
copyright holder, and you cure the violation prior to 30 days after
|
||||
your receipt of the notice.
|
||||
|
||||
Termination of your rights under this section does not terminate the
|
||||
licenses of parties who have received copies or rights from you under
|
||||
this License. If your rights have been terminated and not permanently
|
||||
reinstated, you do not qualify to receive new licenses for the same
|
||||
material under section 10.
|
||||
|
||||
9. Acceptance Not Required for Having Copies.
|
||||
|
||||
You are not required to accept this License in order to receive or
|
||||
run a copy of the Program. Ancillary propagation of a covered work
|
||||
occurring solely as a consequence of using peer-to-peer transmission
|
||||
to receive a copy likewise does not require acceptance. However,
|
||||
nothing other than this License grants you permission to propagate or
|
||||
modify any covered work. These actions infringe copyright if you do
|
||||
not accept this License. Therefore, by modifying or propagating a
|
||||
covered work, you indicate your acceptance of this License to do so.
|
||||
|
||||
10. Automatic Licensing of Downstream Recipients.
|
||||
|
||||
Each time you convey a covered work, the recipient automatically
|
||||
receives a license from the original licensors, to run, modify and
|
||||
propagate that work, subject to this License. You are not responsible
|
||||
for enforcing compliance by third parties with this License.
|
||||
|
||||
An "entity transaction" is a transaction transferring control of an
|
||||
organization, or substantially all assets of one, or subdividing an
|
||||
organization, or merging organizations. If propagation of a covered
|
||||
work results from an entity transaction, each party to that
|
||||
transaction who receives a copy of the work also receives whatever
|
||||
licenses to the work the party's predecessor in interest had or could
|
||||
give under the previous paragraph, plus a right to possession of the
|
||||
Corresponding Source of the work from the predecessor in interest, if
|
||||
the predecessor has it or can get it with reasonable efforts.
|
||||
|
||||
You may not impose any further restrictions on the exercise of the
|
||||
rights granted or affirmed under this License. For example, you may
|
||||
not impose a license fee, royalty, or other charge for exercise of
|
||||
rights granted under this License, and you may not initiate litigation
|
||||
(including a cross-claim or counterclaim in a lawsuit) alleging that
|
||||
any patent claim is infringed by making, using, selling, offering for
|
||||
sale, or importing the Program or any portion of it.
|
||||
|
||||
11. Patents.
|
||||
|
||||
A "contributor" is a copyright holder who authorizes use under this
|
||||
License of the Program or a work on which the Program is based. The
|
||||
work thus licensed is called the contributor's "contributor version".
|
||||
|
||||
A contributor's "essential patent claims" are all patent claims
|
||||
owned or controlled by the contributor, whether already acquired or
|
||||
hereafter acquired, that would be infringed by some manner, permitted
|
||||
by this License, of making, using, or selling its contributor version,
|
||||
but do not include claims that would be infringed only as a
|
||||
consequence of further modification of the contributor version. For
|
||||
purposes of this definition, "control" includes the right to grant
|
||||
patent sublicenses in a manner consistent with the requirements of
|
||||
this License.
|
||||
|
||||
Each contributor grants you a non-exclusive, worldwide, royalty-free
|
||||
patent license under the contributor's essential patent claims, to
|
||||
make, use, sell, offer for sale, import and otherwise run, modify and
|
||||
propagate the contents of its contributor version.
|
||||
|
||||
In the following three paragraphs, a "patent license" is any express
|
||||
agreement or commitment, however denominated, not to enforce a patent
|
||||
(such as an express permission to practice a patent or covenant not to
|
||||
sue for patent infringement). To "grant" such a patent license to a
|
||||
party means to make such an agreement or commitment not to enforce a
|
||||
patent against the party.
|
||||
|
||||
If you convey a covered work, knowingly relying on a patent license,
|
||||
and the Corresponding Source of the work is not available for anyone
|
||||
to copy, free of charge and under the terms of this License, through a
|
||||
publicly available network server or other readily accessible means,
|
||||
then you must either (1) cause the Corresponding Source to be so
|
||||
available, or (2) arrange to deprive yourself of the benefit of the
|
||||
patent license for this particular work, or (3) arrange, in a manner
|
||||
consistent with the requirements of this License, to extend the patent
|
||||
license to downstream recipients. "Knowingly relying" means you have
|
||||
actual knowledge that, but for the patent license, your conveying the
|
||||
covered work in a country, or your recipient's use of the covered work
|
||||
in a country, would infringe one or more identifiable patents in that
|
||||
country that you have reason to believe are valid.
|
||||
|
||||
If, pursuant to or in connection with a single transaction or
|
||||
arrangement, you convey, or propagate by procuring conveyance of, a
|
||||
covered work, and grant a patent license to some of the parties
|
||||
receiving the covered work authorizing them to use, propagate, modify
|
||||
or convey a specific copy of the covered work, then the patent license
|
||||
you grant is automatically extended to all recipients of the covered
|
||||
work and works based on it.
|
||||
|
||||
A patent license is "discriminatory" if it does not include within
|
||||
the scope of its coverage, prohibits the exercise of, or is
|
||||
conditioned on the non-exercise of one or more of the rights that are
|
||||
specifically granted under this License. You may not convey a covered
|
||||
work if you are a party to an arrangement with a third party that is
|
||||
in the business of distributing software, under which you make payment
|
||||
to the third party based on the extent of your activity of conveying
|
||||
the work, and under which the third party grants, to any of the
|
||||
parties who would receive the covered work from you, a discriminatory
|
||||
patent license (a) in connection with copies of the covered work
|
||||
conveyed by you (or copies made from those copies), or (b) primarily
|
||||
for and in connection with specific products or compilations that
|
||||
contain the covered work, unless you entered into that arrangement,
|
||||
or that patent license was granted, prior to 28 March 2007.
|
||||
|
||||
Nothing in this License shall be construed as excluding or limiting
|
||||
any implied license or other defenses to infringement that may
|
||||
otherwise be available to you under applicable patent law.
|
||||
|
||||
12. No Surrender of Others' Freedom.
|
||||
|
||||
If conditions are imposed on you (whether by court order, agreement or
|
||||
otherwise) that contradict the conditions of this License, they do not
|
||||
excuse you from the conditions of this License. If you cannot convey a
|
||||
covered work so as to satisfy simultaneously your obligations under this
|
||||
License and any other pertinent obligations, then as a consequence you may
|
||||
not convey it at all. For example, if you agree to terms that obligate you
|
||||
to collect a royalty for further conveying from those to whom you convey
|
||||
the Program, the only way you could satisfy both those terms and this
|
||||
License would be to refrain entirely from conveying the Program.
|
||||
|
||||
13. Remote Network Interaction; Use with the GNU General Public License.
|
||||
|
||||
Notwithstanding any other provision of this License, if you modify the
|
||||
Program, your modified version must prominently offer all users
|
||||
interacting with it remotely through a computer network (if your version
|
||||
supports such interaction) an opportunity to receive the Corresponding
|
||||
Source of your version by providing access to the Corresponding Source
|
||||
from a network server at no charge, through some standard or customary
|
||||
means of facilitating copying of software. This Corresponding Source
|
||||
shall include the Corresponding Source for any work covered by version 3
|
||||
of the GNU General Public License that is incorporated pursuant to the
|
||||
following paragraph.
|
||||
|
||||
Notwithstanding any other provision of this License, you have
|
||||
permission to link or combine any covered work with a work licensed
|
||||
under version 3 of the GNU General Public License into a single
|
||||
combined work, and to convey the resulting work. The terms of this
|
||||
License will continue to apply to the part which is the covered work,
|
||||
but the work with which it is combined will remain governed by version
|
||||
3 of the GNU General Public License.
|
||||
|
||||
14. Revised Versions of this License.
|
||||
|
||||
The Free Software Foundation may publish revised and/or new versions of
|
||||
the GNU Affero General Public License from time to time. Such new versions
|
||||
will be similar in spirit to the present version, but may differ in detail to
|
||||
address new problems or concerns.
|
||||
|
||||
Each version is given a distinguishing version number. If the
|
||||
Program specifies that a certain numbered version of the GNU Affero General
|
||||
Public License "or any later version" applies to it, you have the
|
||||
option of following the terms and conditions either of that numbered
|
||||
version or of any later version published by the Free Software
|
||||
Foundation. If the Program does not specify a version number of the
|
||||
GNU Affero General Public License, you may choose any version ever published
|
||||
by the Free Software Foundation.
|
||||
|
||||
If the Program specifies that a proxy can decide which future
|
||||
versions of the GNU Affero General Public License can be used, that proxy's
|
||||
public statement of acceptance of a version permanently authorizes you
|
||||
to choose that version for the Program.
|
||||
|
||||
Later license versions may give you additional or different
|
||||
permissions. However, no additional obligations are imposed on any
|
||||
author or copyright holder as a result of your choosing to follow a
|
||||
later version.
|
||||
|
||||
15. Disclaimer of Warranty.
|
||||
|
||||
THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
|
||||
APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
|
||||
HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
|
||||
OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
|
||||
THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
|
||||
PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
|
||||
IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
|
||||
ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
|
||||
|
||||
16. Limitation of Liability.
|
||||
|
||||
IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
|
||||
WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
|
||||
THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
|
||||
GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
|
||||
USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
|
||||
DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
|
||||
PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
|
||||
EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
|
||||
SUCH DAMAGES.
|
||||
|
||||
17. Interpretation of Sections 15 and 16.
|
||||
|
||||
If the disclaimer of warranty and limitation of liability provided
|
||||
above cannot be given local legal effect according to their terms,
|
||||
reviewing courts shall apply local law that most closely approximates
|
||||
an absolute waiver of all civil liability in connection with the
|
||||
Program, unless a warranty or assumption of liability accompanies a
|
||||
copy of the Program in return for a fee.
|
||||
|
||||
END OF TERMS AND CONDITIONS
|
||||
|
||||
How to Apply These Terms to Your New Programs
|
||||
|
||||
If you develop a new program, and you want it to be of the greatest
|
||||
possible use to the public, the best way to achieve this is to make it
|
||||
free software which everyone can redistribute and change under these terms.
|
||||
|
||||
To do so, attach the following notices to the program. It is safest
|
||||
to attach them to the start of each source file to most effectively
|
||||
state the exclusion of warranty; and each file should have at least
|
||||
the "copyright" line and a pointer to where the full notice is found.
|
||||
|
||||
<one line to give the program's name and a brief idea of what it does.>
|
||||
Copyright (C) <year> <name of author>
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
Also add information on how to contact you by electronic and paper mail.
|
||||
|
||||
If your software can interact with users remotely through a computer
|
||||
network, you should also make sure that it provides a way for users to
|
||||
get its source. For example, if your program is a web application, its
|
||||
interface could display a "Source" link that leads users to an archive
|
||||
of the code. There are many ways you could offer source, and different
|
||||
solutions will be better for different programs; see section 13 for the
|
||||
specific requirements.
|
||||
|
||||
You should also get your employer (if you work as a programmer) or school,
|
||||
if any, to sign a "copyright disclaimer" for the program, if necessary.
|
||||
For more information on this, and how to apply and follow the GNU AGPL, see
|
||||
<https://www.gnu.org/licenses/>.
|
||||
35
README.md
Normal file
35
README.md
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
|
||||
|
||||
<h1 align="center">Chatpad AI</h1>
|
||||
<h2 align="center">Premium quality UI for ChatGPT</h2>
|
||||
<p align="center"><a href="https://chatpad.ai">Web App</a> & <a href="https://download.chatpad.ai">Desktop App</a></p>
|
||||
|
||||
Recently, there has been a surge of UIs for ChatGPT, making it the new "to-do app" that everyone wants to try their hand at. Chatpad sets itself apart with a broader vision - to become the ultimate interface for ChatGPT users.
|
||||
|
||||
### ⚡️ Free and open source
|
||||
|
||||
This app is provided for free and the source code is available on GitHub.
|
||||
|
||||
### 🔒 Privacy focused
|
||||
|
||||
No tracking, no cookies, no bullshit. All your data is stored locally.
|
||||
|
||||
### ✨ Best experience
|
||||
|
||||
Crafted with love and care to provide the best experience possible.
|
||||
|
||||
---
|
||||
|
||||
## Give Feedback
|
||||
|
||||
If you have any feature requests or bug reports, go to [feedback.chatpad.ai](https://feedback.chatpad.ai).
|
||||
|
||||
## Contribute
|
||||
|
||||
This is a React.js application. Clone the project, run `npm i` and `npm start` and you're good to go.
|
||||
|
||||
## Credits
|
||||
|
||||
- Mantine - A fully featured React component library
|
||||
- DexieJS - A Minimalistic Wrapper for IndexedDB
|
||||
- ToDesktop - A simple way to make your web app into a beautiful desktop app
|
||||
BIN
banner.png
Normal file
BIN
banner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 986 KiB |
11771
package-lock.json
generated
Normal file
11771
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
45
package.json
Normal file
45
package.json
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
{
|
||||
"name": "chatpad",
|
||||
"private": true,
|
||||
"source": "src/index.html",
|
||||
"browserslist": "> 0.5%, last 2 versions, not dead",
|
||||
"scripts": {
|
||||
"start": "parcel",
|
||||
"build": "parcel build"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/downloadjs": "^1.4.3",
|
||||
"@types/react": "^18.0.28",
|
||||
"@types/react-dom": "^18.0.11",
|
||||
"buffer": "^5.7.1",
|
||||
"parcel": "^2.8.3",
|
||||
"process": "^0.11.10"
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/react": "^11.10.6",
|
||||
"@emotion/server": "^11.10.0",
|
||||
"@mantine/core": "^6.0.1",
|
||||
"@mantine/hooks": "^6.0.1",
|
||||
"@mantine/next": "^6.0.1",
|
||||
"@mantine/notifications": "^6.0.1",
|
||||
"@tabler/icons-react": "^2.9.0",
|
||||
"@tanstack/react-location": "^3.7.4",
|
||||
"@types/node": "18.15.0",
|
||||
"@types/react": "18.0.28",
|
||||
"@types/react-dom": "18.0.11",
|
||||
"dexie": "^3.2.3",
|
||||
"dexie-export-import": "^4.0.6",
|
||||
"dexie-react-hooks": "^1.1.3",
|
||||
"downloadjs": "^1.4.7",
|
||||
"eslint": "8.36.0",
|
||||
"eslint-config-next": "13.2.4",
|
||||
"lodash": "^4.17.21",
|
||||
"nanoid": "^4.0.1",
|
||||
"next": "13.2.4",
|
||||
"openai": "^3.2.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-icons": "^4.8.0",
|
||||
"typescript": "4.9.5"
|
||||
}
|
||||
}
|
||||
BIN
src/assets/favicon.png
Normal file
BIN
src/assets/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.3 KiB |
92
src/components/App.tsx
Normal file
92
src/components/App.tsx
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
import {
|
||||
ColorScheme,
|
||||
ColorSchemeProvider,
|
||||
MantineProvider,
|
||||
} from "@mantine/core";
|
||||
import { useHotkeys, useLocalStorage } from "@mantine/hooks";
|
||||
import { Notifications } from "@mantine/notifications";
|
||||
import {
|
||||
createHashHistory,
|
||||
ReactLocation,
|
||||
Router,
|
||||
} from "@tanstack/react-location";
|
||||
import { ChatRoute } from "../routes/ChatRoute";
|
||||
import { DataRoute } from "../routes/DataRoute";
|
||||
import { IndexRoute } from "../routes/IndexRoute";
|
||||
import { Layout } from "./Layout";
|
||||
|
||||
const history = createHashHistory();
|
||||
const location = new ReactLocation({ history });
|
||||
|
||||
export function App() {
|
||||
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
|
||||
|
||||
const [colorScheme, setColorScheme] = useLocalStorage<ColorScheme>({
|
||||
key: "mantine-color-scheme",
|
||||
defaultValue: prefersDark ? "dark" : "light",
|
||||
getInitialValueInEffect: true,
|
||||
});
|
||||
|
||||
const toggleColorScheme = (value?: ColorScheme) =>
|
||||
setColorScheme(value || (colorScheme === "dark" ? "light" : "dark"));
|
||||
|
||||
useHotkeys([["mod+J", () => toggleColorScheme()]]);
|
||||
|
||||
return (
|
||||
<Router
|
||||
location={location}
|
||||
routes={[
|
||||
{ path: "/", element: <IndexRoute /> },
|
||||
{ path: "/chats/:chatId", element: <ChatRoute /> },
|
||||
{ path: "/data", element: <DataRoute /> },
|
||||
]}
|
||||
>
|
||||
<ColorSchemeProvider
|
||||
colorScheme={colorScheme}
|
||||
toggleColorScheme={toggleColorScheme}
|
||||
>
|
||||
<MantineProvider
|
||||
withGlobalStyles
|
||||
withNormalizeCSS
|
||||
theme={{
|
||||
colorScheme,
|
||||
primaryColor: "teal",
|
||||
globalStyles: (theme) => ({
|
||||
body: {
|
||||
backgroundColor:
|
||||
theme.colorScheme === "dark"
|
||||
? theme.colors.dark[9]
|
||||
: theme.colors.gray[0],
|
||||
},
|
||||
}),
|
||||
components: {
|
||||
Modal: {
|
||||
styles: {
|
||||
title: {
|
||||
fontSize: "1.2rem",
|
||||
fontWeight: 600,
|
||||
},
|
||||
},
|
||||
},
|
||||
ModalRoot: {
|
||||
defaultProps: {
|
||||
padding: "xl",
|
||||
centered: true,
|
||||
},
|
||||
},
|
||||
Overlay: {
|
||||
defaultProps: {
|
||||
opacity: 0.7,
|
||||
blur: 3,
|
||||
},
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Layout />
|
||||
<Notifications />
|
||||
</MantineProvider>
|
||||
</ColorSchemeProvider>
|
||||
</Router>
|
||||
);
|
||||
}
|
||||
47
src/components/CharacterCard.tsx
Normal file
47
src/components/CharacterCard.tsx
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
import { Card, Grid, Group, Text } from "@mantine/core";
|
||||
|
||||
const CharacterCard = ({
|
||||
character,
|
||||
onClick,
|
||||
selectedIndex,
|
||||
i,
|
||||
}: {
|
||||
character: { name: string; description: string };
|
||||
onClick: any;
|
||||
selectedIndex: number;
|
||||
i: number;
|
||||
}) => {
|
||||
const isActive = selectedIndex === i;
|
||||
return (
|
||||
<Grid.Col xs={6} md={4}>
|
||||
<Card
|
||||
withBorder
|
||||
component="a"
|
||||
onClick={onClick}
|
||||
sx={(theme) => ({
|
||||
cursor: "pointer",
|
||||
height: "100%",
|
||||
borderColor: isActive
|
||||
? `${theme.colors.blue["5"]} !important`
|
||||
: undefined,
|
||||
borderRadius: theme.radius.md,
|
||||
padding: theme.spacing.lg,
|
||||
// boxShadow: theme.shadows.xs,
|
||||
":hover": {
|
||||
borderColor: `${theme.colors.blue["5"]} !important`,
|
||||
},
|
||||
})}
|
||||
>
|
||||
<Group position="apart" mb="xs">
|
||||
<Text weight={500}>{character.name}</Text>
|
||||
</Group>
|
||||
|
||||
<Text size="sm" color="dimmed">
|
||||
{character.description}
|
||||
</Text>
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
);
|
||||
};
|
||||
|
||||
export default CharacterCard;
|
||||
60
src/components/Chats.tsx
Normal file
60
src/components/Chats.tsx
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
import { ActionIcon, Flex, Menu } from "@mantine/core";
|
||||
import { IconDotsVertical, IconMessages } from "@tabler/icons-react";
|
||||
import { Link } from "@tanstack/react-location";
|
||||
import { useLiveQuery } from "dexie-react-hooks";
|
||||
import { db } from "../db";
|
||||
import { useChatId } from "../hooks/useChatId";
|
||||
import { DeleteChatModal } from "./DeleteChatModal";
|
||||
import { EditChatModal } from "./EditChatModal";
|
||||
import { MainLink } from "./MainLink";
|
||||
|
||||
export function Chats() {
|
||||
const chatId = useChatId();
|
||||
const chats = useLiveQuery(() =>
|
||||
db.chats.orderBy("createdAt").reverse().toArray()
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
{chats?.map((chat) => (
|
||||
<Flex
|
||||
key={chat.id}
|
||||
className={chatId === chat.id ? "active" : undefined}
|
||||
sx={(theme) => ({
|
||||
marginTop: 1,
|
||||
"&:hover, &.active": {
|
||||
backgroundColor:
|
||||
theme.colorScheme === "dark"
|
||||
? theme.colors.dark[6]
|
||||
: theme.colors.gray[1],
|
||||
},
|
||||
})}
|
||||
>
|
||||
<Link to={`/chats/${chat.id}`} style={{ flex: 1 }}>
|
||||
<MainLink
|
||||
icon={<IconMessages size="1rem" />}
|
||||
color="teal"
|
||||
chat={chat}
|
||||
label={chat.description}
|
||||
/>
|
||||
</Link>
|
||||
<Menu shadow="md" width={200} keepMounted>
|
||||
<Menu.Target>
|
||||
<ActionIcon sx={{ height: "auto" }}>
|
||||
<IconDotsVertical size={20} />
|
||||
</ActionIcon>
|
||||
</Menu.Target>
|
||||
<Menu.Dropdown>
|
||||
<EditChatModal chat={chat}>
|
||||
<Menu.Item>Edit</Menu.Item>
|
||||
</EditChatModal>
|
||||
<DeleteChatModal chat={chat}>
|
||||
<Menu.Item>Delete</Menu.Item>
|
||||
</DeleteChatModal>
|
||||
</Menu.Dropdown>
|
||||
</Menu>
|
||||
</Flex>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
101
src/components/CreatePromptModal.tsx
Normal file
101
src/components/CreatePromptModal.tsx
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
import {
|
||||
Button,
|
||||
Modal,
|
||||
Stack,
|
||||
Textarea,
|
||||
TextInput,
|
||||
ThemeIcon,
|
||||
Tooltip,
|
||||
} from "@mantine/core";
|
||||
import { useDisclosure } from "@mantine/hooks";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
import { IconPlaylistAdd, IconPlus } from "@tabler/icons-react";
|
||||
import { nanoid } from "nanoid";
|
||||
import { useEffect, useState } from "react";
|
||||
import { db } from "../db";
|
||||
|
||||
export function CreatePromptModal({ content }: { content?: string }) {
|
||||
const [opened, { open, close }] = useDisclosure(false);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
const [value, setValue] = useState("");
|
||||
const [title, setTitle] = useState("");
|
||||
useEffect(() => {
|
||||
setValue(content ?? "");
|
||||
}, [content]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal opened={opened} onClose={close} title="Create Prompt" size="lg">
|
||||
<form
|
||||
onSubmit={async (event) => {
|
||||
try {
|
||||
setSubmitting(true);
|
||||
event.preventDefault();
|
||||
const id = nanoid();
|
||||
db.prompts.add({
|
||||
id,
|
||||
title,
|
||||
content: value,
|
||||
createdAt: new Date(),
|
||||
});
|
||||
notifications.show({
|
||||
title: "Saved",
|
||||
message: "Prompt created",
|
||||
});
|
||||
close();
|
||||
} catch (error: any) {
|
||||
if (error.toJSON().message === "Network Error") {
|
||||
notifications.show({
|
||||
title: "Error",
|
||||
color: "red",
|
||||
message: "No internet connection.",
|
||||
});
|
||||
} else {
|
||||
notifications.show({
|
||||
title: "Error",
|
||||
color: "red",
|
||||
message: "Your OpenAI Key is invalid.",
|
||||
});
|
||||
}
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Stack>
|
||||
<TextInput
|
||||
label="Title"
|
||||
value={title}
|
||||
onChange={(event) => setTitle(event.currentTarget.value)}
|
||||
formNoValidate
|
||||
data-autofocus
|
||||
/>
|
||||
<Textarea
|
||||
placeholder="Content"
|
||||
autosize
|
||||
minRows={5}
|
||||
maxRows={10}
|
||||
value={value}
|
||||
onChange={(event) => setValue(event.currentTarget.value)}
|
||||
/>
|
||||
<Button type="submit" loading={submitting}>
|
||||
Save
|
||||
</Button>
|
||||
</Stack>
|
||||
</form>
|
||||
</Modal>
|
||||
{content ? (
|
||||
<Tooltip label="Save Prompt" withinPortal>
|
||||
<ThemeIcon variant="light" onClick={open}>
|
||||
<IconPlaylistAdd />
|
||||
</ThemeIcon>
|
||||
</Tooltip>
|
||||
) : (
|
||||
<Button fullWidth onClick={open} leftIcon={<IconPlus size={20} />}>
|
||||
New Prompt
|
||||
</Button>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
139
src/components/DatabaseModal.tsx
Normal file
139
src/components/DatabaseModal.tsx
Normal file
|
|
@ -0,0 +1,139 @@
|
|||
import { Button, Card, Flex, Group, Modal, Text } from "@mantine/core";
|
||||
import { useDisclosure } from "@mantine/hooks";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
import { IconDatabaseExport, IconDatabaseImport } from "@tabler/icons-react";
|
||||
import { useLiveQuery } from "dexie-react-hooks";
|
||||
import download from "downloadjs";
|
||||
import { cloneElement, ReactElement } from "react";
|
||||
import { db } from "../db";
|
||||
import { DeleteDataModal } from "./DeleteDataModal";
|
||||
|
||||
export function DatabaseModal({ children }: { children: ReactElement }) {
|
||||
const [opened, { open, close }] = useDisclosure(false);
|
||||
const chatsCount = useLiveQuery(async () => {
|
||||
return (await db.chats.toArray()).length;
|
||||
}, []);
|
||||
const messagesCount = useLiveQuery(async () => {
|
||||
return (await db.messages.toArray()).length;
|
||||
}, []);
|
||||
const promptsCount = useLiveQuery(async () => {
|
||||
return (await db.prompts.toArray()).length;
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
{cloneElement(children, { onClick: open })}
|
||||
<Modal
|
||||
opened={opened}
|
||||
onClose={close}
|
||||
title="Database"
|
||||
size="lg"
|
||||
withinPortal
|
||||
keepMounted
|
||||
>
|
||||
<Flex>
|
||||
<Card withBorder sx={{ flex: 1 }}>
|
||||
<Text size="xl" align="center">
|
||||
{chatsCount}
|
||||
</Text>
|
||||
<Text
|
||||
size="xs"
|
||||
color="dimmed"
|
||||
align="center"
|
||||
tt="uppercase"
|
||||
fw={700}
|
||||
>
|
||||
Chats
|
||||
</Text>
|
||||
</Card>
|
||||
<Card withBorder sx={{ flex: 1, marginLeft: -1 }}>
|
||||
<Text size="xl" align="center">
|
||||
{messagesCount}
|
||||
</Text>
|
||||
<Text
|
||||
size="xs"
|
||||
color="dimmed"
|
||||
align="center"
|
||||
tt="uppercase"
|
||||
fw={700}
|
||||
>
|
||||
Messages
|
||||
</Text>
|
||||
</Card>
|
||||
<Card withBorder sx={{ flex: 1, marginLeft: -1 }}>
|
||||
<Text size="xl" align="center">
|
||||
{promptsCount}
|
||||
</Text>
|
||||
<Text
|
||||
size="xs"
|
||||
color="dimmed"
|
||||
align="center"
|
||||
tt="uppercase"
|
||||
fw={700}
|
||||
>
|
||||
Prompts
|
||||
</Text>
|
||||
</Card>
|
||||
</Flex>
|
||||
<Group mt="lg">
|
||||
<Button
|
||||
variant="default"
|
||||
leftIcon={<IconDatabaseExport size={20} />}
|
||||
onClick={async () => {
|
||||
const blob = await db.export();
|
||||
download(
|
||||
blob,
|
||||
`chatpad-export-${new Date().toLocaleString()}.json`,
|
||||
"application/json"
|
||||
);
|
||||
notifications.show({
|
||||
title: "Exporting Data",
|
||||
message: "Your data is being exported.",
|
||||
});
|
||||
}}
|
||||
>
|
||||
Export Data
|
||||
</Button>
|
||||
<input
|
||||
id="file-upload-btn"
|
||||
type="file"
|
||||
onChange={async (e) => {
|
||||
const file = e.currentTarget.files?.[0];
|
||||
if (!file) return;
|
||||
db.import(file, {
|
||||
acceptNameDiff: true,
|
||||
overwriteValues: true,
|
||||
acceptMissingTables: true,
|
||||
clearTablesBeforeImport: true,
|
||||
})
|
||||
.then(() => {
|
||||
notifications.show({
|
||||
title: "Importing data",
|
||||
message: "Your data is being imported.",
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
notifications.show({
|
||||
title: "Error",
|
||||
color: "red",
|
||||
message: "The file you selected is invalid",
|
||||
});
|
||||
});
|
||||
}}
|
||||
accept="application/json"
|
||||
hidden
|
||||
/>
|
||||
<Button
|
||||
component="label"
|
||||
htmlFor="file-upload-btn"
|
||||
variant="default"
|
||||
leftIcon={<IconDatabaseImport size={20} />}
|
||||
>
|
||||
Import Data
|
||||
</Button>
|
||||
<DeleteDataModal onOpen={close} />
|
||||
</Group>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
79
src/components/DeleteChatModal.tsx
Normal file
79
src/components/DeleteChatModal.tsx
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
import { Button, Modal, Stack, Text } from "@mantine/core";
|
||||
import { useDisclosure } from "@mantine/hooks";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
import { useNavigate } from "@tanstack/react-location";
|
||||
import { cloneElement, ReactElement, useEffect, useState } from "react";
|
||||
import { Chat, db } from "../db";
|
||||
import { useApiKey } from "../hooks/useApiKey";
|
||||
import { useChatId } from "../hooks/useChatId";
|
||||
|
||||
export function DeleteChatModal({
|
||||
chat,
|
||||
children,
|
||||
}: {
|
||||
chat: Chat;
|
||||
children: ReactElement;
|
||||
}) {
|
||||
const [opened, { open, close }] = useDisclosure(false);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
const [key, setKey] = useApiKey();
|
||||
|
||||
const [value, setValue] = useState("");
|
||||
useEffect(() => {
|
||||
setValue(key);
|
||||
}, [key]);
|
||||
const chatId = useChatId();
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<>
|
||||
{cloneElement(children, { onClick: open })}
|
||||
<Modal opened={opened} onClose={close} title="Delete Chat">
|
||||
<form
|
||||
onSubmit={async (event) => {
|
||||
try {
|
||||
setSubmitting(true);
|
||||
event.preventDefault();
|
||||
await db.chats.where({ id: chat.id }).delete();
|
||||
await db.messages.where({ chatId: chat.id }).delete();
|
||||
if (chatId === chat.id) {
|
||||
navigate({ to: `/` });
|
||||
}
|
||||
close();
|
||||
|
||||
notifications.show({
|
||||
title: "Deleted",
|
||||
message: "Chat deleted.",
|
||||
});
|
||||
} catch (error: any) {
|
||||
if (error.toJSON().message === "Network Error") {
|
||||
notifications.show({
|
||||
title: "Error",
|
||||
color: "red",
|
||||
message: "No internet connection.",
|
||||
});
|
||||
} else {
|
||||
notifications.show({
|
||||
title: "Error",
|
||||
color: "red",
|
||||
message:
|
||||
"Can't remove chat. Please refresh the page and try again.",
|
||||
});
|
||||
}
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Stack>
|
||||
<Text size="sm">Are you sure you want to delete this chat?</Text>
|
||||
<Button type="submit" color="red" loading={submitting}>
|
||||
Delete
|
||||
</Button>
|
||||
</Stack>
|
||||
</form>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
42
src/components/DeleteDataModal.tsx
Normal file
42
src/components/DeleteDataModal.tsx
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
import { Button, Modal, Stack, Text } from "@mantine/core";
|
||||
import { useDisclosure } from "@mantine/hooks";
|
||||
import { IconTrash } from "@tabler/icons-react";
|
||||
import { db } from "../db";
|
||||
|
||||
export function DeleteDataModal({ onOpen }: { onOpen: () => void }) {
|
||||
const [opened, { open, close }] = useDisclosure(false, { onOpen });
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal
|
||||
opened={opened}
|
||||
onClose={close}
|
||||
title="Delete Data"
|
||||
size="md"
|
||||
withinPortal
|
||||
>
|
||||
<Stack>
|
||||
<Text size="sm">Are you sure you want to delete your data?</Text>
|
||||
<Button
|
||||
onClick={async () => {
|
||||
await db.delete();
|
||||
localStorage.clear();
|
||||
window.location.assign("/");
|
||||
}}
|
||||
color="red"
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</Stack>
|
||||
</Modal>
|
||||
<Button
|
||||
onClick={open}
|
||||
variant="outline"
|
||||
color="red"
|
||||
leftIcon={<IconTrash size={20} />}
|
||||
>
|
||||
Delete Data
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
74
src/components/DeletePromptModal.tsx
Normal file
74
src/components/DeletePromptModal.tsx
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
import { ActionIcon, Button, Modal, Stack, Text, Tooltip } from "@mantine/core";
|
||||
import { useDisclosure } from "@mantine/hooks";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
import { IconTrash } from "@tabler/icons-react";
|
||||
import { useNavigate } from "@tanstack/react-location";
|
||||
import { useEffect, useState } from "react";
|
||||
import { db, Prompt } from "../db";
|
||||
import { useApiKey } from "../hooks/useApiKey";
|
||||
import { useChatId } from "../hooks/useChatId";
|
||||
|
||||
export function DeletePromptModal({ prompt }: { prompt: Prompt }) {
|
||||
const [opened, { open, close }] = useDisclosure(false);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
const [key, setKey] = useApiKey();
|
||||
|
||||
const [value, setValue] = useState("");
|
||||
useEffect(() => {
|
||||
setValue(key);
|
||||
}, [key]);
|
||||
const chatId = useChatId();
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal opened={opened} onClose={close} title="Delete Prompt" size="md">
|
||||
<form
|
||||
onSubmit={async (event) => {
|
||||
try {
|
||||
setSubmitting(true);
|
||||
event.preventDefault();
|
||||
await db.prompts.where({ id: prompt.id }).delete();
|
||||
close();
|
||||
|
||||
notifications.show({
|
||||
title: "Deleted",
|
||||
message: "Chat deleted.",
|
||||
});
|
||||
} catch (error: any) {
|
||||
if (error.toJSON().message === "Network Error") {
|
||||
notifications.show({
|
||||
title: "Error",
|
||||
color: "red",
|
||||
message: "No internet connection.",
|
||||
});
|
||||
} else {
|
||||
notifications.show({
|
||||
title: "Error",
|
||||
color: "red",
|
||||
message:
|
||||
"Can't remove chat. Please refresh the page and try again.",
|
||||
});
|
||||
}
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Stack>
|
||||
<Text size="sm">Are you sure you want to delete this prompt?</Text>
|
||||
<Button type="submit" color="red" loading={submitting}>
|
||||
Delete
|
||||
</Button>
|
||||
</Stack>
|
||||
</form>
|
||||
</Modal>
|
||||
<Tooltip label="Delete Prompt">
|
||||
<ActionIcon color="red" size="lg" onClick={open}>
|
||||
<IconTrash size={20} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
</>
|
||||
);
|
||||
}
|
||||
74
src/components/EditChatModal.tsx
Normal file
74
src/components/EditChatModal.tsx
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
import { Button, Modal, Stack, TextInput } from "@mantine/core";
|
||||
import { useDisclosure } from "@mantine/hooks";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
import { cloneElement, ReactElement, useEffect, useState } from "react";
|
||||
import { Chat, db } from "../db";
|
||||
|
||||
export function EditChatModal({
|
||||
chat,
|
||||
children,
|
||||
}: {
|
||||
chat: Chat;
|
||||
children: ReactElement;
|
||||
}) {
|
||||
const [opened, { open, close }] = useDisclosure(false);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
const [value, setValue] = useState("");
|
||||
useEffect(() => {
|
||||
setValue(chat?.description ?? "");
|
||||
}, [chat]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{cloneElement(children, { onClick: open })}
|
||||
<Modal opened={opened} onClose={close} title="Edit Chat" withinPortal>
|
||||
<form
|
||||
onSubmit={async (event) => {
|
||||
try {
|
||||
setSubmitting(true);
|
||||
event.preventDefault();
|
||||
await db.chats.where({ id: chat.id }).modify((chat) => {
|
||||
chat.description = value;
|
||||
});
|
||||
notifications.show({
|
||||
title: "Saved",
|
||||
message: "",
|
||||
});
|
||||
close();
|
||||
} catch (error: any) {
|
||||
if (error.toJSON().message === "Network Error") {
|
||||
notifications.show({
|
||||
title: "Error",
|
||||
color: "red",
|
||||
message: "No internet connection.",
|
||||
});
|
||||
} else {
|
||||
notifications.show({
|
||||
title: "Error",
|
||||
color: "red",
|
||||
message: "Your OpenAI Key is invalid.",
|
||||
});
|
||||
}
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Stack>
|
||||
<TextInput
|
||||
label="Name"
|
||||
value={value}
|
||||
onChange={(event) => setValue(event.currentTarget.value)}
|
||||
formNoValidate
|
||||
data-autofocus
|
||||
/>
|
||||
<Button type="submit" loading={submitting}>
|
||||
Save
|
||||
</Button>
|
||||
</Stack>
|
||||
</form>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
91
src/components/EditPromptModal.tsx
Normal file
91
src/components/EditPromptModal.tsx
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
import {
|
||||
ActionIcon,
|
||||
Button,
|
||||
Modal,
|
||||
Stack,
|
||||
Textarea,
|
||||
TextInput,
|
||||
Tooltip,
|
||||
} from "@mantine/core";
|
||||
import { useDisclosure } from "@mantine/hooks";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
import { IconPencil } from "@tabler/icons-react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { db, Prompt } from "../db";
|
||||
|
||||
export function EditPromptModal({ prompt }: { prompt: Prompt }) {
|
||||
const [opened, { open, close }] = useDisclosure(false);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
const [value, setValue] = useState("");
|
||||
const [title, setTitle] = useState("");
|
||||
useEffect(() => {
|
||||
setValue(prompt?.content ?? "");
|
||||
setTitle(prompt?.title ?? "");
|
||||
}, [prompt]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal opened={opened} onClose={close} title="Edit Prompt" size="lg">
|
||||
<form
|
||||
onSubmit={async (event) => {
|
||||
try {
|
||||
setSubmitting(true);
|
||||
event.preventDefault();
|
||||
await db.prompts.where({ id: prompt.id }).modify((chat) => {
|
||||
chat.title = title;
|
||||
chat.content = value;
|
||||
});
|
||||
notifications.show({
|
||||
title: "Saved",
|
||||
message: "Prompt updated",
|
||||
});
|
||||
} catch (error: any) {
|
||||
if (error.toJSON().message === "Network Error") {
|
||||
notifications.show({
|
||||
title: "Error",
|
||||
color: "red",
|
||||
message: "No internet connection.",
|
||||
});
|
||||
} else {
|
||||
notifications.show({
|
||||
title: "Error",
|
||||
color: "red",
|
||||
message: "Your OpenAI Key is invalid.",
|
||||
});
|
||||
}
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Stack>
|
||||
<TextInput
|
||||
label="Title"
|
||||
value={title}
|
||||
onChange={(event) => setTitle(event.currentTarget.value)}
|
||||
formNoValidate
|
||||
data-autofocus
|
||||
/>
|
||||
<Textarea
|
||||
label="Content"
|
||||
autosize
|
||||
minRows={5}
|
||||
maxRows={10}
|
||||
value={value}
|
||||
onChange={(event) => setValue(event.currentTarget.value)}
|
||||
/>
|
||||
<Button type="submit" loading={submitting}>
|
||||
Save
|
||||
</Button>
|
||||
</Stack>
|
||||
</form>
|
||||
</Modal>
|
||||
<Tooltip label="Edit Prompt">
|
||||
<ActionIcon size="lg" onClick={open}>
|
||||
<IconPencil size={20} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
</>
|
||||
);
|
||||
}
|
||||
254
src/components/Layout.tsx
Normal file
254
src/components/Layout.tsx
Normal file
|
|
@ -0,0 +1,254 @@
|
|||
import {
|
||||
ActionIcon,
|
||||
AppShell,
|
||||
Box,
|
||||
Burger,
|
||||
Button,
|
||||
Center,
|
||||
Header,
|
||||
MediaQuery,
|
||||
Navbar,
|
||||
rem,
|
||||
ScrollArea,
|
||||
SegmentedControl,
|
||||
Tooltip,
|
||||
useMantineColorScheme,
|
||||
useMantineTheme,
|
||||
} from "@mantine/core";
|
||||
import {
|
||||
IconBrandGithub,
|
||||
IconBrandTwitter,
|
||||
IconDatabase,
|
||||
IconMessage,
|
||||
IconMoonStars,
|
||||
IconPlus,
|
||||
IconSettings,
|
||||
IconSunHigh,
|
||||
} from "@tabler/icons-react";
|
||||
import { Link, Outlet, useNavigate, useRouter } from "@tanstack/react-location";
|
||||
import { useLiveQuery } from "dexie-react-hooks";
|
||||
import { nanoid } from "nanoid";
|
||||
import { useEffect, useState } from "react";
|
||||
import { db } from "../db";
|
||||
import { useChatId } from "../hooks/useChatId";
|
||||
import { Chats } from "./Chats";
|
||||
import { CreatePromptModal } from "./CreatePromptModal";
|
||||
import { DatabaseModal } from "./DatabaseModal";
|
||||
import { LogoText } from "./Logo";
|
||||
import { Prompts } from "./Prompts";
|
||||
import { SettingsModal } from "./SettingsModal";
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
todesktop?: any;
|
||||
}
|
||||
}
|
||||
|
||||
export function Layout() {
|
||||
const theme = useMantineTheme();
|
||||
const [opened, setOpened] = useState(false);
|
||||
const [tab, setTab] = useState<"Chats" | "Prompts">("Chats");
|
||||
const { colorScheme, toggleColorScheme } = useMantineColorScheme();
|
||||
const navigate = useNavigate();
|
||||
const router = useRouter();
|
||||
|
||||
const chatId = useChatId();
|
||||
const chat = useLiveQuery(async () => {
|
||||
if (!chatId) return null;
|
||||
return db.chats.get(chatId);
|
||||
}, [chatId]);
|
||||
|
||||
const border = `${rem(1)} solid ${
|
||||
theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[2]
|
||||
}`;
|
||||
|
||||
useEffect(() => {
|
||||
setOpened(false);
|
||||
}, [router.state.location]);
|
||||
|
||||
return (
|
||||
<AppShell
|
||||
navbarOffsetBreakpoint="sm"
|
||||
navbar={
|
||||
<Navbar width={{ lg: 300 }} hiddenBreakpoint="lg" hidden={!opened}>
|
||||
<Navbar.Section className="app-region-drag">
|
||||
<Box
|
||||
style={{
|
||||
height: 60,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
borderBottom: border,
|
||||
}}
|
||||
>
|
||||
<Link
|
||||
to="/"
|
||||
className="app-region-no-drag"
|
||||
style={{ marginTop: 10, padding: 4 }}
|
||||
>
|
||||
<LogoText
|
||||
style={{
|
||||
height: 22,
|
||||
color: "#27B882",
|
||||
display: "block",
|
||||
}}
|
||||
/>
|
||||
</Link>
|
||||
<MediaQuery largerThan="lg" styles={{ display: "none" }}>
|
||||
<Burger
|
||||
opened={opened}
|
||||
onClick={() => setOpened((o) => !o)}
|
||||
size="sm"
|
||||
color={theme.colors.gray[6]}
|
||||
className="app-region-no-drag"
|
||||
sx={{ position: "absolute", right: 16 }}
|
||||
/>
|
||||
</MediaQuery>
|
||||
</Box>
|
||||
</Navbar.Section>
|
||||
<Navbar.Section
|
||||
sx={(theme) => ({
|
||||
padding: rem(4),
|
||||
background:
|
||||
theme.colorScheme === "dark"
|
||||
? theme.colors.dark[8]
|
||||
: theme.colors.gray[1],
|
||||
borderBottom: border,
|
||||
})}
|
||||
>
|
||||
<SegmentedControl
|
||||
fullWidth
|
||||
value={tab}
|
||||
onChange={(value) => setTab(value as typeof tab)}
|
||||
data={["Chats", "Prompts"]}
|
||||
/>
|
||||
<Box sx={{ padding: 4 }}>
|
||||
{tab === "Chats" && (
|
||||
<Button
|
||||
fullWidth
|
||||
leftIcon={<IconPlus size={20} />}
|
||||
onClick={() => {
|
||||
const id = nanoid();
|
||||
db.chats.add({
|
||||
id,
|
||||
description: "New Chat",
|
||||
totalTokens: 0,
|
||||
createdAt: new Date(),
|
||||
});
|
||||
navigate({ to: `/chats/${id}` });
|
||||
}}
|
||||
>
|
||||
New Chat
|
||||
</Button>
|
||||
)}
|
||||
{tab === "Prompts" && <CreatePromptModal />}
|
||||
</Box>
|
||||
</Navbar.Section>
|
||||
<Navbar.Section grow component={ScrollArea}>
|
||||
{tab === "Chats" && <Chats />}
|
||||
{tab === "Prompts" && <Prompts onPlay={() => setTab("Chats")} />}
|
||||
</Navbar.Section>
|
||||
<Navbar.Section sx={{ borderTop: border }} p="xs">
|
||||
<Center>
|
||||
<Tooltip
|
||||
label={colorScheme === "dark" ? "Light Mode" : "Dark Mode"}
|
||||
>
|
||||
<ActionIcon
|
||||
sx={{ flex: 1 }}
|
||||
size="xl"
|
||||
onClick={() => toggleColorScheme()}
|
||||
>
|
||||
{colorScheme === "dark" ? (
|
||||
<IconSunHigh size={20} />
|
||||
) : (
|
||||
<IconMoonStars size={20} />
|
||||
)}
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
<SettingsModal>
|
||||
<Tooltip label="Settings">
|
||||
<ActionIcon sx={{ flex: 1 }} size="xl">
|
||||
<IconSettings size={20} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
</SettingsModal>
|
||||
<DatabaseModal>
|
||||
<Tooltip label="Database">
|
||||
<ActionIcon sx={{ flex: 1 }} size="xl">
|
||||
<IconDatabase size={20} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
</DatabaseModal>
|
||||
<Tooltip label="Source Code">
|
||||
<ActionIcon
|
||||
component="a"
|
||||
href="https://github.com/deiucanta/chatpad"
|
||||
target="_blank"
|
||||
sx={{ flex: 1 }}
|
||||
size="xl"
|
||||
>
|
||||
<IconBrandGithub size={20} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
<Tooltip label="Follow on Twitter">
|
||||
<ActionIcon
|
||||
component="a"
|
||||
href="https://twitter.com/deiucanta"
|
||||
target="_blank"
|
||||
sx={{ flex: 1 }}
|
||||
size="xl"
|
||||
>
|
||||
<IconBrandTwitter size={20} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
<Tooltip label="Give Feedback">
|
||||
<ActionIcon
|
||||
component="a"
|
||||
href="https://feedback.chatpad.ai"
|
||||
target="_blank"
|
||||
sx={{ flex: 1 }}
|
||||
size="xl"
|
||||
>
|
||||
<IconMessage size={20} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
</Center>
|
||||
</Navbar.Section>
|
||||
</Navbar>
|
||||
}
|
||||
header={
|
||||
chat ? (
|
||||
<Header height={60} p="xs" className="app-region-drag">
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
height: "100%",
|
||||
}}
|
||||
>
|
||||
{`${chat.description} - ${chat.totalTokens ?? 0} tokens ~ $${(
|
||||
((chat.totalTokens ?? 0) * 0.002) /
|
||||
1000
|
||||
).toFixed(5)}`}
|
||||
</div>
|
||||
</Header>
|
||||
) : undefined
|
||||
}
|
||||
layout="alt"
|
||||
padding={0}
|
||||
>
|
||||
<MediaQuery largerThan="lg" styles={{ display: "none" }}>
|
||||
<Burger
|
||||
opened={opened}
|
||||
onClick={() => setOpened((o) => !o)}
|
||||
size="sm"
|
||||
color={theme.colors.gray[6]}
|
||||
className="app-region-no-drag"
|
||||
sx={{ position: "absolute", top: 16, right: 16, zIndex: 100 }}
|
||||
/>
|
||||
</MediaQuery>
|
||||
<Outlet />
|
||||
</AppShell>
|
||||
);
|
||||
}
|
||||
81
src/components/Logo.tsx
Normal file
81
src/components/Logo.tsx
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
export function LogoText(props: JSX.IntrinsicElements["svg"]) {
|
||||
return (
|
||||
<svg
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 485 93"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M.93 36.03c0-6.27 1.4-11.87 4.2-16.8a30.2 30.2 0 0 1 11.6-11.6 32.88 32.88 0 0 1 16.53-4.2c7.12 0 13.36 1.82 18.72 5.48a28.6 28.6 0 0 1 11.23 15.16h-14.7a15.16 15.16 0 0 0-6.21-6.85 17.84 17.84 0 0 0-9.13-2.28c-3.72 0-7.04.88-9.96 2.64a17.85 17.85 0 0 0-6.76 7.31c-1.58 3.17-2.37 6.88-2.37 11.14 0 4.2.79 7.92 2.37 11.15a18.5 18.5 0 0 0 6.76 7.4 19.39 19.39 0 0 0 9.96 2.55c3.47 0 6.51-.76 9.13-2.28a15.71 15.71 0 0 0 6.21-6.94h14.7c-2.13 6.51-5.87 11.6-11.23 15.25-5.3 3.6-11.54 5.39-18.72 5.39-6.1 0-11.6-1.37-16.53-4.11a31.18 31.18 0 0 1-11.6-11.6C2.33 47.9.93 42.3.93 36.04Zm98.05-19.36c3.83 0 7.24.85 10.23 2.56a16.7 16.7 0 0 1 6.94 7.4c1.7 3.22 2.56 7.12 2.56 11.69V68h-12.79V40.05c0-4.02-1-7.1-3.01-9.22-2.01-2.2-4.75-3.3-8.22-3.3-3.54 0-6.34 1.1-8.4 3.3-2.02 2.13-3.02 5.2-3.02 9.22V68H70.48V.41h12.79v23.3a16.3 16.3 0 0 1 6.58-5.12 21.33 21.33 0 0 1 9.13-1.92Zm24.94 25.85c0-5.12 1.01-9.65 3.02-13.61 2.07-3.96 4.84-7 8.31-9.13a22.37 22.37 0 0 1 11.78-3.2c3.78 0 7.06.76 9.87 2.28a19.99 19.99 0 0 1 6.85 5.76V17.4h12.87V68h-12.87v-7.4a19.32 19.32 0 0 1-6.85 5.94 20.89 20.89 0 0 1-9.96 2.28c-4.26 0-8.16-1.1-11.69-3.29a23.53 23.53 0 0 1-8.31-9.22 30.45 30.45 0 0 1-3.02-13.8Zm39.83.18c0-3.1-.61-5.75-1.83-7.95a12.5 12.5 0 0 0-4.93-5.11 12.93 12.93 0 0 0-6.67-1.83c-2.37 0-4.57.58-6.58 1.74a13.4 13.4 0 0 0-4.93 5.11 15.93 15.93 0 0 0-1.82 7.86 17 17 0 0 0 1.82 8.04 14.03 14.03 0 0 0 4.93 5.2 12.77 12.77 0 0 0 6.58 1.83c2.38 0 4.6-.58 6.67-1.74a13.29 13.29 0 0 0 4.93-5.11 16.68 16.68 0 0 0 1.83-8.04Zm36.6-14.8v24.48c0 1.7.4 2.96 1.18 3.75.86.73 2.26 1.1 4.2 1.1h5.94V68h-8.03c-10.78 0-16.17-5.24-16.17-15.7V27.9h-6.03V17.4h6.03V4.9h12.88v12.5h11.32v10.5h-11.32ZM230 24.7a19.1 19.1 0 0 1 6.76-5.75 20.56 20.56 0 0 1 9.96-2.37 21.9 21.9 0 0 1 20 12.33c2.07 3.9 3.1 8.43 3.1 13.6 0 5.18-1.03 9.78-3.1 13.8a22.62 22.62 0 0 1-8.31 9.22 21.44 21.44 0 0 1-11.7 3.3c-3.7 0-7-.77-9.86-2.3a21.2 21.2 0 0 1-6.85-5.75v31.33h-12.78v-74.7H230v7.3Zm26.76 17.82c0-3.05-.64-5.66-1.91-7.86a12.95 12.95 0 0 0-18.08-5.02 13.3 13.3 0 0 0-4.94 5.11A16.46 16.46 0 0 0 230 42.7c0 3.05.61 5.7 1.83 7.95a14.01 14.01 0 0 0 4.93 5.2 13.28 13.28 0 0 0 6.58 1.74 13.13 13.13 0 0 0 11.5-7.03 16.03 16.03 0 0 0 1.92-8.04Zm15.41 0c0-5.12 1-9.65 3.02-13.61 2.07-3.96 4.84-7 8.3-9.13a22.37 22.37 0 0 1 11.8-3.2c3.77 0 7.05.76 9.85 2.28a19.99 19.99 0 0 1 6.86 5.76V17.4h12.87V68H312v-7.4a19.32 19.32 0 0 1-6.85 5.94 20.89 20.89 0 0 1-9.95 2.28c-4.26 0-8.16-1.1-11.7-3.29a23.53 23.53 0 0 1-8.3-9.22 30.45 30.45 0 0 1-3.02-13.8Zm39.82.18c0-3.1-.6-5.75-1.82-7.95a12.5 12.5 0 0 0-4.93-5.11 12.93 12.93 0 0 0-6.67-1.83c-2.38 0-4.57.58-6.58 1.74a13.4 13.4 0 0 0-4.93 5.11 15.93 15.93 0 0 0-1.82 7.86 17 17 0 0 0 1.82 8.04 14.03 14.03 0 0 0 4.93 5.2 12.77 12.77 0 0 0 6.58 1.83c2.37 0 4.6-.58 6.67-1.74a13.29 13.29 0 0 0 4.93-5.11 16.68 16.68 0 0 0 1.82-8.04Zm18.43-.18c0-5.12 1-9.65 3.01-13.61 2.07-3.96 4.88-7 8.4-9.13a22.37 22.37 0 0 1 11.79-3.2c3.29 0 6.42.73 9.4 2.2a18.42 18.42 0 0 1 7.13 5.65V.41h12.97V68h-12.97v-7.49a17.3 17.3 0 0 1-6.67 6.03 20.89 20.89 0 0 1-9.95 2.28c-4.26 0-8.16-1.1-11.7-3.29a23.29 23.29 0 0 1-8.4-9.22c-2-4.02-3.01-8.62-3.01-13.8Zm39.82.18c0-3.1-.6-5.75-1.82-7.95a12.5 12.5 0 0 0-4.94-5.11 12.93 12.93 0 0 0-6.66-1.83c-2.38 0-4.57.58-6.58 1.74a13.3 13.3 0 0 0-4.93 5.11 15.93 15.93 0 0 0-1.83 7.86 17 17 0 0 0 1.83 8.04 14.01 14.01 0 0 0 4.93 5.2 12.77 12.77 0 0 0 6.58 1.83c2.37 0 4.6-.58 6.66-1.74a13.29 13.29 0 0 0 4.94-5.11 16.67 16.67 0 0 0 1.82-8.04Zm78.91 13.15h-25.39L419.56 68h-13.42l22.92-63.84h14.89L466.87 68h-13.51l-4.2-12.15Zm-3.47-10.23-9.22-26.67-9.22 26.67h18.44Zm38.9-41.37V68h-12.8V4.25h12.8Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function Logo(props: JSX.IntrinsicElements["svg"]) {
|
||||
return (
|
||||
<svg
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 630 117"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M117 26.7A26.7 26.7 0 0 0 90.3 0H27.09A26.7 26.7 0 0 0 .38 26.7v63.23a26.7 26.7 0 0 0 26.7 26.7h66.74a23.18 23.18 0 0 0 23.19-23.19V26.7ZM35.5 70.26V11.24h-8.42A15.46 15.46 0 0 0 11.62 26.7v43.56h23.89ZM11.63 81.5h59.02v23.89H27.08a15.46 15.46 0 0 1-15.46-15.46V81.5Zm94.14-46.37H46.74V11.24h43.57c8.53 0 15.45 6.92 15.45 15.46v8.43Zm-23.88 70.25V46.37h23.88v47.07c0 6.6-5.34 11.95-11.94 11.95H81.88Z"
|
||||
fill="url(#a)"
|
||||
/>
|
||||
<path
|
||||
d="M146 58.62c0-6.27 1.4-11.87 4.2-16.8 2.86-5 6.73-8.86 11.6-11.6a32.88 32.88 0 0 1 16.53-4.2c7.13 0 13.37 1.82 18.72 5.47a28.72 28.72 0 0 1 11.24 15.17h-14.7a15.16 15.16 0 0 0-6.22-6.85 17.84 17.84 0 0 0-9.13-2.29c-3.71 0-7.03.88-9.96 2.65a17.86 17.86 0 0 0-6.75 7.3c-1.59 3.17-2.38 6.89-2.38 11.15a25 25 0 0 0 2.38 11.14 18.5 18.5 0 0 0 6.75 7.4 19.39 19.39 0 0 0 9.96 2.56c3.47 0 6.52-.76 9.13-2.29a15.72 15.72 0 0 0 6.22-6.94h14.7c-2.13 6.52-5.88 11.6-11.23 15.26-5.3 3.59-11.54 5.38-18.73 5.38-6.09 0-11.6-1.37-16.53-4.1a31.19 31.19 0 0 1-11.6-11.6c-2.8-4.94-4.2-10.54-4.2-16.81Zm98.05-19.36c3.84 0 7.25.85 10.23 2.55a16.71 16.71 0 0 1 6.94 7.4c1.7 3.23 2.56 7.13 2.56 11.7v29.68H251V62.64c0-4.02-1.01-7.1-3.02-9.23-2-2.19-4.75-3.28-8.22-3.28-3.53 0-6.33 1.1-8.4 3.28-2.01 2.14-3.02 5.21-3.02 9.23v27.95h-12.78V23h12.78v23.29a16.3 16.3 0 0 1 6.58-5.11 21.34 21.34 0 0 1 9.13-1.92ZM269 65.1c0-5.11 1-9.65 3.01-13.6 2.07-3.96 4.84-7 8.31-9.14a22.36 22.36 0 0 1 11.79-3.2c3.77 0 7.06.77 9.86 2.29a20 20 0 0 1 6.85 5.75V40h12.88v50.6h-12.88v-7.4a19.32 19.32 0 0 1-6.85 5.94 20.88 20.88 0 0 1-9.95 2.28c-4.27 0-8.16-1.1-11.7-3.29a23.52 23.52 0 0 1-8.3-9.22C270 74.88 269 70.28 269 65.1Zm39.82.19c0-3.1-.6-5.76-1.83-7.95a12.5 12.5 0 0 0-4.93-5.11 12.93 12.93 0 0 0-6.67-1.83 12.92 12.92 0 0 0-11.5 6.85 15.93 15.93 0 0 0-1.83 7.85 17 17 0 0 0 1.83 8.04 14.03 14.03 0 0 0 4.93 5.2 12.77 12.77 0 0 0 6.57 1.83c2.38 0 4.6-.57 6.67-1.73a13.29 13.29 0 0 0 4.93-5.12 16.67 16.67 0 0 0 1.83-8.03Zm36.6-14.79v24.47c0 1.7.4 2.95 1.19 3.74.85.73 2.25 1.1 4.2 1.1h5.94v10.78h-8.04c-10.78 0-16.17-5.24-16.17-15.71V50.49h-6.03V40h6.03V27.48h12.88v12.5h11.33V50.5h-11.33Zm29.66-3.2a19.1 19.1 0 0 1 6.76-5.76 20.56 20.56 0 0 1 9.95-2.37 21.9 21.9 0 0 1 20 12.33c2.07 3.9 3.1 8.43 3.1 13.6 0 5.18-1.03 9.78-3.1 13.8-2 3.95-4.78 7.03-8.3 9.22a21.44 21.44 0 0 1-11.7 3.29c-3.71 0-7-.76-9.86-2.28a21.2 21.2 0 0 1-6.85-5.76v31.33h-12.79V39.99h12.79v7.3Zm26.76 17.8c0-3.04-.64-5.66-1.92-7.85a12.95 12.95 0 0 0-18.08-5.02 13.3 13.3 0 0 0-4.94 5.11 16.46 16.46 0 0 0-1.82 7.95c0 3.04.6 5.69 1.82 7.94a14.01 14.01 0 0 0 4.94 5.2 13.28 13.28 0 0 0 6.57 1.74 13.13 13.13 0 0 0 11.5-7.03 16.03 16.03 0 0 0 1.93-8.04Zm15.41 0c0-5.11 1-9.65 3.01-13.6 2.07-3.96 4.84-7 8.31-9.14a22.36 22.36 0 0 1 11.79-3.2c3.77 0 7.06.77 9.86 2.29a20 20 0 0 1 6.85 5.75V40h12.88v50.6h-12.88v-7.4a19.32 19.32 0 0 1-6.85 5.94 20.88 20.88 0 0 1-9.96 2.28c-4.26 0-8.15-1.1-11.69-3.29a23.52 23.52 0 0 1-8.3-9.22c-2.02-4.02-3.02-8.62-3.02-13.8Zm39.82.19c0-3.1-.6-5.76-1.83-7.95a12.5 12.5 0 0 0-4.93-5.11 12.93 12.93 0 0 0-6.67-1.83 12.92 12.92 0 0 0-11.5 6.85 15.93 15.93 0 0 0-1.83 7.85 17 17 0 0 0 1.83 8.04 14.03 14.03 0 0 0 4.93 5.2 12.77 12.77 0 0 0 6.57 1.83c2.38 0 4.6-.57 6.67-1.73a13.29 13.29 0 0 0 4.93-5.12 16.67 16.67 0 0 0 1.83-8.03Zm18.43-.19c0-5.11 1-9.65 3-13.6 2.08-3.96 4.88-7 8.41-9.14a22.36 22.36 0 0 1 11.78-3.2c3.3 0 6.43.74 9.41 2.2a18.43 18.43 0 0 1 7.13 5.66V23h12.96v67.59h-12.97v-7.5a17.36 17.36 0 0 1-6.66 6.04 20.89 20.89 0 0 1-9.96 2.28c-4.26 0-8.16-1.1-11.69-3.29a23.28 23.28 0 0 1-8.4-9.22c-2.01-4.02-3.01-8.62-3.01-13.8Zm39.82.19c0-3.1-.61-5.76-1.83-7.95a12.5 12.5 0 0 0-4.93-5.11 12.93 12.93 0 0 0-6.67-1.83c-2.37 0-4.57.58-6.58 1.74-2 1.15-3.65 2.86-4.93 5.11a15.94 15.94 0 0 0-1.82 7.85c0 3.05.6 5.73 1.82 8.04a14.03 14.03 0 0 0 4.93 5.2 12.77 12.77 0 0 0 6.58 1.83c2.38 0 4.6-.57 6.67-1.73a13.29 13.29 0 0 0 4.93-5.12 16.68 16.68 0 0 0 1.83-8.03Zm78.91 13.15h-25.4l-4.2 12.15h-13.42l22.93-63.85h14.88l22.93 63.85h-13.52l-4.2-12.15Zm-3.47-10.23-9.23-26.67-9.22 26.67h18.45Zm38.89-41.37v63.75h-12.79V26.84h12.8Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="a"
|
||||
x1={59}
|
||||
y1={-12.54}
|
||||
x2={59}
|
||||
y2={116.46}
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="#41E094" />
|
||||
<stop offset={1} stopColor="#27B882" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function LogoIcon(props: JSX.IntrinsicElements["svg"]) {
|
||||
return (
|
||||
<svg
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 118 117"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M117 26.7A26.7 26.7 0 0 0 90.3 0H27.09A26.7 26.7 0 0 0 .38 26.7v63.23a26.7 26.7 0 0 0 26.7 26.7h66.74a23.18 23.18 0 0 0 23.19-23.19V26.7ZM35.5 70.26V11.24h-8.42A15.46 15.46 0 0 0 11.62 26.7v43.56h23.89ZM11.63 81.5h59.02v23.89H27.08a15.46 15.46 0 0 1-15.46-15.46V81.5Zm94.14-46.37H46.74V11.24h43.57c8.53 0 15.45 6.92 15.45 15.46v8.43Zm-23.88 70.25V46.37h23.88v47.07c0 6.6-5.34 11.95-11.94 11.95H81.88Z"
|
||||
fill="url(#a)"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="a"
|
||||
x1={59}
|
||||
y1={-12.54}
|
||||
x2={59}
|
||||
y2={116.46}
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="#41E094" />
|
||||
<stop offset={1} stopColor="#27B882" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
50
src/components/MainLink.tsx
Normal file
50
src/components/MainLink.tsx
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
import { Group, Text, ThemeIcon, UnstyledButton } from "@mantine/core";
|
||||
import { useLiveQuery } from "dexie-react-hooks";
|
||||
import { Chat, db } from "../db";
|
||||
|
||||
interface MainLinkProps {
|
||||
icon: React.ReactNode;
|
||||
color: string;
|
||||
label: string;
|
||||
chat: Chat;
|
||||
}
|
||||
|
||||
export function MainLink({ icon, color, label, chat }: MainLinkProps) {
|
||||
const firstMessage = useLiveQuery(async () => {
|
||||
return (await db.messages.orderBy("createdAt").toArray()).filter(
|
||||
(m) => m.chatId === chat.id
|
||||
)[0];
|
||||
}, [chat]);
|
||||
|
||||
return (
|
||||
<UnstyledButton
|
||||
sx={(theme) => ({
|
||||
// display: "block",
|
||||
width: "100%",
|
||||
padding: theme.spacing.xs,
|
||||
borderRadius: theme.radius.sm,
|
||||
color:
|
||||
theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black,
|
||||
})}
|
||||
>
|
||||
<Group>
|
||||
<ThemeIcon color={color} variant="light">
|
||||
{icon}
|
||||
</ThemeIcon>
|
||||
<Text
|
||||
size="sm"
|
||||
style={{
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap",
|
||||
overflow: "hidden",
|
||||
flex: 1,
|
||||
width: 0,
|
||||
}}
|
||||
>
|
||||
{label} <br />
|
||||
{firstMessage?.content}
|
||||
</Text>
|
||||
</Group>
|
||||
</UnstyledButton>
|
||||
);
|
||||
}
|
||||
28
src/components/MessageItem.tsx
Normal file
28
src/components/MessageItem.tsx
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
import { Card, Flex, Text, ThemeIcon } from "@mantine/core";
|
||||
import { IconUser } from "@tabler/icons-react";
|
||||
import { Message } from "../db";
|
||||
import { CreatePromptModal } from "./CreatePromptModal";
|
||||
import { LogoIcon } from "./Logo";
|
||||
|
||||
import { ScrollIntoView } from "./ScrollIntoView";
|
||||
|
||||
export function MessageItem({ message }: { message: Message }) {
|
||||
return (
|
||||
<ScrollIntoView>
|
||||
<Card withBorder>
|
||||
<Flex gap="sm">
|
||||
{message.role === "user" && (
|
||||
<ThemeIcon color="gray" size="lg">
|
||||
<IconUser size={20} />
|
||||
</ThemeIcon>
|
||||
)}
|
||||
{message.role === "assistant" && <LogoIcon style={{ height: 32 }} />}
|
||||
<Text size="md" sx={{ flex: 1, whiteSpace: "pre-wrap" }}>
|
||||
{message.content}
|
||||
</Text>
|
||||
<CreatePromptModal content={message.content} />
|
||||
</Flex>
|
||||
</Card>
|
||||
</ScrollIntoView>
|
||||
);
|
||||
}
|
||||
127
src/components/Prompts.tsx
Normal file
127
src/components/Prompts.tsx
Normal file
|
|
@ -0,0 +1,127 @@
|
|||
import { ActionIcon, Box, Flex, Group, Text, Tooltip } from "@mantine/core";
|
||||
import { IconPlayerPlay } from "@tabler/icons-react";
|
||||
import { useNavigate } from "@tanstack/react-location";
|
||||
import { useLiveQuery } from "dexie-react-hooks";
|
||||
import { nanoid } from "nanoid";
|
||||
import { db } from "../db";
|
||||
import { createChatCompletion } from "../utils/openai";
|
||||
import { DeletePromptModal } from "./DeletePromptModal";
|
||||
import { EditPromptModal } from "./EditPromptModal";
|
||||
|
||||
export function Prompts({ onPlay }: { onPlay: () => void }) {
|
||||
const navigate = useNavigate();
|
||||
const prompts = useLiveQuery(() =>
|
||||
db.prompts.orderBy("createdAt").reverse().toArray()
|
||||
);
|
||||
const apiKey = useLiveQuery(async () => {
|
||||
return (await db.settings.where({ id: "general" }).first())?.openAiApiKey;
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
{prompts?.map((prompt) => (
|
||||
<Flex
|
||||
key={prompt.id}
|
||||
sx={(theme) => ({
|
||||
marginTop: 1,
|
||||
padding: theme.spacing.xs,
|
||||
"&:hover": {
|
||||
backgroundColor:
|
||||
theme.colorScheme === "dark"
|
||||
? theme.colors.dark[6]
|
||||
: theme.colors.gray[1],
|
||||
},
|
||||
})}
|
||||
>
|
||||
<Box
|
||||
sx={(theme) => ({
|
||||
flexGrow: 1,
|
||||
width: 0,
|
||||
fontSize: theme.fontSizes.sm,
|
||||
})}
|
||||
>
|
||||
<Text
|
||||
weight={500}
|
||||
sx={{
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
{prompt.title}
|
||||
</Text>
|
||||
<Text
|
||||
color="dimmed"
|
||||
sx={{
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
{prompt.content}
|
||||
</Text>
|
||||
</Box>
|
||||
<Group spacing="none">
|
||||
<Tooltip label="New Chat From Prompt">
|
||||
<ActionIcon
|
||||
size="lg"
|
||||
onClick={async () => {
|
||||
if (!apiKey) return;
|
||||
const id = nanoid();
|
||||
await db.chats.add({
|
||||
id,
|
||||
description: "New Chat",
|
||||
totalTokens: 0,
|
||||
createdAt: new Date(),
|
||||
});
|
||||
await db.messages.add({
|
||||
id: nanoid(),
|
||||
chatId: id,
|
||||
content: prompt.content,
|
||||
role: "user",
|
||||
createdAt: new Date(),
|
||||
});
|
||||
navigate({ to: `/chats/${id}` });
|
||||
onPlay();
|
||||
|
||||
const result = await createChatCompletion(apiKey, [
|
||||
{
|
||||
role: "system",
|
||||
content:
|
||||
"You are ChatGPT, a large language model trained by OpenAI.",
|
||||
},
|
||||
{ role: "user", content: prompt.content },
|
||||
]);
|
||||
|
||||
const resultDescription =
|
||||
result.data.choices[0].message?.content;
|
||||
await db.messages.add({
|
||||
id: nanoid(),
|
||||
chatId: id,
|
||||
content: resultDescription ?? "unknown reponse",
|
||||
role: "assistant",
|
||||
createdAt: new Date(),
|
||||
});
|
||||
|
||||
if (result.data.usage) {
|
||||
await db.chats.where({ id: id }).modify((chat) => {
|
||||
if (chat.totalTokens) {
|
||||
chat.totalTokens += result.data.usage!.total_tokens;
|
||||
} else {
|
||||
chat.totalTokens = result.data.usage!.total_tokens;
|
||||
}
|
||||
});
|
||||
}
|
||||
}}
|
||||
>
|
||||
<IconPlayerPlay size={20} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
<EditPromptModal prompt={prompt} />
|
||||
<DeletePromptModal prompt={prompt} />
|
||||
</Group>
|
||||
</Flex>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
14
src/components/ScrollIntoView.tsx
Normal file
14
src/components/ScrollIntoView.tsx
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import { ReactNode } from "react";
|
||||
|
||||
export function ScrollIntoView({ children }: { children: ReactNode }) {
|
||||
return (
|
||||
<div
|
||||
ref={(node) => {
|
||||
if (!node) return;
|
||||
node.scrollIntoView({ behavior: "smooth" });
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
106
src/components/SettingsModal.tsx
Normal file
106
src/components/SettingsModal.tsx
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
import {
|
||||
Anchor,
|
||||
Button,
|
||||
Group,
|
||||
List,
|
||||
Modal,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
} from "@mantine/core";
|
||||
import { useDisclosure } from "@mantine/hooks";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
import { useLiveQuery } from "dexie-react-hooks";
|
||||
import { cloneElement, ReactElement, useEffect, useState } from "react";
|
||||
import { db } from "../db";
|
||||
import { checkOpenAIKey } from "../utils/openai";
|
||||
|
||||
export function SettingsModal({ children }: { children: ReactElement }) {
|
||||
const [opened, { open, close }] = useDisclosure(false);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
const [value, setValue] = useState("");
|
||||
|
||||
const apiKey = useLiveQuery(async () => {
|
||||
return (await db.settings.where({ id: "general" }).toArray())[0];
|
||||
});
|
||||
useEffect(() => {
|
||||
if (!apiKey?.openAiApiKey) return;
|
||||
setValue(apiKey.openAiApiKey);
|
||||
}, [apiKey]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{cloneElement(children, { onClick: open })}
|
||||
<Modal opened={opened} onClose={close} title="Settings" size="lg">
|
||||
<Stack>
|
||||
<form
|
||||
onSubmit={async (event) => {
|
||||
try {
|
||||
setSubmitting(true);
|
||||
event.preventDefault();
|
||||
await checkOpenAIKey(value);
|
||||
await db.settings.where({ id: "general" }).modify((apiKey) => {
|
||||
apiKey.openAiApiKey = value;
|
||||
console.log(apiKey);
|
||||
});
|
||||
notifications.show({
|
||||
title: "Saved",
|
||||
message: "Your OpenAI Key has been saved.",
|
||||
});
|
||||
} catch (error: any) {
|
||||
if (error.toJSON().message === "Network Error") {
|
||||
notifications.show({
|
||||
title: "Error",
|
||||
color: "red",
|
||||
message: "No internet connection.",
|
||||
});
|
||||
} else {
|
||||
notifications.show({
|
||||
title: "Error",
|
||||
color: "red",
|
||||
message: "Your OpenAI Key is invalid.",
|
||||
});
|
||||
}
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Group align="end">
|
||||
<TextInput
|
||||
label="OpenAI API Key"
|
||||
placeholder="sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
|
||||
sx={{ flex: 1 }}
|
||||
value={value}
|
||||
onChange={(event) => setValue(event.currentTarget.value)}
|
||||
formNoValidate
|
||||
/>
|
||||
<Button type="submit" loading={submitting}>
|
||||
Save
|
||||
</Button>
|
||||
</Group>
|
||||
</form>
|
||||
<List withPadding>
|
||||
<List.Item>
|
||||
<Text size="sm">
|
||||
<Anchor
|
||||
href="https://platform.openai.com/account/api-keys"
|
||||
target="_blank"
|
||||
>
|
||||
Get your OpenAI API key
|
||||
</Anchor>
|
||||
</Text>
|
||||
</List.Item>
|
||||
<List.Item>
|
||||
<Text size="sm" color="dimmed">
|
||||
The API Key is stored locally on your browser and never sent
|
||||
anywhere else.
|
||||
</Text>
|
||||
</List.Item>
|
||||
</List>
|
||||
</Stack>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
54
src/db/index.ts
Normal file
54
src/db/index.ts
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
import Dexie, { Table } from "dexie";
|
||||
import "dexie-export-import";
|
||||
|
||||
export interface Chat {
|
||||
id: string;
|
||||
description: string;
|
||||
totalTokens: number;
|
||||
createdAt: Date;
|
||||
}
|
||||
|
||||
export interface Message {
|
||||
id: string;
|
||||
chatId: string;
|
||||
role: "system" | "assistant" | "user";
|
||||
content: string;
|
||||
createdAt: Date;
|
||||
}
|
||||
|
||||
export interface Prompt {
|
||||
id: string;
|
||||
title: string;
|
||||
content: string;
|
||||
createdAt: Date;
|
||||
}
|
||||
|
||||
export interface Settings {
|
||||
id: "general";
|
||||
openAiApiKey?: string;
|
||||
}
|
||||
|
||||
export class Database extends Dexie {
|
||||
chats!: Table<Chat>;
|
||||
messages!: Table<Message>;
|
||||
prompts!: Table<Prompt>;
|
||||
settings!: Table<Settings>;
|
||||
|
||||
constructor() {
|
||||
super("chatpad");
|
||||
this.version(2).stores({
|
||||
chats: "id, createdAt",
|
||||
messages: "id, chatId, createdAt",
|
||||
prompts: "id, createdAt",
|
||||
settings: "id",
|
||||
});
|
||||
|
||||
this.on("populate", async () => {
|
||||
db.settings.add({
|
||||
id: "general",
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export const db = new Database();
|
||||
8
src/hooks/useApiKey.ts
Normal file
8
src/hooks/useApiKey.ts
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
import { useLocalStorage } from "@mantine/hooks";
|
||||
|
||||
export function useApiKey() {
|
||||
return useLocalStorage({
|
||||
key: "openai-key",
|
||||
defaultValue: "",
|
||||
});
|
||||
}
|
||||
7
src/hooks/useChatId.ts
Normal file
7
src/hooks/useChatId.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import { useMatchRoute } from "@tanstack/react-location";
|
||||
|
||||
export function useChatId() {
|
||||
const matchRoute = useMatchRoute();
|
||||
const match = matchRoute({ to: "/chats/:chatId" });
|
||||
return match?.chatId;
|
||||
}
|
||||
28
src/index.html
Normal file
28
src/index.html
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Chatpad AI</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="A free, open-source, and slick UI for ChatGPT"
|
||||
/>
|
||||
<meta
|
||||
name="viewport"
|
||||
content="minimum-scale=1, initial-scale=1, width=device-width"
|
||||
/>
|
||||
<link rel="icon" href="./assets/favicon.png" />
|
||||
<style>
|
||||
.app-region-drag {
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
.app-region-no-drag {
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="index.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
6
src/index.tsx
Normal file
6
src/index.tsx
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
import { createRoot } from "react-dom/client";
|
||||
import { App } from "./components/App";
|
||||
|
||||
const container = document.getElementById("app");
|
||||
const root = createRoot(container!);
|
||||
root.render(<App />);
|
||||
230
src/routes/ChatRoute.tsx
Normal file
230
src/routes/ChatRoute.tsx
Normal file
|
|
@ -0,0 +1,230 @@
|
|||
import {
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Container,
|
||||
Flex,
|
||||
MediaQuery,
|
||||
Skeleton,
|
||||
Stack,
|
||||
Textarea,
|
||||
} from "@mantine/core";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
import { useLiveQuery } from "dexie-react-hooks";
|
||||
import { nanoid } from "nanoid";
|
||||
import { useState } from "react";
|
||||
import { AiOutlineSend } from "react-icons/ai";
|
||||
import { MessageItem } from "../components/MessageItem";
|
||||
import { db } from "../db";
|
||||
import { useChatId } from "../hooks/useChatId";
|
||||
import { characters } from "../utils/characters";
|
||||
import { createChatCompletion } from "../utils/openai";
|
||||
|
||||
export function ChatRoute() {
|
||||
const chatId = useChatId();
|
||||
const apiKey = useLiveQuery(async () => {
|
||||
return (await db.settings.where({ id: "general" }).first())?.openAiApiKey;
|
||||
});
|
||||
const messages = useLiveQuery(() => {
|
||||
if (!chatId) return [];
|
||||
return db.messages.where("chatId").equals(chatId).sortBy("createdAt");
|
||||
}, [chatId]);
|
||||
const [content, setContent] = useState("");
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
const chat = useLiveQuery(async () => {
|
||||
if (!chatId) return null;
|
||||
return db.chats.get(chatId);
|
||||
}, [chatId]);
|
||||
|
||||
const [character, setCharacter] = useState(0);
|
||||
|
||||
const submit = async () => {
|
||||
if (submitting) return;
|
||||
|
||||
if (!chatId) {
|
||||
notifications.show({
|
||||
title: "Error",
|
||||
color: "red",
|
||||
message: "chatId is not defined. Please create a chat to get started.",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (!apiKey) {
|
||||
notifications.show({
|
||||
title: "Error",
|
||||
color: "red",
|
||||
message: "OpenAI API Key is not defined. Please set your API Key",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setSubmitting(true);
|
||||
|
||||
await db.messages.add({
|
||||
id: nanoid(),
|
||||
chatId,
|
||||
content,
|
||||
role: "user",
|
||||
createdAt: new Date(),
|
||||
});
|
||||
setContent("");
|
||||
|
||||
const result = await createChatCompletion(apiKey, [
|
||||
{
|
||||
role: "system",
|
||||
content: `You are a ${characters[character].name}.${characters[character].description}`,
|
||||
},
|
||||
...(messages ?? []).map((message) => ({
|
||||
role: message.role,
|
||||
content: message.content,
|
||||
})),
|
||||
{ role: "user", content },
|
||||
]);
|
||||
|
||||
const assistantMessage = result.data.choices[0].message?.content;
|
||||
if (result.data.usage) {
|
||||
await db.chats.where({ id: chatId }).modify((chat) => {
|
||||
if (chat.totalTokens) {
|
||||
chat.totalTokens += result.data.usage!.total_tokens;
|
||||
} else {
|
||||
chat.totalTokens = result.data.usage!.total_tokens;
|
||||
}
|
||||
});
|
||||
}
|
||||
setSubmitting(false);
|
||||
|
||||
await db.messages.add({
|
||||
id: nanoid(),
|
||||
chatId,
|
||||
content: assistantMessage ?? "unknown reponse",
|
||||
role: "assistant",
|
||||
createdAt: new Date(),
|
||||
});
|
||||
|
||||
if (chat?.description === "New Chat") {
|
||||
const messages = await db.messages
|
||||
.where({ chatId })
|
||||
.sortBy("createdAt");
|
||||
const createChatDscription = await createChatCompletion(apiKey, [
|
||||
{
|
||||
role: "system",
|
||||
content: `You are a ${characters[character].name}.${characters[character].description}`,
|
||||
},
|
||||
...(messages ?? []).map((message) => ({
|
||||
role: message.role,
|
||||
content: message.content,
|
||||
})),
|
||||
{
|
||||
role: "user",
|
||||
content:
|
||||
"What would be a short and relevant title for this chat ? You must strictly answer with only the title, no other text is allowed.",
|
||||
},
|
||||
]);
|
||||
const chatDescription =
|
||||
createChatDscription.data.choices[0].message?.content;
|
||||
|
||||
if (createChatDscription.data.usage) {
|
||||
await db.chats.where({ id: chatId }).modify((chat) => {
|
||||
chat.description = chatDescription ?? "New Chat";
|
||||
if (chat.totalTokens) {
|
||||
chat.totalTokens += createChatDscription.data.usage!.total_tokens;
|
||||
} else {
|
||||
chat.totalTokens = createChatDscription.data.usage!.total_tokens;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
} catch (error: any) {
|
||||
if (error.toJSON().message === "Network Error") {
|
||||
notifications.show({
|
||||
title: "Error",
|
||||
color: "red",
|
||||
message: "No internet connection.",
|
||||
});
|
||||
} else {
|
||||
notifications.show({
|
||||
title: "Error",
|
||||
color: "red",
|
||||
message:
|
||||
"You OpenAI API Key is not active or has expired. Please set a new API Key",
|
||||
});
|
||||
}
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (!chatId) return null;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Container pt="xl" pb={100}>
|
||||
<Stack spacing="xs">
|
||||
{messages?.map((message) => (
|
||||
<MessageItem key={message.id} message={message} />
|
||||
))}
|
||||
</Stack>
|
||||
{submitting && (
|
||||
<Card withBorder mt="xs">
|
||||
<Skeleton height={8} radius="xl" />
|
||||
<Skeleton height={8} mt={6} radius="xl" />
|
||||
<Skeleton height={8} mt={6} radius="xl" />
|
||||
<Skeleton height={8} mt={6} radius="xl" />
|
||||
<Skeleton height={8} mt={6} width="70%" radius="xl" />
|
||||
</Card>
|
||||
)}
|
||||
</Container>
|
||||
<Box
|
||||
py="lg"
|
||||
sx={(theme) => ({
|
||||
position: "fixed",
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
[`@media (min-width: ${theme.breakpoints.lg})`]: {
|
||||
left: 300,
|
||||
},
|
||||
backgroundColor:
|
||||
theme.colorScheme === "dark"
|
||||
? theme.colors.dark[9]
|
||||
: theme.colors.gray[0],
|
||||
})}
|
||||
>
|
||||
<Container>
|
||||
<Flex gap="sm">
|
||||
<Textarea
|
||||
key={chatId}
|
||||
style={{ flex: 1 }}
|
||||
placeholder="Your message here..."
|
||||
autosize
|
||||
autoFocus
|
||||
disabled={submitting}
|
||||
minRows={1}
|
||||
value={content}
|
||||
onChange={(event) => setContent(event.currentTarget.value)}
|
||||
onKeyDown={async (event) => {
|
||||
if (event.code === "Enter" && !event.shiftKey) {
|
||||
event.preventDefault();
|
||||
submit();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<MediaQuery largerThan="sm" styles={{ display: "none" }}>
|
||||
<Button
|
||||
h="auto"
|
||||
onClick={() => {
|
||||
submit();
|
||||
}}
|
||||
>
|
||||
<AiOutlineSend />
|
||||
</Button>
|
||||
</MediaQuery>
|
||||
</Flex>
|
||||
</Container>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
52
src/routes/DataRoute.tsx
Normal file
52
src/routes/DataRoute.tsx
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
import { Button, Container, Group } from "@mantine/core";
|
||||
import download from "downloadjs";
|
||||
import { db } from "../db";
|
||||
|
||||
export function DataRoute() {
|
||||
return (
|
||||
<Container>
|
||||
<Group>
|
||||
<Button
|
||||
onClick={async () => {
|
||||
const blob = await db.export();
|
||||
download(
|
||||
blob,
|
||||
`chatpad-export-${new Date().toLocaleString()}.json`,
|
||||
"application/json"
|
||||
);
|
||||
}}
|
||||
>
|
||||
Export Data
|
||||
</Button>
|
||||
<input
|
||||
id="file-upload-btn"
|
||||
type="file"
|
||||
onChange={async (e) => {
|
||||
const file = e.currentTarget.files?.[0];
|
||||
if (!file) return;
|
||||
await db.import(file, {
|
||||
acceptNameDiff: true,
|
||||
overwriteValues: true,
|
||||
acceptMissingTables: true,
|
||||
clearTablesBeforeImport: true,
|
||||
});
|
||||
}}
|
||||
accept="application/json"
|
||||
hidden
|
||||
/>
|
||||
<Button component="label" htmlFor="file-upload-btn">
|
||||
Import Data
|
||||
</Button>
|
||||
<Button
|
||||
onClick={async () => {
|
||||
await db.delete();
|
||||
localStorage.clear();
|
||||
window.location.assign("/");
|
||||
}}
|
||||
>
|
||||
Delete Data
|
||||
</Button>
|
||||
</Group>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
101
src/routes/IndexRoute.tsx
Normal file
101
src/routes/IndexRoute.tsx
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
import {
|
||||
Button,
|
||||
Center,
|
||||
Container,
|
||||
Group,
|
||||
SimpleGrid,
|
||||
Text,
|
||||
ThemeIcon,
|
||||
} from "@mantine/core";
|
||||
import {
|
||||
IconCloudDownload,
|
||||
IconCurrencyDollar,
|
||||
IconKey,
|
||||
IconLock,
|
||||
IconNorthStar,
|
||||
} from "@tabler/icons-react";
|
||||
import { useLiveQuery } from "dexie-react-hooks";
|
||||
import { Logo } from "../components/Logo";
|
||||
import { SettingsModal } from "../components/SettingsModal";
|
||||
import { db } from "../db";
|
||||
|
||||
export function IndexRoute() {
|
||||
const settings = useLiveQuery(() => db.settings.get("general"));
|
||||
const { openAiApiKey } = settings ?? {};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Center py="xl" sx={{ height: "100%" }}>
|
||||
<Container size="sm">
|
||||
<Text>
|
||||
<Logo style={{ maxWidth: 240 }} />
|
||||
</Text>
|
||||
<Text mt={4} size="xl">
|
||||
Not just another ChatGPT user-interface!
|
||||
</Text>
|
||||
<SimpleGrid
|
||||
mt={50}
|
||||
cols={3}
|
||||
spacing={30}
|
||||
breakpoints={[{ maxWidth: "md", cols: 1 }]}
|
||||
>
|
||||
{features.map((feature) => (
|
||||
<div key={feature.title}>
|
||||
<ThemeIcon variant="outline" size={50} radius={50}>
|
||||
<feature.icon size={26} stroke={1.5} />
|
||||
</ThemeIcon>
|
||||
<Text mt="sm" mb={7}>
|
||||
{feature.title}
|
||||
</Text>
|
||||
<Text size="sm" color="dimmed" sx={{ lineHeight: 1.6 }}>
|
||||
{feature.description}
|
||||
</Text>
|
||||
</div>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
<Group mt={50}>
|
||||
<SettingsModal>
|
||||
<Button
|
||||
size="md"
|
||||
variant={openAiApiKey ? "light" : "filled"}
|
||||
leftIcon={<IconKey size={20} />}
|
||||
>
|
||||
{openAiApiKey ? "Change OpenAI Key" : "Enter OpenAI Key"}
|
||||
</Button>
|
||||
</SettingsModal>
|
||||
<Button
|
||||
component="a"
|
||||
href="https://download.chatpad.ai/"
|
||||
size="md"
|
||||
variant="outline"
|
||||
leftIcon={<IconCloudDownload size={20} />}
|
||||
>
|
||||
Download Desktop App
|
||||
</Button>
|
||||
</Group>
|
||||
</Container>
|
||||
</Center>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const features = [
|
||||
{
|
||||
icon: IconCurrencyDollar,
|
||||
title: "Free and open source",
|
||||
description:
|
||||
"This app is provided for free and the source code is available on GitHub.",
|
||||
},
|
||||
{
|
||||
icon: IconLock,
|
||||
title: "Privacy focused",
|
||||
description:
|
||||
"No tracking, no cookies, no bullshit. All your data is stored locally.",
|
||||
},
|
||||
{
|
||||
icon: IconNorthStar,
|
||||
title: "Best experience",
|
||||
description:
|
||||
"Crafted with love and care to provide the best experience possible.",
|
||||
},
|
||||
];
|
||||
38
src/utils/characters.ts
Normal file
38
src/utils/characters.ts
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
export const characters = [
|
||||
{
|
||||
name: "ChatGPT",
|
||||
description: "You are ChatGPT, a large language model trained by OpenAI.",
|
||||
},
|
||||
{
|
||||
name: "Standup Comedian",
|
||||
description: "A standup comedian who can make you laugh with their jokes and humor.",
|
||||
},
|
||||
{
|
||||
name: "Life Coach",
|
||||
description: "A life coach who can help you set and achieve personal and professional goals.",
|
||||
},
|
||||
{
|
||||
name: "Career Counselor",
|
||||
description: "A career counselor who can help you with anything related to your career, from job searching to career planning.",
|
||||
},
|
||||
{
|
||||
name: "Nutritionist",
|
||||
description: "A nutritionist who can help you with your dietary needs by providing recipes, advice on healthy eating habits, and dietary recommendations.",
|
||||
},
|
||||
{
|
||||
name: "Product Manager",
|
||||
description: "A product manager who can oversee the development and marketing of a product, identify customer needs, and work with engineers and designers to create a product roadmap.",
|
||||
},
|
||||
{
|
||||
name: "Personal Trainer",
|
||||
description: "A personal trainer who can help you stay fit and improve your health by creating personalized fitness plans and providing workout routines.",
|
||||
},
|
||||
{
|
||||
name: "Life Hacker",
|
||||
description: "A life hacker who can provide useful tips and tricks to help you optimize your daily routines, save time, and increase productivity.",
|
||||
},
|
||||
{
|
||||
name: "Travel Advisor",
|
||||
description: "A travel advisor who can suggest travel destinations, provide recommendations on transportation and accommodations, and help you plan your itinerary based on your preferences and budget.",
|
||||
},
|
||||
]
|
||||
29
src/utils/openai.ts
Normal file
29
src/utils/openai.ts
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
import { ChatCompletionRequestMessage, Configuration, OpenAIApi } from "openai";
|
||||
|
||||
function getClient(apiKey: string) {
|
||||
const configuration = new Configuration({
|
||||
apiKey,
|
||||
});
|
||||
return new OpenAIApi(configuration);
|
||||
}
|
||||
|
||||
export async function createChatCompletion(
|
||||
apiKey: string,
|
||||
messages: ChatCompletionRequestMessage[]
|
||||
) {
|
||||
const client = getClient(apiKey);
|
||||
return client.createChatCompletion({
|
||||
model: "gpt-3.5-turbo",
|
||||
stream: false,
|
||||
messages,
|
||||
});
|
||||
}
|
||||
|
||||
export async function checkOpenAIKey(apiKey: string) {
|
||||
return createChatCompletion(apiKey, [
|
||||
{
|
||||
role: "user",
|
||||
content: "hello",
|
||||
},
|
||||
]);
|
||||
}
|
||||
10
tsconfig.json
Normal file
10
tsconfig.json
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"include": ["src/**/*"],
|
||||
"compilerOptions": {
|
||||
"jsx": "react-jsx",
|
||||
"esModuleInterop": true,
|
||||
"lib": ["es2018", "dom"],
|
||||
"strict": true,
|
||||
"skipLibCheck": true
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue