Comments (7)
onSubmit={async value => {
await append({
id,
content: value,
role: 'user'
})
if (pathname !== `/chat/${id}`) {
await router.push(`/chat/${id}`)
await router.refresh()
}
}}
This works but it is too hacky I guess :(
from ai-chatbot.
I believe the issue of not being able to initiate new empty chats could potentially be resolved by executing
router.replace(`/chat/${id}`)
in the onSubmit
function of the PromptForm
. Would that be a good solution?
upd: neither push nor replace were a good solution, but promising maybe? 🥲
from ai-chatbot.
How did you get that pathname
? Can you show the full file you made the changes? I'm facing the same issue. Also, if you could make a pull request it would be awesome.
from ai-chatbot.
How did you get that
pathname
? Can you show the full file you made the changes?
I get pathname here:
https://github.com/eyenalxai/omuwabuzi/blob/bd7ce3e3daf944cc110e0f6fc95ab7a4b0a8afce/components/chat-panel.tsx#L36
And use it there:
https://github.com/eyenalxai/omuwabuzi/blob/bd7ce3e3daf944cc110e0f6fc95ab7a4b0a8afce/components/chat-panel.tsx#L73
Also, if you could make a pull request it would be awesome.
I don't think that solution is good enough because it leads to resetting the scroll position and other inconveniences.
from ai-chatbot.
Newly initiated chats do not appear in the chats list until the page is refreshed, but you can still create the new chat.
A second new chat can't be created without a page refresh following the creation of the first one.
video.mp4
I took a look at this issue and compared the current behavior to how chatgpt implements the same flow that you showed in the video and came up with a simple solution that feels intuitive, non hacky and looks more like the way chatgpt does it:
When we click on new chat, set thehref
to a new/chat/id
which currently only redirects to/
. This allows the creation of a new chat with a new id.And then reload the chat history to show the previous chat, if there was one- Actually, an even easier solution is to copy what was done when a chat is deleted, by replacing the Link with a button:
<button
onClick={() => {
router.refresh()
router.push('/')
}}
...
- This still doesn't fix the issue of the current chat not being added to the history
I'll try to open a PR on this issue today.
from ai-chatbot.
Newly initiated chats do not appear in the chats list until the page is refreshed, but you can still create the new chat.
A second new chat can't be created without a page refresh following the creation of the first one.
video.mp4I took a look at this issue and compared the current behavior to how chatgpt implements the same flow that you showed in the video and came up with a simple solution that feels intuitive, non hacky and looks more like the way chatgpt does it:
When we click on new chat, set thehref
to a new/chat/id
which currently only redirects to/
. This allows the creation of a new chat with a new id.And then reload the chat history to show the previous chat, if there was one- Actually, an even easier solution is to copy what was done when a chat is deleted, by replacing the Link with a button:
<button onClick={() => { router.refresh() router.push('/') }} ...
- This still doesn't fix the issue of the current chat not being added to the history
I'll try to open a PR on this issue today.
Seems just as hacky as my "solution" 🥲
from ai-chatbot.
Seems just as hacky as my "solution" 🥲
Imo, I thought your solution was only "hacky" because it solves the problem by redirecting to the current chat's id, which is an actual good solution, but this solution doesn't allow the user to F5
to create a new chat, like chatgpt.
If you mean it's hacky because it refreshes and redirects, then that's because we're trying to solve a mutation problem using RSC. I don't think there's a great or "non hacky" solution in that case.
The only thing I can think of is by remaking the Sidebar component as non RSC and have it inside the same Context as the chat.
If anyone else has a better solution that wouldn't require this boring refactor, I'd really love to see and learn.
from ai-chatbot.
Related Issues (20)
- Adding azure-ad login method stops the sidebar from working/toggling HOT 3
- [Feature Request] How about a Vue (NuxtJS) version?
- useAtBottom hooks not working HOT 3
- How would I change the AI provider from OpenAI GPT-3 to Google Deepmind's Gemini Pro Model? HOT 1
- `ReferenceError: __dirname is not defined` when using sub-directory for root HOT 1
- Connection error. Compiled /_error in 393ms (3438 modules) ⨯ node_modules/.pnpm/[email protected]/node_modules/openai/core.mjs (272:18) @ OpenAI.makeRequest HOT 3
- Disable NextAuth.js for authentication
- how to disable authentication HOT 6
- Feature Request: Model Selection Menu, DALLE-3 and Upload Button for GPT Versions
- chat history refresh regression HOT 2
- Problems with initial deployment HOT 3
- Boilerplate runs on vercel deployment but not locally, missing VERCEL_URL HOT 2
- Feature: Edit functionality for Title
- 405 on Chat attempt initial setup HOT 3
- How can we Integrate Google Analytics without _app.tsx or _document.tsx in this Next.js Project ?
- "New Chat" Button is not working HOT 1
- Generate title automatically HOT 5
- Can't get any next-auth email provider (magic link) to work HOT 2
- Feature Request: Add Vote field in Message class to facilitate upvote/downvote for individual response. HOT 1
- in next.js pages router, there are error: use StreamingTextResponse is error, not responding
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ai-chatbot.