Giter Club home page Giter Club logo

webapp-conversation's Introduction

Conversation Web App Template

This is a Next.js project bootstrapped with create-next-app.

Config App

Create a file named .env.local in the current directory and copy the contents from .env.example. Setting the following content:

# APP ID
NEXT_PUBLIC_APP_ID=
# APP API key
NEXT_PUBLIC_APP_KEY=
# APP URL
NEXT_PUBLIC_API_URL=

Config more in config/index.ts file:

export const APP_INFO: AppInfo = {
  title: 'Chat APP',
  description: '',
  copyright: '',
  privacy_policy: '',
  default_language: 'zh-Hans'
}

export const isShowPrompt = true
export const promptTemplate = ''

Getting Started

First, install dependencies:

npm install
# or
yarn
# or
pnpm install

Then, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

Using Docker

docker build . -t <DOCKER_HUB_REPO>/webapp-conversation:latest
# now you can access it in port 3000
docker run -p 3000:3000 <DOCKER_HUB_REPO>/webapp-conversation:latest

Open http://localhost:3000 with your browser to see the result.

Learn More

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

⚠️ If you are using Vercel Hobby, your message will be trucated due to the limitation of vercel.

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

webapp-conversation's People

Contributors

crazywoola avatar crazywoolala avatar goocarlos avatar iamjoel avatar jingjingxinshang avatar jzongkvo avatar npm-ued avatar yefori-go avatar zxhlyh avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

webapp-conversation's Issues

Issue with JSON on Vercel

Hello,

When pushing the repo to vercel I can type a chat message, seldom it does deliever an answer and mostly an JSON error appears:

"SyntaxError: Unterminated string in JSON at position 129"

This error always pops up when I want to type something, why is that so? Please help me.

Bot Replies Not Displaying

When deploying on Vercel, there is no reply from the bot. When I reload, the reply is displayed, and the following error appears in Vercel's logs:

    at consumeUint8ArrayReadableStream (/var/task/node_modules/next/dist/compiled/edge-runtime/index.js:1:15045)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async sendResponse (/var/task/node_modules/next/dist/server/send-response.js:42:34)
    at async doRender (/var/task/node_modules/next/dist/server/base-server.js:968:25)
    at async cacheEntry.responseCache.get.incrementalCache.incrementalCache (/var/task/node_modules/next/dist/server/base-server.js:1159:28)
    at async /var/task/node_modules/next/dist/server/response-cache/index.js:99:36```

ReferenceError: AbortSignal is not defined

next start -p 4000

ready - started server on 0.0.0.0:4000, url: http://localhost:4000
info  - Loaded env from /Users/macbook/Desktop/arthrv.com/arthrv/.env.local
ReferenceError: AbortSignal is not defined
    at ../../node_modules/.pnpm/[email protected]/node_modules/undici/lib/fetch/request.js (/Users/macbook/Desktop/arthrv.com/arthrv/node_modules/next/dist/compiled/@edge-runtime/primitives/fetch.js:7430:7)
    at __require (/Users/macbook/Desktop/arthrv.com/arthrv/node_modules/next/dist/compiled/@edge-runtime/primitives/fetch.js:14:50)
    at ../../node_modules/.pnpm/[email protected]/node_modules/undici/lib/fetch/index.js (/Users/macbook/Desktop/arthrv.com/arthrv/node_modules/next/dist/compiled/@edge-runtime/primitives/fetch.js:7813:46)
    at __require (/Users/macbook/Desktop/arthrv.com/arthrv/node_modules/next/dist/compiled/@edge-runtime/primitives/fetch.js:14:50)
    at Object.<anonymous> (/Users/macbook/Desktop/arthrv.com/arthrv/node_modules/next/dist/compiled/@edge-runtime/primitives/fetch.js:11638:28)

local run error, /app/api/messages/ missing conversation_id

Can anyone help? Thank you very much!

(Vercel is ok.)

error - AxiosError: Request failed with status code 400
at settle (webpack-internal:///(sc_server)/./node_modules/axios/dist/node/axios.cjs:1628:16)
at IncomingMessage.handleStreamEnd (webpack-internal:///(sc_server)/./node_modules/axios/dist/node/axios.cjs:2506:21)
at IncomingMessage.emit (node:events:531:35)
at endReadableNT (node:internal/streams/readable:1696:12)
at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
at Axios.request (webpack-internal:///(sc_server)/./node_modules/axios/dist/node/axios.cjs:3148:49)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async ChatClient.sendRequest (webpack-internal:///(sc_server)/./node_modules/dify-client/index.js:78:24)
at async GET (webpack-internal:///(sc_server)/./app/api/messages/route.ts:13:23)
at async eval (webpack-internal:///(sc_server)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:244:37) {

data: {
  code: 'invalid_param',
  message: 'Missing required parameter in the query string',
  params: 'conversation_id'
}

it seems the onData() in handleSend in index.tsx is not triggered when locally deployed.

本地运行出错,需要自己手动修改依赖的引入

error - ./node_modules/.pnpm/[email protected][email protected]/node_modules/ahooks/lib/utils/lodash-polyfill.js:14:0
Module not found: ESM packages (lodash-es) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals

类似这样的错误,在install包之后,本地开始运行npm run dev就会出现。

举个例子, 其中底层是引用的lodash-es 库,比如node_modules.pnpm\[email protected][email protected]\node_modules\ahooks\lib\useReactive\index.js。这里引用了var _lodashEs = require("lodash-es");

这里会报错,报错原因和解决方式参考这个链接:
Module not found: ESM packages (lodash-es) need to be imported. Use 'import' to reference the package instead. 官方解决

也就是require改为import。

还是不推荐开发者在下好依赖,还要手动修改依赖。期望修复或者有其他建议。

网站聊天没回应,但dify日志能看到回应

在vercel部署的网站聊天经常没回应,但在dify的日志里却能看到生成的对话,不知道哪里出问题了。vercel的log如下:
image
RangeError: Incorrect locale information provided
at Intl.getCanonicalLocales ()
at CanonicalizeLocaleList (/var/task/.next/server/chunks/183.js:60105:17)
at match (/var/task/.next/server/chunks/183.js:60365:108)
at getLocaleOnServer (/var/task/.next/server/app/page.js:359:63)
at LocaleLayout (/var/task/.next/server/app/page.js:373:20)
at X (/var/task/.next/server/chunks/183.js:61941:13)
at Na (/var/task/.next/server/chunks/183.js:62109:21)
at Array.toJSON (/var/task/.next/server/chunks/183.js:61869:20)
at stringify ()
at da (/var/task/.next/server/chunks/183.js:61383:9)
[Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.] {
digest: '2702072224'
}

It is possible to use this webapp with an external application ?

It is possible to use this webapp with an external application ?. If so, any pointer is appreciated.

All i need is to send the incoming message to the external app as a webhook and receive messages from the external app via an api call ?

Thanks in advance

Embedding in an Iframe is not possible

The standard dify-web docker container allows to embed the Chatbot in an Iframe on a website.
As I needed to customize the frontend, I followed the instructions and deployed the webapp-conversations frontend on vercel.
It runs perfectly when I open the Vercel URL directly. As soon as I embed it into an Iframe, I always get the error, that the chatbot is still responding, when I try to send a second message.
error_chatbot

Already tested:

  • Using a Reverseproxy in front of Vercel
  • Using Browser Dev Tools to find possible CORS Errors ect.
  • Using other Browsers: Chrome, Safari -> Not working, Firefox-> Working

App is unavailable

It shown 500 | App is unavailable error on first time run, no error occured on console log, what happen

500 App is unavailable

I've set the correct .env.local file correctly and after I run npm run dev
I got a 500 App is unavailable error on the localhost:3000.
I'm not sure where I went wrong with the configuration.
Can I see any logs?

Change theme

How can i change the theme of the webapp in general?

Docker deployed,when APP is running, the error reporting on background

RangeError: Incorrect locale information provided
at Intl.getCanonicalLocales ()
at CanonicalizeLocaleList (/app/.next/server/chunks/757.js:60105:17)
at match (/app/.next/server/chunks/757.js:60365:108)
at getLocaleOnServer (/app/.next/server/app/page.js:359:63)
at LocaleLayout (/app/.next/server/app/page.js:373:20)
at X (/app/.next/server/chunks/757.js:61941:13)
at Na (/app/.next/server/chunks/757.js:62109:21)
at Array.toJSON (/app/.next/server/chunks/757.js:61869:20)
at stringify ()
at da (/app/.next/server/chunks/757.js:61383:9)
[Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.] {
digest: '4288037568'

请问如何将此应用编译成静态网页,使用客户端渲染?

我想要将此应用编译成一个静态的网页,去掉其原有的 api,使用自己的后端 api 替代。

这样前端就无需发送 app_id 和 api_key,这些信息保存在自己的后端服务器,根据后端设置决定是否允许前端请求。

但如果我在 next.config.js 中加上 output: 'export' 后,npx run build 报错:

Build error occurred
Error: Page "/api/conversations/[conversationId]/name" is missing "generateStaticParams()" so it cannot be used with "output: export" config.

去掉 app/api 目录后,编译还是报错:
Generating static pages (0/4) [== ]a [Error]: Page with dynamic = "error" couldn't be rendered statically because it used cookies.

能否指导一下这个需求如何实现?谢谢。

能否添加用户名和密码登陆

没有用户名和密码登陆,不敢对外开放给同事使用(只能公司内部),希望能添加多用户的功能,比如使用sqlite数据库。 还有一个疑问,要是dify 后端创建了2个APP应用,难道就需要运行2个webapp-conversation 程序,开2个网站吗? 谢谢。

"500 App is unavailable" when fetching empty conversations

I pulled the repository to my local machine and set the required environment variables. After I started the project with
npm run dev
It starts and all the requests are 200 OK, but the whole screen is a big 500 App is unavailable.
I reversed engineered the issue and it seems this is happening due to an empty body of /conversations/ API request. Attaching screenshots with error, error logging and potential source of problem.
Screenshot from 2024-04-26 23-46-55
Screenshot from 2024-04-26 23-49-48
Screenshot from 2024-04-26 23-50-09
Screenshot from 2024-04-26 23-51-24
Screenshot from 2024-04-26 23-50-50
Screenshots show that the error is raised here:
const isNotNewConversation = conversations.some(item => item.id === _conversationId)
But gets muted and instead setAppUnavailable() is called.
The error reads "TypeError: Cannot read properties of undefined (reading 'some')
at eval (index.tsx:228:52)" meaning the supposed list conversations is undefined at the moment.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.